雖然很久之前整理過一份簡單的CSS規範，但是當時寫的也不是很全面，有些細節也沒有照顧到。記錄一份較詳細的版本，以備不時之需。

命名規範

1. 【強制】 class一律使用小寫字母+下劃線格式命名 例： class="class_name"
2. 【強制】 id一律使用駝峰命名法 例： id="idName"
3. 【建議】 命名盡量使用英文命名，拼音也可以使用但盡量使用簡稱+英文的形式。

書寫規範

【強制】屬性值前加一個空格

.main{
     margin: 0;   
}

【強制】>、+、~ 選擇器的兩邊各保留一個空格。

/* good */
.main > nav + div ~ input 
 
{
    padding: 10px;
    margin-left: 5px;
}

/* bad */
.main>nav+div~input {
    padding: 10px;
    margin-left: 5px;
}

【建議】 盡量減少選擇器的層級，最好不要超過四級

【建議】 屬性應該按照特定的順序出現以保證易讀性 推薦順序：class ，id ，name ，data-* ，src, for, type, href, value , max-length, max, min, pattern ，placeholder, title, alt ，required, readonly, disabled

class是為高可復用組件設計的，所以應處在第一位； id更加具體且應該盡量少使用，所以將它放在第二位。

【強制】樣式中長度為0的須省略單位

/* good */
body {
    padding: 0 5px;
}

/* bad */
body {
    padding: 0px 5px;
}

【建議】 顏色色值盡量使用小寫，相同色值不要出現大小寫都存在的情況 。如不小寫也需要保證同一項目內保持大小寫一致

/* very good */
.success {
    background-color: #aca;
    color: #90ee90;
}

/* good */
.success 
 
{
    background-color: #ACA;
    color: #90EE90;
}

/* bad */
.success {
    background-color: #ACA;
    color: #90ee90;
}

【強制】 font-family 屬性中的字體名稱應使用字體的英文

常用字體對應family name:宋體（SimSun）、黑體（SimHei）、微軟雅黑（Microsoft YaHei）

【強制】 盡量增加樣式的復用性，多次使用的樣式寫成通用class

.left{
    float: left;
}

.right{
    float: right;
}

【強制】如果多個class的樣式大部分重復，只有個別樣式不同，可以把重復樣式獨立出來。

/* good */
.container .list .quan,.container .list .friend {
    display: inline-block;
    width: 4.5rem;
    height: 4.5rem;
    background-size: 4.5rem auto;
}
.container .list .quan{
    background-position: 0 0;
}
.container .list .friend{
    background-position: 0 -4.5rem;
}

/* bad */
.container .list .quan{
    display: inline-block;
    width: 4.5rem;
    height: 4.5rem;
    background-size: 4.5rem auto;
    background-position: 0 0;
}
.container .list .friend{
    display: inline-block;
    width: 4.5rem;
    height: 4.5rem;
    background-size: 4.5rem auto;
    background-position: 0 -4.5rem;
}

CSS開發規範