[讓CSS更規範]ID和類名

摘自《精通CSS:高級Web標準解決方案》

有意義的元素提供了很好的基礎,但是可用元素的列並不全面。(X)HTML是作爲簡單的文檔標記語言創建的,而不是界面語言。因此,沒有用於內容區域或導航欄等的專用元素。雖然可以使用XML創建自己的元素,但是由於太複雜,這在目前還不太現實。

次優的解決方案是使用現有的元素,並且通過添加ID或類名給它們賦予額外的意義。這會在文檔中添加額外的結構,並給樣式提供有用的“鉤子”。因此,可以建立一個簡單的鏈接列表,並且給它分配ID mainNav,從而創建出定製的導航元素:

使用ID名稱標識頁面上的單獨元素(比如站點導航),ID必須是唯一的。ID可以用來標識持久的結構性元素,例如主導航或內容區域。ID還可以用來標識一次性元素,例如某個鏈接或表單元素。

在整個站點上,ID名應該應用於概念相似的元素以避免混淆。從技術上說,如果聯繫人表單和聯繫人詳細信息在不同的頁面上,那麼可以給它們分配同樣的ID名contact。但是,如果以後需要根據每個元素的上下文環境設置它們的樣式,那麼就會遇到問題。所以,使用不同的ID名(比如contactForm和contactDetails)就會簡單得多。

一個ID名只能應用於頁面上的一個元素,而同一個類名可以應該於頁面上任意數量的元素。類非常適合標識內容的類型或相似的條目。例如,假設有一個新聞頁面,其中包含每條新聞的日期。不必給每個日期分配不同的ID,而是可以給所有日期分配類名date。

在分配ID和類名時,一定要儘可能保持名稱有意義並與表現方式無關。例如,可以給導航元素分配ID rightHandNav,因爲你希望它出現在右邊。但是,如果以後將它的位置改到左邊,那麼CSS和(X)HTML就會不同步。所以,將這個元素命名爲subNav或secondaryNav更合適。這種名稱解釋了這個元素是什麼,而沒有涉及如何表現它。對於類名,也是這樣的。即使你希望所有錯誤消息以紅色顯示, 也不要使用類名red,而應該選擇更有意義的名稱,比如error或feedback。

在寫類名和ID名時,需要注意區分大小寫。CSS大體上是不區分大小寫的語言。但是,在標記中實體(比如類名和ID名)是否區分大小寫取決於標記語言是否區分大小寫。如果使用XHTML,那麼類名和ID名是區分大小寫的;如果使用常規的HTML,那麼是不區分大小寫的。處理這個問題最好的方式是保持一致的命名約定。所以,如果在(X)HTML類名中使用駝峯式大小寫(camel case),那麼在CSS中也採用這種形式。

由於類具有靈活性,它們是非常強大的。同時,它們也可能被過度使用或濫用。CSS新手常常在幾乎所有東西上添加類,從而試圖更精細地控制它們的樣式。早期的WYSIWYG編輯器也傾向於在應用樣式的每個地方都添加類。許多開發人員在使用編輯器生成的代碼學習CSS時繼承了這個壞習慣。這種現象稱爲“多類症”(classitis),在某種程度上,這和使用基於表格的佈局一樣糟糕,因爲它在文檔中添加了無意義的代碼。

Zeldman.com turns 10



Another milestone for Jeffrey as zeldman.com turns 10 today
>

More

在前面的示例中,每個元素都通過使用一個與新聞相關的類名標識爲新聞的一部分。這使新聞標題和正文可以採用與頁面其他部分不同的樣式。但是,不需要用這麼多類來區分各個元素。可以將新聞條目放在一個部分中,並且加上類名news,從而標識整個新聞條目。然後,可以使用層疊識別新聞標題或文本。


Zeldman.com turns 10


Another milestone for Jeffrey as zeldman.com turns 10 today


More


以這種方式刪除不必要的類有助於簡化代碼,使頁面更簡潔。總之,這種對類名的過度依賴是不必要的。我常常只在不適合使用ID的情況下對元素應用類,而且儘可能少使用類。我創建的大多數文檔常常只需要添加幾個類。如果你發現自己添加了許多類,那麼這很可能意味着你的(X)HTML文檔的結構有問題。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章