CSS中class及id的規范化命名有哪些

今天小編給大家分享一下CSS中class及id的規范化命名有哪些的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

直觀命名

當在設計Web頁面以及必要對一個div發展標識的時刻，最自然的想法等于使用可以描畫元素所在頁面位置的詞匯來對其定名。這種門徑使得類以及id的稱說下列面所示：

top-panel

horizontal-nav

left-side

center-column

right-col

這些是CSS以及XHTML類和id的有效定名方式。這些辭匯簡單并且能夠令人望文生義，于是滿足了標識頁面元素以及相應的CSS樣式的重要。

但標題問題是這樣的俗稱同頁面模式的特定正文方式相干聯。這些命名參照了某種特定頁面組織中的頁面元素位子，因而在多么的構造之外運用就會顯得不合適甚至造成體味雜遝。同時，這些命名不有觸及文檔模式的結構。因此，上面給出了對CSS類以及ID命名更好的方法。

結構化命名

結構化的標志象征著注釋方式/地位信息同內容的完全薈萃——這個中涵概涌那會符號（markup）中的類和id稱號。

有標記的關連動靜都是用來描畫文檔的結構而不是表面。何等的賦性使得我們可以經由歷程容易的改變CSS的方式來對差異外貌花樣下的內容（content）以及標記（markup）進行重用。當你理解這種方式時，很容易就可以發明采取頁面位置來為類以及id命名的方式在處置如音頻（audio）等輪廓名堂上顯得尤其不合適。因此，理當根據在文檔中的使用指數而非呈現位置來對類以及id發展結構化命名。

可以依據以下所示的結構化方式來對類以及id稱謂命名：

branding

main-nav

subnav

main-content

sidebar

這些名字同直觀定名方式一樣很是易懂，但他們刻劃了頁面元素的感導而非位子。這使得代碼加倍合適運用徹底的結構化標識表記標幟（structural markup）的初志，即啟迪職員可以在不篡改標記的環境下對形形色色媒體下的體現樣式發展措置。

即便你不規劃在其他的媒體上對Web頁面進行花色批改，運用結構化命名方式還可以幫手你在從此的站點升級或重新設計中更為輕松。例如，結構化定名防止了當一個div同id right-column移動到頁面左邊后所帶來的錯亂。對div sidebar的采用多么的命名方式就顯得越發適當，因為不管它呈當初頁面的哪一邊，這個名字仿照照舊對開發職員來講直觀易懂。

成例

Andy Clarke闡發了40份由推重尺度化Web設計理念的開荒職員所設計的Web站點的源代碼。誠然類以及id稱說很不匹敵，然而照常創造了一些頻繁涌現的常用稱謂。這里給出了最經常應用類/id稱號的示例列表：

header

content

nav

sidebar

footer

以上就是“CSS中class及id的規范化命名有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。