css命名和書寫規範

前言

在項目開發中對於css名字的命名和書寫總是感受很混亂，這對於代碼的可讀性以及維護提出了挑戰，因此在閒暇之餘看了一些這方面的內容，現總結以下...

1.命名規則說明

1. 全部的命名最好都小寫
2. 屬性的值必定要用雙引號("")括起來，且必定要有值如class="divcss5",id="divcss5"
3. 每一個標籤都要有開始和結束，且要有正確的層次，排版有規律工整
4. 空元素要有結束的tag或於開始的tag後加上"/"
5. 表現與結構徹底分離，代碼中不涉及任何的表現元素，如style、font、bgColor、border等
6. 給每個表格和表單加上一個惟一的、結構標記id
7. 給圖片加上alt標籤
8. 儘可能不縮寫，除非一看就明白的單詞，不知道的用翻譯軟件翻譯一下
9. 不管是使用「.」（小寫句號）選擇符號開頭命名，仍是使用「#」(井號)選擇符號開頭命名都無所謂，但咱們最好遵循，主要的、重要的、特殊的、最外層的盒子用「#」(井號)選擇符號開頭命名，其它都用「.」（小寫句號）選擇符號開頭命名
10. 若是名字過長能夠用中橫線可是拒絕使用下劃線（IE6以可能出現解析錯誤，爲了區分JavaScript變量名）

bad

.miantitle {
    color: #e3c;
  }
  .mian_title {
    color: #e3c;
  }

good

.mian-title {
    color: #e3c;
  }

11.屬性簡寫須要你很是清楚屬性值的正確順序，並且在大多數狀況下並不須要設置屬性簡寫中包含的全部值，因此建議儘可能分開聲明會更加清晰；margin 和 padding 相反，須要使用簡寫。更多詳細規則請參考此文章
bad

.list-box {
    border-top-style: none;
    font-family: aerif;
    font-size: 100%;
    line-height: 1.6;
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0;
  }

good

.list-box {
    border-top: 0;
    font: 100%/1.6 aerif;
    padding: 0 1em 2em;
  }

12.去掉小數點後面的0
bad

font-size: 0.8em;

good

font-size: .8em;

13.十六進制顏色代碼縮寫，並儘可能用小寫
bad

color: #eebbcc;

good

color: #ebc;

14.不要隨意用id
id在JS是惟一的，不能屢次使用，而使用class類選擇器卻能夠重複使用，另外id的優先級優先與class，因此id應該按需使用，而不能濫用
15.能夠爲選擇器加狀態前綴
bad

.withdrawal {
    background-color: #ccc;
  }

good

.is-withdrawal {
    background-color: #ccc;
  }

16.項目命名的時候採用這種方式my_project_name
17.媒體查詢規則靠近與他們相關的規則，不要將他們一塊兒放到獨立的樣式文件中，具體可參考此文章
18.更多詳細css書寫規範可參考此文章1和此文章2
19.scss書寫時應注意的問題能夠參考此文章

2.命名參考表

網頁外層

最外層：wrapper (頁面外圍控制總體佈局寬度)
頭部：header
主體內容（中部）：main
左側佈局：main-left
右側佈局：main-right
導航條：nav
網頁中部主體：content
底部：footer
菜單：menu

頁面結構

#wrapper 頁面外圍控制總體佈局寬度
#container或#content 容器,用於最外層
#head, #header 頁頭部分
#foot, #footer 頁腳部分
#sidebar 側邊欄
#column 欄目
#left,#right,#center 左右中

導航

#nav 導航
#miannav 主導航
#subnav 子導航
#topnav 頂導航
#sidenar 邊導航
#leftsidenav 左導航
#rightsidenav 右導航
#menu 菜單
#submenu 子菜單
#title 標題
#summary 摘要

功能

#logo 標誌
#banner 廣告
#login 登陸
#loginbar 登陸條
#regsiter 註冊
#search 搜索
#shop 功能區
#title 標題
#joinus 加入
#status 狀態
#btn 按鈕
#s 滾動
#tab 標籤頁
#list 文章列表
#msg 提示信息
#current 當前的
#tips 小技巧
#icon 圖標
#note 註釋
#guild 指南
#service 服務
#hot 熱點熱門
#news 新聞
#download 下載
#vote 投票
#partner 合做夥伴
#friendlink 友情連接
#copyright 版權
#searchInput 搜索輸入框
#search-output 搜索輸出
#search-results 搜索結果
#branding 商標
#siteinfo 網站信息
#siteinfoLegal 法律聲明
#siteinfoCredits 信譽
#arrow 箭頭
#sitemap 網站地圖
#homepage 首頁
#subpage 二級頁面子頁面
#toolbar 工具條
#drop 下拉
#dropmenu 下拉菜單
須要用 class的命名
.tab 標籤頁
.left .right .center 居左、中、右
.news 新聞
.download 下載
.banner 廣告條
.products 產品
.products_prices 產品價格
.products-description 產品描述
.products_review 產品評論
.editor_review 編輯評論
.news_release 最新產品
.publisher 生產商
.screenshot 縮略圖
.faqs 常見問題
.keyword 關鍵詞
..blog 博客
.forum 論壇

3.css文件命名

global.css 全局
全局樣式爲全站公用，爲頁面樣式基礎，頁面中必須包含
master.css style.css 主要的
module.css 模塊
產品類頁面應用，將可複用類模塊進行剝離後，可與其它樣式配合使用
base.css 基本共用
layout.css 佈局，版面
頁面結構類型複雜，而且公用類型較多時使用。多用在首頁級頁面和產品類頁面中
themes.css 主題
實現換膚功能時應用
columns.css 專欄
font.css 文字，字體
forms.css 表單
mend.css 補丁
基於以上樣式進行的私有化修補
print.css 打印
style.css 私有
獨立頁面所使用的樣式文件，頁面中必須包含

4.css屬性聲明順序

詳細的聲明順序能夠參考此文章

1. 位置屬性(position, top, right, z-index,display, float等)
2. 大小(width, height, padding, margin)
3. 文字系列(font, line-height, letter-spacing,color- text-align等)
4. 背景(background, border等)
5. 其餘(animation, transition等)

bad

.example {
    color: red;
    z-index: -1;
    background-color: #9e0;
    display: inline-block;
    font-size: 1.5em;
  }

good

.example {
    z-index: -1;
    display: inline-block;
    font-size: 1.5em;
    color: red;
    background-color: #9e0;
  }

感謝

此文我參考了以下做者寫的文章，在此特別提出感謝，若是你在閱讀我寫的文章中有任何問題能夠查閱以下連接：

• DIV+CSS規範命名大全集合
• css命名規則【豆瓣小組】
• 如何規範 CSS 的命名和書寫？【知乎】
• 團隊規範文檔【騰訊alloyteam前端團隊】
• css編碼規範【百度fex前端團隊】
• nec規範【網易前端團隊】
• 精簡高效的CSS命名準則/方法【張鑫旭】
• 無廢話網頁重構系列【大象】