CSS網頁布局經驗：富有語義地類class和id標記命名

　　您應該明白為什么我會說到這個，選擇合適的、有意義的元素去描述你的內容，確保您所選擇的是富有語義的類class和id特征值。做正確的事情會使你的生活變得容易很多，如果你是某個團隊的一分子，對團隊其他成員來說也是如此。看一下下面的這條規則

　　Example Source Code

　　.l13k { color: #369; }

　　如果您是剛接手這個工作，您在CSS文件中看到了上面的內容，您能不能說清楚這個類是什么意思？

　　大部分情況下您都會說不。這個類的名稱可能是個縮寫，但是恐怕沒有辦法去弄清楚他到底是什么的縮寫，眼前是一摸黑，或者是這種情況，可能是你把它放到這里，你現在很清楚它是什么意思，但是你能保證3年之后你還記得它是什么意思么？

　　現在我們看一下下面的規則

　　Example Source Code

　　.left-blue { color: #369; }

　　你可能立即知道這個類選擇符是為左側邊欄的顯示藍色區塊而創建的，這時它就正確的表達了一定的語義。正如我在上面提到的，一旦要你在在一周內要重新設計，但是在重構過程中，這個區塊需要定位到右邊，顏色變為紅色，類的特征值就沒有任何意義。所以你現在需要改變你所有的特征值，要不就什么都不改變，不過這樣可能或導致重重的困惑。

　　因此解決上面問題的最好方法就是在類特征值的命名中避免使用顏色(包括顏色名稱和十六進制值)或者寬度、高度的尺寸值；同時你也盡量的避免去使用任何表明表現形式的值，例如box、left、right。反之，將表現和內容分離的意義也就不復存在了。

　　最后，我們看一下最合適的命名規則

　　Example Source Code

　　.product-description { color: #369; }

　　您應該能理解，這個規則是應用于產品描述。無論您的設計改變了多少次都不會改變。清楚明了的感覺不錯吧。