CSS Guide
CSS編碼風(fēng)格指南仔燕。
文檔目錄
1 命名規(guī)范
該命名規(guī)范主要解決以下問題：
- 從類名可以清晰區(qū)分出其功能作用变泄，使頁面結(jié)構(gòu)清晰【命名空間勉失、標(biāo)識符】；
- 以組件障陶、模塊的思想去寫一個區(qū)塊的結(jié)構(gòu)形真，強(qiáng)化結(jié)構(gòu)的模塊化【BEM模塊思想】；
- 減少多人合作大咱、項(xiàng)目耦合等情況下的命名沖突【命名空間】；
1.1 命名思想
項(xiàng)目如果沒使用樣式局部作用域框架（如vue）注益，則使用BEM命名規(guī)則碴巾。
【強(qiáng)制】 區(qū)塊、模塊丑搔、組件等一個整個的結(jié)構(gòu)遵循BEM命名思想厦瓢；
當(dāng)你能確定組件內(nèi)最后一級的結(jié)構(gòu)不會再發(fā)生變化時(shí)，最后一級可省略類名啤月，使用兩層嵌套旷痕；
-
.block代表了更高級別的抽象或組件； -
.block__element代表.block的后代顽冶，用于形成一個完整的.block的整體欺抗； -
.is-|.has-|.ext-代表.block的修飾符，不使用雙中劃線--强重。
相關(guān)鏈接：
1.2 多單詞連接
【強(qiáng)制】 用中劃線連接多個單詞绞呈，例如：news-list；
1.3 命名空間
【推薦】 在合適的地方使用命名空間间景；
-
狀態(tài)：以
is為命名空間佃声，表示動態(tài)的、具有交互性質(zhì)的狀態(tài)倘要，例如：.is-open圾亏、.is-active、.is-selected等封拧； -
組件：以
ui或者mod為命名空間志鹃，表示可復(fù)用、移植的組件模塊泽西，例如：.ui-slider曹铃、.mod-drop-menu等； -
擴(kuò)展：以
ext為命名空間捧杉，表示對組件基類的視覺形態(tài)的擴(kuò)展陕见，例如：.ext-cover等；
1.4 區(qū)塊命名
【推薦】 一般區(qū)塊都可以劃分為頭部味抖、身體和尾部评甜，因此建議給你的區(qū)塊分別以 hd、bd仔涩、ft來劃分忍坷；
示例：
.ui-card__hd {
margin: 0;
}
.ui-card__bd {
margin: 0;
}
.ui-card__ft {
margin: 0;
}
附：命名示例
[圖片上傳失敗...(image-bcddcf-1608025153993)]
2 代碼風(fēng)格
2.1 縮進(jìn)
【強(qiáng)制】 使用 2 個空格做為一個縮進(jìn)層級，不允許使用 4 個空格 或 tab 字符；
示例：
/* Not so great */
.selector {
margin: 0;
}
/* Better */
.selector {
margin: 0;
}
2.2 空格
【強(qiáng)制】 選擇器 與 {之間必須包含空格承匣；
示例：
/* Not so great */
.selector{
}
/* Better */
.selector {
}
【強(qiáng)制】 >蓖乘、+、~ 選擇器的兩邊各保留一個空格;
示例：
/* Not so great */
main>nav {
padding: 10px;
}
label+input {
margin-left: 5px;
}
input:checked~button {
background-color: #69C;
}
/* Better */
main > nav {
padding: 10px;
}
label + input {
margin-left: 5px;
}
input:checked ~ button {
background-color: #69C;
}
【強(qiáng)制】 屬性名 與之后的 : 之間不允許包含空格韧骗， :與 屬性值 之間必須包含空格嘉抒；
示例：
/* Not so great */
margin :0;
/* Better */
margin: 0;
【強(qiáng)制】 列表型屬性值 書寫在單行時(shí)，,后必須跟一個空格袍暴；
示例：
/* Not so great */
font-family: Arial,sans-serif;
box-shadow: 0 0 2px rgba(0,128,0,.3);
/* Better */
font-family: Arial, sans-serif;
box-shadow: 0 0 2px rgba(0, 128, 0, .3);
2.3 選擇器
【強(qiáng)制】 當(dāng)一個 rule 包含多個 selector 時(shí)些侍，每個選擇器聲明必須獨(dú)占一行；
示例：
/* Not so great */
.post, .page, .comment {
line-height: 1.5;
}
/* Better */
.post,
.page,
.comment {
line-height: 1.5;
}
2.4 屬性
【強(qiáng)制】 屬性定義必須另起一行政模；
示例：
/* Not so great */
.selector { margin: 0; padding: 0;}
/* Better */
.selector {
margin: 0;
padding: 0;
}
【強(qiáng)制】 屬性定義后必須以分號結(jié)尾岗宣；
示例：
/* Not so great */
.selector {
margin: 0
}
/* Better */
.selector {
margin: 0;
}
3. 通用
3.1 選擇器
【強(qiáng)制】 如無必要，不得為id淋样、class選擇器添加 類型選擇器 進(jìn)行限定耗式；
在性能和維護(hù)性上，都有一定的影響趁猴。
示例：
/* Not so great */
dialog#error,
p.danger-message {
font-color: #c00;
}
/* Better */
#error,
.danger-message {
font-color: #c00;
}
【建議】 選擇器的嵌套層級應(yīng)該不大于 3 級刊咳，位置靠后的限定條件應(yīng)可能精確；
在性能和維護(hù)性上儡司，都有一定的影響娱挨。
示例：
/* Not so great */
.comment ul li a span {}
#top-hero .hero-avatar li.avatar .pic em {}
/* Better */
.comment .date {}
#top-hero .pic em {}
3.2 屬性
3.2.1 屬性書寫順序
【建議】 同一 rule set 下的屬性在書寫時(shí)，應(yīng)按功能進(jìn)行分組捕犬，并以 Formatting Model > Box Model > Typographic > Visual 的順序書寫跷坝，以提高代碼的可讀性。
- Positioning Model 布局方式碉碉、位置柴钻；相關(guān)屬性包括：
position / top / right / bottom / left / z-index / display / float / ... - Box model 盒模型；相關(guān)屬性包括：
width / height / padding / margin / border / overflow / ... - Typographic 文本排版誉裆；相關(guān)屬性包括：
font / line-height / text-align / word-wrap / ... - Visual 視覺外觀顿颅；相關(guān)屬性包括：
color / background / list-style / transform / animation / transition / ... - 如果包含 content 屬性缸濒，應(yīng)放在最前面足丢；
Positioning 處在第一位，因?yàn)樗梢允挂粋€元素脫離正常文本流庇配，并且覆蓋盒模型相關(guān)的樣式斩跌。盒模型緊跟其后，因?yàn)樗麤Q定了一個組件的大小和位置捞慌。其他屬性只在組件 內(nèi)部 起作用或者不會對前面兩種情況的結(jié)果產(chǎn)生影響耀鸦，所以他們排在后面。
詳情資料 Twitter的strictPropertyOrder
3.2.2 屬性引號
【強(qiáng)制】 屬性選擇器中的值必須用雙引號包圍。不允許使用單引號袖订，不允許不使用引號氮帐。
示例：
/* Not so great */
article[character='juliet'] {
voice-family: "Vivien Leigh", victoria, female
}
/* Better */
article[character="juliet"] {
voice-family: "Vivien Leigh", victoria, female
}
3.2.3 屬性簡寫
簡寫形式可以在一定程度上壓縮樣式，但并不意味著你可以對所有可以簡寫的屬性聲明都使用簡寫洛姑。過度使用簡寫形式的屬性聲明會導(dǎo)致代碼混亂上沐，會對屬性值帶來不必要的覆蓋從而引起意外的副作用，并且不能充分利用CSS的繼承楞艾。常見的濫用簡寫屬性聲明的情況如下：
paddingmarginfontbackgroundborderborder-radius
如果你只需定義其中的一兩個屬性参咙，而不是全部，盡量分開來寫：
/* Better */
.selector {
margin-bottom: 10px;
background-color: red;
background-image: url(image.jpg);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
/* Not so great */
.selector {
margin: 0 0 10px;
background: red;
background: url(image.jpg);
border-radius: 3px 3px 0 0;
}
4 值與單位
4.1 文本
【強(qiáng)制】 文本內(nèi)容必須用雙引號包圍硫眯，不允許使用單引號蕴侧；
文本類型的內(nèi)容可能在選擇器、屬性值等內(nèi)容中两入。
示例：
/* Not so great */
html[lang|=zh] q:before {
font-family: 'Microsoft YaHei', sans-serif;
content: '“';
}
/* Better */
html[lang|="zh"] q:after {
font-family: "Microsoft YaHei", sans-serif;
content: "“";
}
4.2 數(shù)值
【強(qiáng)制】 當(dāng)數(shù)值為 0 - 1 之間的小數(shù)時(shí)净宵，省略整數(shù)部分的 0；
示例：
/* Not so great */
.selector {
opacity: 0.8;
}
/* Better */
.selector {
opacity: .8;
}
4.3 長度
【強(qiáng)制】 長度為 0 時(shí)須省略單位 (也只有長度單位可省)裹纳；
示例：
/* Not so great */
.selector {
margin: 0px 10px;
}
/* Better */
.selector {
margin: 0 10px;
}
4.4 url()
【強(qiáng)制】 url() 函數(shù)中的路徑不加引號塘娶；
示例：
/* Not so great */
.selector {
background: url("bg.png");
}
/* Better */
.selector {
background: url(bg.png);
}
4.5 顏色
【強(qiáng)制】 RGB顏色值必須使用十六進(jìn)制記號形式 #rrggbb，不允許使用 rgb()痊夭，帶有alpha的顏色信息可以使用 rgba()刁岸；顏色值不允許使用命名色值；
示例：
/* Not so great */
.selector {
box-shadow: 0 0 2px rgba(0,128,0,.3);
border-color: rgb(0, 128, 0);
color: gray;
}
/* Better */
.selector {
box-shadow: 0 0 2px rgba(0, 128, 0, .3);
border-color: #008000;
color: #999;
}
【建議】 顏色值中的英文字符采用小寫她我，至少要保證同一項(xiàng)目內(nèi)一致虹曙；
示例：
/* Not so great */
.selector {
color: #0073AA;
}
/* Better */
.selector {
color: #0073aa;
}
4.6 2D位置
【強(qiáng)制】 必須同時(shí)給出水平和垂直方向的位置；
2D 位置初始值為 0% 0%番舆，但在只有一個方向的值時(shí)酝碳，另一個方向的值會被解析為 center。為避免理解上的困擾，應(yīng)同時(shí)給出兩個方向的值济炎。 background-position屬性值的定義
示例：
/* Not so great */
.selector {
background-position: top; /* 50% 0% */
}
/* Better */
.selector {
background-position: center top; /* 50% 0% */
}
5. 文本排版
5.1 字體族
【強(qiáng)制】 font-family 屬性中的字體族名稱應(yīng)使用字體的英文 Family Name若未，其中如有空格，須放置在引號中返奉；
常見的字體族名稱如下：
| 字體 | 操作系統(tǒng) | Family Name |
|---|---|---|
| 宋體 (中易宋體) | Windows | SimSun |
| 黑體 (中易黑體) | Windows | SimHei |
| 微軟雅黑 | Windows | Microsoft YaHei |
| 微軟正黑 | Windows | Microsoft JhengHei |
| 華文黑體 | Mac/iOS | STHeiti |
| 冬青黑體 | Mac/iOS | Hiragino Sans GB |
| 文泉驛正黑 | Linux | WenQuanYi Zen Hei |
| 文泉驛微米黑 | Linux | WenQuanYi Micro Hei |
【強(qiáng)制】 font-family 應(yīng)當(dāng)遵循以下順序：
- 西文字體在前，中文字體在后吗氏；
- 效果佳 (質(zhì)量高/更能滿足需求) 的字體在前芽偏，效果一般的字體在后的順序編寫；
- 最后必須指定一個通用字體族( serif / sans-serif )弦讽；
詳細(xì)說明可參考 如何保證網(wǎng)頁的字體在各平臺都盡量顯示為最高質(zhì)量的黑體污尉？
【強(qiáng)制】 font-family 不區(qū)分大小寫，但在同一個項(xiàng)目中，同樣的 Family Name 大小寫必須統(tǒng)一被碗；
示例：
/* Not so great */
body {
font-family: arial, sans-serif;
}
h1 {
font-family: Arial, "Microsoft YaHei", sans-serif;
}
/* Better */
body {
font-family: Arial, sans-serif;
}
h1 {
font-family: Arial, "Microsoft YaHei", sans-serif;
}
5.2 字重
【強(qiáng)制】 font-weight 屬性必須使用數(shù)值方式描述某宪；
CSS 的字重分 100 – 900 共九檔，但目前受字體本身質(zhì)量和瀏覽器的限制锐朴，實(shí)際上支持 400 和 700 兩檔缩抡，分別等價(jià)于關(guān)鍵詞 normal 和 bold。
瀏覽器本身使用一系列啟發(fā)式規(guī)則來進(jìn)行匹配包颁，在 >700 時(shí)一般匹配字體的 Regular 字重瞻想，>=700 時(shí)匹配 Bold 字重。
但已有瀏覽器開始支持 =600 時(shí)匹配 Semibold 字重 (見此表)娩嚼，故使用數(shù)值描述增加了靈活性蘑险，也更簡短。
示例：
/* Not so great */
.selector {
font-weight: bold;
}
/* Better */
.selector {
font-weight: 700;
}
6 變換與動畫
【強(qiáng)制】 使用 transition 定義屬性時(shí)應(yīng)遵循以下順序：
-
[ transition-property ]：檢索或設(shè)置對象中的參與過渡的屬性岳悟； -
[ transition-duration ]：檢索或設(shè)置對象過渡的持續(xù)時(shí)間佃迄； -
[ transition-timing-function ]：檢索或設(shè)置對象中過渡的動畫類型； -
[ transition-delay ]：檢索或設(shè)置對象延遲過渡的時(shí)間贵少；
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
如果順序錯亂呵俏，在某些安卓瀏覽器上會讓動畫失效。
示例：
/* Not so great */
.selector {
transition: color .2s 0 ease-in;
}
/* Better */
.selector {
transition: color .2s ease-in 0;
}
【建議】 盡可能在瀏覽器能高效實(shí)現(xiàn)的屬性上添加過渡和動畫：
在可能的情況下應(yīng)選擇這樣四種變換：
transform: translate(npx, npx);transform: scale(n);transform: rotate(ndeg);opacity: 0..1;
詳見 High Performance Animations
7 媒體查詢
【強(qiáng)制】 Media Query 不得單獨(dú)編排滔灶，必須與相關(guān)的規(guī)則一起定義普碎；
不要將他們一起放到一個獨(dú)立的樣式文件中，或者丟在文檔的最底部录平，這樣做只會讓大家以后更容易忘記他們麻车。
示例：
/* Not so great */
/* header styles */
/* main styles */
/* footer styles */
@media (...) {
/* header styles */
/* main styles */
/* footer styles */
}
/* Better */
/* header styles */
@media (...) {
/* header styles */
}
/* main styles */
@media (...) {
/* main styles */
}
/* footer styles */
@media (...) {
/* footer styles */
}
8 兼容性
8.1 屬性前綴
【強(qiáng)制】 帶私有前綴的屬性由長到短排列，按冒號位置對齊斗这；
標(biāo)準(zhǔn)屬性放在最后动猬，按冒號對齊方便閱讀與編輯。
示例：
/* Not so great */
.selector {
transition: color .2s ease-in 0;
-webkit-transition: color .2s ease-in 0;
-moz-transition: color .2s ease-in 0;
}
/* Better */
.selector {
-webkit-transition: color .2s ease-in 0;
-moz-transition: color .2s ease-in 0;
transition: color .2s ease-in 0;
}
8.2 hack
【建議】 如果有其他解決方案表箭，請不要使用hack赁咙；
9 代碼注釋
代碼是由人編寫并維護(hù)的。請確保你的代碼能夠自描述免钻、注釋良好并且易于他人理解彼水。好的代碼注釋能夠傳達(dá)上下文關(guān)系和代碼目的。不要簡單地重申組件或 class 名稱伯襟。
9.1 單行注釋
【強(qiáng)制】 星號與內(nèi)容之間必須保留一個空格猿涨；
示例：
/* 新聞中心表格隔行變色 */
9.2 多行注釋
【強(qiáng)制】 星號要一列對齊，星號與內(nèi)容之間必須保留一個空格姆怪；
示例：
/**
* Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
*/
9.3 文件注釋
【強(qiáng)制】 文件頂部必須包含文件注釋，用 @file 標(biāo)識文件說明。星號要一列對齊稽揭，星號與內(nèi)容之間必須保留一個空格俺附，標(biāo)識符冒號與內(nèi)容之間必須保留一個空格；
/**
* @file: 文件概要描述
* @author: author-name(mail-name@domain.com)
* author-name2(mail-name2@domain.com)
* @update: 2015-04-29 00:02:45
*/
-
@update為可選項(xiàng)溪掀，建議每次改動都更新一下事镣； - 當(dāng)該業(yè)務(wù)項(xiàng)目主要由固定的一個或多個人負(fù)責(zé)時(shí)，需要添加
@author標(biāo)識揪胃，一方面是尊重勞動成果璃哟，另一方面方便在需要時(shí)快速定位責(zé)任人；
參考資料：
