CSS和HTML命名規范有哪些

今天就跟大家聊聊有關CSS和HTML命名規范有哪些，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

1. 面向屬性的命名方法，是什么屬性就寫什么名。

2. 精簡高效CSS命名之“三無原則”，此“三無原則”就是：無ID，無層級，無標簽，CSS命名就應該最簡單、最直接，直搗黃龍。沒有HTML標簽，沒有層級，原因有三：

1. 限制重用  2. CSS文件大小  3. 降低了渲染效率，CSS的渲染方式是“從右往左”渲染的，

“三無原則”遺留之樣式沖突問題

正如上面講的，層級，標簽可以避免樣式沖突，雖然“面向屬性的命名”不存在沖突問題，但是，頁面上很多樣式是無法分離使用“面向屬性的命名”的，此時，一不能有層級，二不能有標簽，如果避免沖突呢？

首先，規范。項目組所有人的命名方法，習慣都要統一。其次，也是實際的做法，同一內容，使用同一前綴。就如上面的那張圖片所示，所有class同一使用od前綴，這樣，就絕不會與其他頁面的CSS產生沖突了。

我們通常會根據三類情況給定一個 class 名：

功能性 class 名

內容性 class 名

展示性 class 名

http:/ /www.iis7.com/b/wzjk/

這幾類 class 名是趨向于穩定特質的。如果我們遵循這些命名原則，就會顯得更明智，而且我們的 CSS 會更好的適應未來的改變。

功能性 class 名通常是你的最佳選擇。當你能夠使用它們的時候就盡量使用。如果你無法提取出完全功能性的名字，可以考慮你的項目的本質及其發展。原則上，內容性 class 名更適合小型站點；而展示性 class 名更適合大型站點。

開發者會很在意這種用法。沒有人希望一個項目變得難以維護，但是每個人都有不同的 想法通過 class 名來應對這些特殊情況。這時不妨思考一下我們使用的不同類型 class 名的本質，問問自己這樣做是否更好的幫助你的項目達成目標。

命名規則說明：

1）、所有的命名最好都小寫

2）、屬性的值一定要用雙引號("")括起來，且一定要有值如class="divcss5",id="divcss5"

3）、每個標簽都要有開始和結束，且要有正確的層次，排版有規律工整

4）、空元素要有結束的tag或于開始的tag后加上"/"

5）、表現與結構完全分離，代碼中不涉及任何的表現元素，如style、font、bgColor、border等

6）、<h2>到<h6>的定義，應遵循從大到小的原則，體現文檔的結構，并有利于搜索引擎的查詢。

7）、給每一個表格和表單加上一個唯一的、結構標記id

8）、給圖片加上alt標簽

9）、盡量使用英文命名原則

10）、盡量不縮寫，除非一看就明白的單詞

相對網頁外層重要部分CSS樣式命名： 

外套 wrap ------------------用于最外層

頭部 header ----------------用于頭部

主要內容 main ------------用于主體內容（中部）

左側 main-left -------------左側布局

右側 main-right -----------右側布局

導航條 nav -----------------網頁菜單導航條

內容 content ---------------用于網頁中部主體

底部 footer -----------------用于底部

看完上述內容，你們對CSS和HTML命名規范有哪些有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。