CSS規範——春風十里不如寫好CSS

CSS規範--春風十里不如寫好CSS！

css語法規範：

• 每條屬性聲明佔一行，增加易讀性

• 顏色採用十六進位寫法（不使用顏色名），並且能夠簡寫的進行簡寫:

• 0值的單位進行省略，如將margin:0px，寫成margin:0:

• 有選擇器組時，每個選擇器佔一行：

• 連字元使用-，而不使用_，因為能少按一個shift就少按，還有和js變數命名區分開。

• 選擇器避免使用標籤名。(首先可能使得一些不必要的標籤帶上樣式，其次會對選擇器尋找上也會在一定程度上浪費時間)

• 媒體查詢，不要寫在文檔最後或分開到另外文檔，應該寫在相應規則的附近，這樣有利於修改和閱讀

• 前綴，css3的一些屬性要注意帶上前綴：

• 引號方面，使用雙引號而不使用單引號,url不用使用引號：

• 每條屬性聲明語句結束後加上分號，最後一條聲明可省略分號，但不建議

• 每個屬性聲明的冒號（:）後添加一個空格

• 小於1的小數點的值，省略0，如0.5px，可寫成.5px

• 避免使用@import指令，使用link標籤來引入css文件

• 避免使用!important，這個優先順序最高，濫用會使得維護困難，代碼混亂

• Less,Sass等預處理言的嵌套不超過3層

• 避免使用id:(因為id優先順序高，且具有唯一性，復用性差，而且id是html與js的掛鉤，class是HTML與css的掛鉤，這樣能夠讓代碼更為的清晰，不用說看到一個id，既要到js里查查有沒有什麼用，又到css里看看有什麼樣式，確實麻煩。)

• 注釋需要全面易懂，不要只寫一點

css屬性聲明順序規範：

css屬性的書寫順序大致分為4組，從上到下依次書寫：

1. Positioning Model（定位的相關屬性）：

• 有position，display，TRBL，z-index，float，overflow等

1. Box Model （盒子模型的屬性）：

• 有margin，padding，border，width，height等

1. Typographic （文本，排版）

• 有font，line-height，text-align

1. Visual （視覺方面的）

• 有background，color，transition，list-style

例子：

特別的：如果有content屬性時，需要把其放到最前面

css的文件分類：

文件分類這不會有什麼標準，分好，適合自己開發和維護便可。比如：可以有公共的css，某個頁面的css，重置的css，皮膚的css，部件的css等，可根據自己的需求，習慣等分類。不必太過拘束。

• common.css（通用）

• main.css（主要）

• reset.css（重置）

• skin.css（皮膚）

  ……

css選擇器命名：

命名這東西可以說讓每個前端開發的人員苦惱的東西，有時得想半天去想一個名字，煎熬啊。老是想，到底怎麼樣的命名才比較好呢？我這樣命名接著會不會重複？等等。。。

到底怎樣命名才比較規範，參考一下NEC規範或者是BEM規範。個人比較喜歡NEC，因為其比較簡約些,詳細的可以到NEC官網上看看。

看看NEC的分類：

• 布局（grid）（.g-）：將頁面分割為幾個大塊，通常有頭部、主體、主欄、側欄、尾部等！

• 模塊（module）（.m-）：通常是一個語義化的可以重複使用的較大的整體！比如導航、登錄、註冊、各種列表、評論、搜索等！

• 元件（unit）（.u-）：通常是一個不可再分的較為小巧的個體，通常被重複用於各種模塊中！比如按鈕、輸入框、loading、圖標等！

• 功能（function）（.f-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現，比如清除浮動等！不可濫用！

• 皮膚（skin）（.s-）：如果你需要把皮膚型的樣式抽離出來，通常為文字色、背景色（圖）、邊框色等，非換膚型網站通常只提取文字色！非換膚型網站不可濫用此類！

• 狀態（.z-）：為狀態類樣式加入前綴，統一標識，方便識別，她只能組合使用或作為後代出現（.u-ipt.z-dis{}，.m-list li.z-sel{}）

我們參考NEC的分類命名的規範，學習學習它的命名，可以照著使用，也可以有自己不同的命名，可以根據團隊的習慣等。規矩是死的，人是活的，能靈活去變通才是最好的，能夠寫出清晰易懂的代碼就ok。

css命名常用單詞：

• 頭：header

• 尾：footer

• 導航：nav

• 側欄：sidebar

• 欄目：column

• 外圍容器：wrapper

• 登錄條：loginbar

• 標誌：logo

• 廣告：banner

• 頁面主體：main

• 熱點：hot

• 新聞：news

• 下載：download

• 子導航：subnav

• 菜單：menu

• 子菜單：submenu

• 搜索：search

• 友情鏈接：friendlink

• 頁腳：footer

• 版權：copyright

• 滾動：scroll

• 內容：content

• 標籤頁：tab

• 文章列表：list

• 信息：msg

• 小技巧：tips

• 標題：title

• 加入：joinus

• 指南：guild

• 服務：service

• 註冊：regsiter

• 狀態：status

• 投票：vote

• 合作夥伴：partner

• 容器：container

• 按鈕：button

單詞這方面能看懂就好，英語也要學好才行啊，有時候不懂怎麼命名，就查查英文單詞怎麼寫，看得出英語還是很重要啊。css的命名單詞長度不要太長太冗餘，看懂就好，有些單詞過長可以適當的縮寫一下。

文章摘自博客園

更多精彩推薦

海量IT視頻教程：http://xue.ujiuye.com/

IT必備小技巧：http://zhi.ujiuye.com/

零基礎學習IT技術：http://www.ujiuye.com/zt/qgjx?wt.bd=lsh11tt

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！