開發規矩 —— css命名規範
作者：Philip大魔王
這篇規範不止用於小程式和vue開發，其他開發均適用。
專案開始時除了埠、架構等規範，命名規範也非常重要，css雖然很少有人會回頭詳細閱讀（更多人是在前輩的遺產下覆蓋上去，而不是大量修改），但規範的命名非常有利於查詢和理解，特別是層級問題。
我個人書寫喜好是，佈局名-功能名-元素，比如 .nav-search-btn 但有時候頁面會很複雜，而且某些還不能複用，那我建議是不要省，名字寫長點，這樣下次看到你會非常清晰對應位置，比如 .main-left-nav-search-btn-top-icon （主介面 => 左側 => 導航欄 => 搜尋欄 => 按鈕 => 上面 => 圖示標籤）這個名字很長，但你很輕易地從外到裡知道它描述什麼位置，什麼功能，而越長的名字，也說明覆用性越差，越需要知道具體位置。
1）First of all：
搞清楚html佈局構成，有利於html書寫和css命名
外套 wrap ------------------用於最外層
頭部 header ----------------用於頭部
主要內容 main ------------用於主體內容（中部）
左側 main-left -------------左側佈局
右側 main-right -----------右側佈局
導航條 nav -----------------網頁選單導航條
內容 content ---------------用於網頁中部主體
底部 footer -----------------用於底部
當然，也可以有其他的佈局命名，比如（nav、aside、section等），可根據頁面佈局來定義。比如上中下三個模組，那你可能只需用到header、main（或者叫content）、footer。
2）Secondly：
如果結構非常清晰，你看到這裡可能已經能命名了，但有些情況會很難過，內容是你中有我，我中有你，這時候就可以引入一些特徵名稱，比如male、female，這樣在對應模組，就能輕易分開，特別是在js內應用css名稱時，會好受一點。
比如，一個div內多個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 ">男人的財產</div>
<div class="main-female main-person-software ">女人的美顏相機</div>
<div class="main-house">大房子</div>
</div>
作者：Philip大魔王
之所以會出現 .main-person-hardware ，因為用person區分人和物，為後續使用提供更多便利，當然，如果沒有更多資訊，名字就可以寫為 .main-figure （體型）。
3）Then：
還有一些小規範：
1）css中一般都用英文小寫
2）不要用拼音，不懂的可以查翻譯
3）別過度使用縮寫，除非一看就懂的，另可長，也不要讓人看不懂
4）一般使用 “-” ，但也有情況使用“_”的
5）命名很長是可以接受的，看不懂命名是要挨批的
這裡有一個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
習慣命名（已無法知道該圖作者，但仍要隔空感謝）：
