CSS網(wǎng)頁(yè)布局經(jīng)驗(yàn)：富有語(yǔ)義地類(lèi)class和id標(biāo)記命名
您應(yīng)該明白為什么我會(huì)說(shuō)到這個(gè)，選擇合適的、有意義的元素去描述你的內(nèi)容，確保您所選擇的是富有語(yǔ)義的類(lèi)class和id特征值。做正確的事情會(huì)使你的生活變得容易很多，如果你是某個(gè)團(tuán)隊(duì)的一分子，對(duì)團(tuán)隊(duì)其他成員來(lái)說(shuō)也是如此?？匆幌孪旅娴倪@條規(guī)則：
Example Source Code
.l13k { color: #369; }
如果您是剛接手這個(gè)工作，您在CSS文件中看到了上面的內(nèi)容，您能不能說(shuō)清楚這個(gè)類(lèi)是什么意思？
大部分情況下您都會(huì)說(shuō)不。這個(gè)類(lèi)的名稱(chēng)可能是個(gè)縮寫(xiě)，但是恐怕沒(méi)有辦法去弄清楚他到底是什么的縮寫(xiě)，眼前是一摸黑，或者是這種情況，可能是你把它放到這里，你現(xiàn)在很清楚它是什么意思，但是你能保證3年之后你還記得它是什么意思么？
現(xiàn)在我們看一下下面的規(guī)則：
Example Source Code
.left-blue { color: #369; }
你可能立即知道這個(gè)類(lèi)選擇符是為左側(cè)邊欄的顯示藍(lán)色區(qū)塊而創(chuàng)建的，這時(shí)它就正確的表達(dá)了一定的語(yǔ)義。正如我在上面提到的，一旦要你在在一周內(nèi)要重新設(shè)計(jì)，但是在重構(gòu)過(guò)程中，這個(gè)區(qū)塊需要定位到右邊，顏色變?yōu)榧t色，類(lèi)的特征值就沒(méi)有任何意義。所以你現(xiàn)在需要改變你所有的特征值，要不就什么都不改變，不過(guò)這樣可能或?qū)е轮刂氐睦Щ蟆?BR> 因此解決上面問(wèn)題的方法就是在類(lèi)特征值的命名中避免使用顏色(包括顏色名稱(chēng)和十六進(jìn)制值)或者寬度、高度的尺寸值；同時(shí)你也盡量的避免去使用任何表明表現(xiàn)形式的值，例如box、left、right。反之，將表現(xiàn)和內(nèi)容分離的意義也就不復(fù)存在了。
最后，我們看一下最合適的命名規(guī)則：
Example Source Code
.product-description { color: #369; }
您應(yīng)該能理解，這個(gè)規(guī)則是應(yīng)用于產(chǎn)品描述。無(wú)論您的設(shè)計(jì)改變了多少次都不會(huì)改變。清楚明了的感覺(jué)不錯(cuò)吧。
您應(yīng)該明白為什么我會(huì)說(shuō)到這個(gè)，選擇合適的、有意義的元素去描述你的內(nèi)容，確保您所選擇的是富有語(yǔ)義的類(lèi)class和id特征值。做正確的事情會(huì)使你的生活變得容易很多，如果你是某個(gè)團(tuán)隊(duì)的一分子，對(duì)團(tuán)隊(duì)其他成員來(lái)說(shuō)也是如此?？匆幌孪旅娴倪@條規(guī)則：
Example Source Code
.l13k { color: #369; }
如果您是剛接手這個(gè)工作，您在CSS文件中看到了上面的內(nèi)容，您能不能說(shuō)清楚這個(gè)類(lèi)是什么意思？
大部分情況下您都會(huì)說(shuō)不。這個(gè)類(lèi)的名稱(chēng)可能是個(gè)縮寫(xiě)，但是恐怕沒(méi)有辦法去弄清楚他到底是什么的縮寫(xiě)，眼前是一摸黑，或者是這種情況，可能是你把它放到這里，你現(xiàn)在很清楚它是什么意思，但是你能保證3年之后你還記得它是什么意思么？
現(xiàn)在我們看一下下面的規(guī)則：
Example Source Code
.left-blue { color: #369; }
你可能立即知道這個(gè)類(lèi)選擇符是為左側(cè)邊欄的顯示藍(lán)色區(qū)塊而創(chuàng)建的，這時(shí)它就正確的表達(dá)了一定的語(yǔ)義。正如我在上面提到的，一旦要你在在一周內(nèi)要重新設(shè)計(jì)，但是在重構(gòu)過(guò)程中，這個(gè)區(qū)塊需要定位到右邊，顏色變?yōu)榧t色，類(lèi)的特征值就沒(méi)有任何意義。所以你現(xiàn)在需要改變你所有的特征值，要不就什么都不改變，不過(guò)這樣可能或?qū)е轮刂氐睦Щ蟆?BR> 因此解決上面問(wèn)題的方法就是在類(lèi)特征值的命名中避免使用顏色(包括顏色名稱(chēng)和十六進(jìn)制值)或者寬度、高度的尺寸值；同時(shí)你也盡量的避免去使用任何表明表現(xiàn)形式的值，例如box、left、right。反之，將表現(xiàn)和內(nèi)容分離的意義也就不復(fù)存在了。
最后，我們看一下最合適的命名規(guī)則：
Example Source Code
.product-description { color: #369; }
您應(yīng)該能理解，這個(gè)規(guī)則是應(yīng)用于產(chǎn)品描述。無(wú)論您的設(shè)計(jì)改變了多少次都不會(huì)改變。清楚明了的感覺(jué)不錯(cuò)吧。