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

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

所有的命名最好都小寫

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

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

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

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

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

給圖片加上alt標簽

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

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

如果名字過長可以用中橫線但是拒絕使用下劃線（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書寫時應注意的問題可以參考此文章

最外層：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 論壇

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 私有
獨立頁面所使用的樣式文件，頁面中必須包含

詳細的聲明順序可以參考此文章

位置屬性(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規范命名大全集合

css命名規則【豆瓣小組】

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

團隊規范文檔【騰訊alloyteam前端團隊】

css編碼規范【百度fex前端團隊】

nec規范【網易前端團隊】

精簡高效的CSS命名準則/方法【張鑫旭】

無廢話網頁重構系列【大象】