1. 程式人生 > >精簡高效的CSS命名準則方法

精簡高效的CSS命名準則方法

對於CSS,為了避免樣式衝突,我們總會給其賦予相當特殊的命名,或是在選擇符上新增HTML標記,或是使用層級。

  1. 面向屬性的命名方法,是什麼屬性就寫什麼名。
  2. 精簡高效CSS命名之“三無原則”,此“三無原則”就是:無ID,無層級,無標籤,CSS命名就應該最簡單、最直接,直搗黃龍。沒有HTML標籤,沒有層級,原因有三:
  3. 限制重用 2. CSS檔案大小 3. 降低了渲染效率,CSS的渲染方式是“從右往左”渲染的, “三無原則”遺留之樣式衝突問題 正如上面講的,層級,標籤可以避免樣式衝突,雖然“面向屬性的命名”不存在衝突問題,但是,頁面上很多樣式是 http:/ /www.iis7.com/b/wzjk/ 無法分離使用“面向屬性的命名”的,此時,一不能有層級,二不能有標籤,如果避免衝突呢? 首先,規範。專案組所有人的命名方法,習慣都要統一。其次,也是實際的做法,同一內容,使用同一字首。就如上面的那張圖片所示,所有class同一使用od字首,這樣,就絕不會與其他頁面的CSS產生衝突了。

我們通常會根據三類情況給定一個 class 名: 功能性 class 名 內容性 class 名 展示性 class 名 這幾類 class 名是趨向於穩定特質的。如果我們遵循這些命名原則,就會顯得更明智,而且我們的 CSS 會更好的適應未來的改變。 功能性 class 名通常是你的最佳選擇。當你能夠使用它們的時候就儘量使用。如果你無法提取出完全功能性的名字,可以考慮你的專案的本質及其發展。原則上,內容性 class 名更適合小型站點;而展示性 class 名更適合大型站點。 開發者會很在意這種用法。沒有人希望一個專案變得難以維護,但是每個人都有不同的 想法通過 class 名來應對這些特殊情況。這時不妨思考一下我們使用的不同型別 class 名的本質,問問自己這樣做是否更好的幫助你的專案達成目標。

命名規則說明: 1)、所有的命名最好都小寫 2)、屬性的值一定要用雙引號("")括起來,且一定要有值如class=“divcss5”,id=“divcss5” 3)、每個標籤都要有開始和結束,且要有正確的層次,排版有規律工整 4)、空元素要有結束的tag或於開始的tag後加上"/" 5)、表現與結構完全分離,程式碼中不涉及任何的表現元素,如style、font、bgColor、border等 6)、

的定義,應遵循從大到小的原則,體現文件的結構,並有利於搜尋引擎的查詢。 7)、給每一個表格和表單加上一個唯一的、結構標記id 8)、給圖片加上alt標籤 9)、儘量使用英文命名原則 10)、儘量不縮寫,除非一看就明白的單詞

相對網頁外層重要部分CSS樣式命名: 外套 wrap ------------------用於最外層 頭部 header ----------------用於頭部 主要內容 main ------------用於主體內容(中部) 左側 main-left -------------左側佈局 右側 main-right -----------右側佈局 導航條 nav -----------------網頁選單導航條 內容 content ---------------用於網頁中部主體 底部 footer -----------------用於底部