div css布局命名時(shí)盡量避免下劃線

發(fā)布時(shí)間：2014-06-16 10:34:48 作者：佚名

用過(guò)CSS hack的朋友應(yīng)該知道，用下劃線命名也是一種hack，如使用_style這樣的命名，可以讓IE外的大部分瀏覽器忽略這個(gè)樣式的定義。這篇文章主要為大家介紹了css布局命名時(shí)的注意事項(xiàng),需要的朋友可以參考下

一直習(xí)慣了在命名css樣式名時(shí)使用下劃線“_”做為單詞的分隔符，這也是在寫(xiě)js時(shí)慣用的寫(xiě)法。

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

為此得找一個(gè)能代替下劃線而又合規(guī)范的符號(hào)，當(dāng)然不是一定要用這種分隔符之類的，只是個(gè)人習(xí)慣問(wèn)題。

做了個(gè)小測(cè)試，將下劃線分別用了“~”、“$”、“`”、“&”和“－”去代替，結(jié)果只有“－”號(hào)是可以使用的，而且對(duì)js的支持也正常，看下測(cè)試：

以下為引用的內(nèi)容：

css部分：

復(fù)制代碼

代碼如下:

.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部分：

復(fù)制代碼

代碼如下:

js部分：

復(fù)制代碼

代碼如下:

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";
}

結(jié)果是“try1”變成了紅色，顯示正常。不過(guò)在css定義里，經(jīng)常會(huì)用到id選擇符，如果在頁(yè)面中的id命名中使用了“_”，就免不了在css樣式里出現(xiàn)下劃線“_”了，所以在此還得注意在id的命名上也要避免使用下劃線。