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

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

所有的命名最好都小寫(xiě)

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

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

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

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

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

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

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

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

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

bad

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

good

  .mian-title {
    color: #e3c;
  }

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

font-size: 0.8em;

good

font-size: .8em;

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

color: #eebbcc;

good

color: #ebc;

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

  .withdrawal {
    background-color: #ccc;
  }

good

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

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

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

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

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

詳細(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;
  }

此文我參考了如下作者寫(xiě)的文章，在此特別提出感謝，如果你在閱讀我寫(xiě)的文章中有任何問(wèn)題可以查閱如下鏈接：

DIV+CSS規(guī)范命名大全集合

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

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

團(tuán)隊(duì)規(guī)范文檔【騰訊alloyteam前端團(tuán)隊(duì)】

css編碼規(guī)范【百度f(wàn)ex前端團(tuán)隊(duì)】

nec規(guī)范【網(wǎng)易前端團(tuán)隊(duì)】

精簡(jiǎn)高效的CSS命名準(zhǔn)則/方法【張?chǎng)涡瘛?/p>

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