摘要：前言在項目開發(fā)中對于名字的命名和書寫老是感覺很混亂，這對于代碼的可讀性以及維護提出了挑戰(zhàn)，所以在閑暇之余看了一些這方面的內(nèi)容，現(xiàn)總結(jié)如下命名規(guī)則說明所有的命名最好都小寫屬性的值一定要用雙引號括起來，且一定要有值如每個標(biāo)簽都要有開始和結(jié)束，且

在項目開發(fā)中對于css名字的命名和書寫老是感覺很混亂，這對于代碼的可讀性以及維護提出了挑戰(zhàn)，所以在閑暇之余看了一些這方面的內(nèi)容，現(xiàn)總結(jié)如下...

所有的命名最好都小寫

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

每個標(biāo)簽都要有開始和結(jié)束，且要有正確的層次，排版有規(guī)律工整

空元素要有結(jié)束的tag或于開始的tag后加上"/"

表現(xiàn)與結(jié)構(gòu)完全分離，代碼中不涉及任何的表現(xiàn)元素，如style、font、bgColor、border等

給每一個表格和表單加上一個唯一的、結(jié)構(gòu)標(biāo)記id

給圖片加上alt標(biāo)簽

盡量不縮寫，除非一看就明白的單詞，不知道的用翻譯軟件翻譯一下

無論是使用“.”（小寫句號）選擇符號開頭命名，還是使用“#”(井號)選擇符號開頭命名都無所謂，但我們最好遵循，主要的、重要的、特殊的、最外層的盒子用“#”(井號)選擇符號開頭命名，其它都用“.”（小寫句號）選擇符號開頭命名

如果名字過長可以用中橫線但是拒絕使用下劃線（IE6以可能出現(xiàn)解析錯誤，為了區(qū)分JavaScript變量名）

bad

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

good

  .mian-title {
    color: #e3c;
  }

11.屬性簡寫需要你非常清楚屬性值的正確順序，而且在大多數(shù)情況下并不需要設(shè)置屬性簡寫中包含的所有值，所以建議盡量分開聲明會更加清晰；margin 和 padding 相反，需要使用簡寫。更多詳細(xì)規(guī)則請參考此文章
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.去掉小數(shù)點后面的0
bad

font-size: 0.8em;

good

font-size: .8em;

13.十六進(jìn)制顏色代碼縮寫，并盡量用小寫
bad

color: #eebbcc;

good

color: #ebc;

14.不要隨意用id
id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復(fù)使用，另外id的優(yōu)先級優(yōu)先與class，所以id應(yīng)該按需使用，而不能濫用
15.可以為選擇器加狀態(tài)前綴
bad

  .withdrawal {
    background-color: #ccc;
  }

good

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

16.項目命名的時候采用這種方式my_project_name
17.媒體查詢規(guī)則靠近與他們相關(guān)的規(guī)則，不要將他們一起放到獨立的樣式文件中，具體可參考此文章
18.更多詳細(xì)css書寫規(guī)范可參考此文章1和此文章2
19.scss書寫時應(yīng)注意的問題可以參考此文章

最外層：wrapper (頁面外圍控制整體布局寬度)
頭部：header
主體內(nèi)容（中部）：main
左側(cè)布局：main-left
右側(cè)布局：main-right
導(dǎo)航條：nav
網(wǎng)頁中部主體：content
底部：footer
菜單：menu

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

#nav 導(dǎo)航
#miannav 主導(dǎo)航
#subnav 子導(dǎo)航
#topnav 頂導(dǎo)航
#sidenar 邊導(dǎo)航
#leftsidenav 左導(dǎo)航
#rightsidenav 右導(dǎo)航
#menu 菜單
#submenu 子菜單
#title 標(biāo)題
#summary 摘要

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

global.css 全局
全局樣式為全站公用，為頁面樣式基礎(chǔ)，頁面中必須包含
master.css style.css 主要的
module.css 模塊
產(chǎn)品類頁面應(yīng)用，將可復(fù)用類模塊進(jìn)行剝離后，可與其它樣式配合使用
base.css 基本共用
layout.css 布局，版面
頁面結(jié)構(gòu)類型復(fù)雜，并且公用類型較多時使用。多用在首頁級頁面和產(chǎn)品類頁面中
themes.css 主題
實現(xiàn)換膚功能時應(yīng)用
columns.css 專欄
font.css 文字，字體
forms.css 表單
mend.css 補丁
基于以上樣式進(jìn)行的私有化修補
print.css 打印
style.css 私有
獨立頁面所使用的樣式文件，頁面中必須包含

詳細(xì)的聲明順序可以參考此文章

位置屬性(position, top, right, z-index,display, float等)

大小(width, height, padding, margin)

文字系列(font, line-height, letter-spacing,color- text-align等)

背景(background, border等)

其他(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規(guī)范命名大全集合

css命名規(guī)則【豆瓣小組】

如何規(guī)范 CSS 的命名和書寫？【知乎】

團隊規(guī)范文檔【騰訊alloyteam前端團隊】

css編碼規(guī)范【百度fex前端團隊】

nec規(guī)范【網(wǎng)易前端團隊】

精簡高效的CSS命名準(zhǔn)則/方法【張鑫旭】

無廢話網(wǎng)頁重構(gòu)系列【大象】