css布局命名時盡量避免下劃線的方法

這篇文章給大家分享的是有關css布局命名時盡量避免下劃線的方法的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

用過css hack的朋友應該知道，用下劃線命名也是一種hack，如使用“_style”這樣的命名，可以讓ie外的大部分瀏覽器忽略這個樣式的定義，所以使用“_”做為命名時的分隔符是不規范的。在做css檢查時會出現錯誤提示，因此要避免使用下劃線命名。

為此得找一個能代替下劃線而又合規范的符號，當然不是一定要用這種分隔符之類的，只是個人習慣問題。

做了個小測試，將下劃線分別用了“~”、“$”、“`”、“&”和“－”去代替，結果只有“－”號是可以使用的，而且對js的支持也正常，看下測試：

以下為引用的內容：

css部分：

代碼如下：

.try-a{ color:#00f; }
.try~a{ color:#00f; }
.try`a{ color:#00f; }
.try&a{ color:#00f; }
.try$a{ color:#00f; }
.try-b{ color:#f00; }
.try~b{ color:#f00; }
.try`b{ color:#f00; }
.try&b{ color:#f00; }
.try$b{ color:#f00; }

html部分：

代碼如下：

<div id="a" class="try-a">try1</div>
<div id="b" class="try~a">try2</div>
<div id="c" class="try`a">try3</div>
<div id="d" class="try&a">try4</div>
<div id="e" class="try$a">try5</div></p> <p><input type="button" value="ok" onclick="b（）；" />

js部分：

代碼如下：

function b（）{
document.getelementbyid（"a"）。classname="try-b";
document.getelementbyid（"b"）。classname="try~b";
document.getelementbyid（"c"）。classname="try`b";
document.getelementbyid（"d"）。classname="try&b";
document.getelementbyid（"e"）。classname="try$b";
}

結果是“try1”變成了紅色，顯示正常。不過在css定義里，經常會用到id選擇符，如果在頁面中的id命名中使用了“_”，就免不了在css樣式里出現下劃線“_”了，所以在此還得注意在id的命名上也要避免使用下劃線。

感謝各位的閱讀！關于css布局命名時盡量避免下劃線的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！