作者：Philip大魔王
這篇規(guī)范不止用于小程序和vue開發(fā)糕珊，其他開發(fā)均適用。
項(xiàng)目開始時(shí)除了端口毅糟、架構(gòu)等規(guī)范红选，命名規(guī)范也非常重要，css雖然很少有人會(huì)回頭詳細(xì)閱讀（更多人是在前輩的遺產(chǎn)下覆蓋上去留特，而不是大量修改）纠脾，但規(guī)范的命名非常有利于查找和理解，特別是層級(jí)問題蜕青。
我個(gè)人書寫喜好是，布局名-功能名-元素糊渊，比如 .nav-search-btn 但有時(shí)候頁面會(huì)很復(fù)雜右核，而且某些還不能復(fù)用，那我建議是不要省渺绒，名字寫長點(diǎn)贺喝，這樣下次看到你會(huì)非常清晰對應(yīng)位置，比如 .main-left-nav-search-btn-top-icon （主界面 => 左側(cè) => 導(dǎo)航欄 => 搜索欄 => 按鈕 => 上面 => 圖標(biāo)標(biāo)簽）這個(gè)名字很長宗兼，但你很輕易地從外到里知道它描述什么位置躏鱼，什么功能，而越長的名字殷绍，也說明復(fù)用性越差染苛，越需要知道具體位置。
1）First of all：
搞清楚html布局構(gòu)成主到，有利于html書寫和css命名
外套 wrap ------------------用于最外層
頭部 header ----------------用于頭部
主要內(nèi)容 main ------------用于主體內(nèi)容（中部）
左側(cè) main-left -------------左側(cè)布局
右側(cè) main-right -----------右側(cè)布局
導(dǎo)航條 nav -----------------網(wǎng)頁菜單導(dǎo)航條
內(nèi)容 content ---------------用于網(wǎng)頁中部主體
底部 footer -----------------用于底部
當(dāng)然茶行，也可以有其他的布局命名，比如（nav登钥、aside畔师、section等），可根據(jù)頁面布局來定義牧牢。比如上中下三個(gè)模塊看锉，那你可能只需用到header姿锭、main（或者叫content）、footer伯铣。
2）Secondly：
如果結(jié)構(gòu)非常清晰呻此，你看到這里可能已經(jīng)能命名了，但有些情況會(huì)很難過懂傀，內(nèi)容是你中有我趾诗，我中有你，這時(shí)候就可以引入一些特征名稱蹬蚁，比如male恃泪、female，這樣在對應(yīng)模塊犀斋，就能輕易分開贝乎，特別是在js內(nèi)應(yīng)用css名稱時(shí)，會(huì)好受一點(diǎn)叽粹。
比如览效，一個(gè)div內(nèi)多個(gè)text分別寫入男人和女人的信息
<div class="main">
? ? <div class="main-male main-person-hardware">男人的身高</div>
????<div class="main-female main-person-hardware">女人的體重</div>
????<div class="main-male main-person-software">男人的財(cái)產(chǎn)</div>
? ??<div class="main-female main-person-software">女人的美顏相機(jī)</div>
? ? <div class="main-house">大房子</div>
</div>
作者：Philip大魔王
之所以會(huì)出現(xiàn) .main-person-hardware ，因?yàn)橛胮erson區(qū)分人和物虫几，為后續(xù)使用提供更多便利锤灿，當(dāng)然，如果沒有更多信息辆脸，名字就可以寫為 .main-figure （體型）但校。
3）Then：
還有一些小規(guī)范：
1）css中一般都用英文小寫
2）不要用拼音，不懂的可以查翻譯
3）別過度使用縮寫啡氢，除非一看就懂的状囱，另可長，也不要讓人看不懂
4）一般使用 “-” 倘是，但也有情況使用“_”的
5）命名很長是可以接受的亭枷，看不懂命名是要挨批的
這里有一個(gè)google首頁的css命名給大家感受一下
id="gws-output-pages-elements-homepage_additional_languages__als"
4）Finally：
最后，留一些常見的命名
文件命名：
主要的 master.css?
布局搀崭，版面 layout.css?
專欄 columns.css?
文字 font.css?
打印樣式 print.css?
主題 themes.css
習(xí)慣命名（已無法知道該圖作者叨粘，但仍要隔空感謝）：
