【規范】前端編碼規范——css 規范

編碼

在 css 首行設置文件編碼為 UTF-8。

@charset "UTF-8";

class 命名

class 名稱應當盡可能短，並且意義明確。使用有意義的名稱，使用有組織的或目的明確的名稱，不要使用表現形式的名稱。

不推薦

fw-800 {font-weight:800;}
.red {color:red;}

推薦

.heavy {font-weight:800;}
.important {color:red;}

使用中划線（-）分隔 class 中的單詞。雖然它很不方便的讓你雙擊選擇，但是它可以增強理解性。另外屬性選擇器 [attribute|=value] 也能識別中划線（-），所以最好堅持使用中划線作為分隔符。

不推薦

.slide_hd {}
.slide_bd {}

推薦

.slide-hd {}
.slide-bd {}

基於最近的父 class 或基本 class 作為新 class 的前綴。

不推薦

.header .logo {}
.header .banner {}

推薦

.header-logo {}
.header-banner {}

使用 .js-* 的 class 來標識行為（與樣式相對），並且不要將這些 class 寫有任何的樣式。

減少選擇器的嵌套

在寫選擇器時，要盡可能的減少嵌套層級，一般 2~3 層，不要超過 4 層。

不推薦

.main ul li a span {}

推薦

.main span {}

優化選擇器

當構建選擇器時應該使用清晰，准確和有語義的 class 名。盡量減少使用標簽選擇器。如果你只關心你的 class 名，而不是你的代碼元素，這樣會更容易維護。

不推薦

div.content > header.content-header > h2.title {
    font-size: 2em;
}

推薦

.content > .content-header > .title {
    font-size: 2em;
}

屬性簡寫

css 提供了各種簡寫屬性（font、background 等等），使用簡寫屬性對於代碼效率和可讀性是有很有用的。

不推薦

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2px;
padding-left: 1px;
padding-right: 1px;
padding-top: 0;

推薦

border-top: none;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1px 2px;

但是不能濫用簡寫形式，過度使用簡寫形式的屬性聲明會導致代碼混亂，並且會對屬性值帶來不必要的覆蓋從而引起意外的副作用。

不推薦

width:100px;
margin:0 auto;

推薦

width:100px;
margin-right:auto;
margin-left:auto;

省略 0 后面的單位

不要在 0 值后面使用單位。

不推薦

padding-bottom: 0px;
margin: 0em;

推薦

padding-bottom: 0;
margin: 0;

使用 16 進制表示顏色值

css 中的顏色值可以使用 16 進制來表示，在可能的情況下，可以進行縮寫，比如：#fff、#000。

hack 的使用

雖然 hacks 能夠很方便的解決瀏覽器之間的兼容問題，但是我們還是不要使用 hacks，盡量從根本上解決問題，比如改變結構等等。

聲明順序

為了保證更好的可讀性，我們應該遵循以下順序：

1. 定位：position | z-index | top | right | bottom | left | clip
2. 布局：display | float | clear | visibility | overflow | overflow-x | overflow-y
3. 尺寸：width | min-width | max-width | height | min-height | max-height
4. 外邊距：margin | margin-top | margin-right | margin-bottom | margin-left
5. 內邊距：padding | padding-top | padding-right | padding-bottom | padding-left
6. 邊框：border | border-top | border-right | border-bottom | border-left | border-radius | box-shadow | border-image
7. 背景：background | background-color | background-image | background-repeat | background-attachment | background-position | background-origin | background-clip | background-size
8. 顏色：color | opacity
9. 字體：font | font-style | font-variant | font-weight | font-size | font-family
10. 文本：text-transform | white-space | word-break | word-wrap | overflow-wrap | text-align | word-spacing | letter-spacing | text-indent | vertical-align | line-height
11. 文本修飾：text-decoration | text-shadow
12. 書寫模式：direction | unicode-bidi | writing-mode
13. 列表：list-style | list-style-image | list-style-position | list-style-type
14. 表格：table-layout | border-collapse | border-spacing | caption-side | empty-cells
15. 內容：content | counter-increment | counter-reset | quotes
16. 用戶界面：appearance | text-overflow | outline | outline-width | outline-color | outline-style | outline-offset | cursor | zoom | box-sizing | resize | user-select
17. 多列：columns | column-width | column-count | column-gap | column-rule | column-rule-width| column-rule-style | column-rule-color | column-span | column-fill | column-break-before | column-break-after | column-break-inside
18. 伸縮盒：flex
19. 變換，過渡，動畫：transform | transition | animation

媒體查詢的位置

將媒體查詢放在盡可能相關規則的附近。不要將他們打包放在一個單一樣式文件中或者放在文檔底部。如果你把他們分開了，將來只會被大家遺忘。

推薦

.element {}
.element-avatar {}
.element-selected {}

@media (min-width: 480px) {
    .element {}
    .element-avatar {}
    .element-selected {}
}

帶前綴的屬性

當使用特定廠商的帶有前綴的屬性時，通過縮進的方式，讓每個屬性的值在垂直方向對齊，這樣便於多行編輯。

.selector {
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
            box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

引號

屬性選擇器或屬性值用雙引號（""），而不是單引號（''）括起來。url 的值不要使用引號。

不推薦

import url('//cdn.com/foundation.css');
input[type='submit'] {
    font-family: 'open sans', arial, sans-serif;
}
body:after {
    content: 'pause';
}

推薦

@import url(//cdn.com/foundation.css);
input[type="submit"] {
    font-family: "open sans", arial, sans-serif;
}
body:after {
    content: "pause";
}

聲明結束

為了保證一致性和可擴展性，每個聲明應該用分號結束。

不推薦

.demo {
    width:100px;
    height:100px
}

推薦

.demo {
    width:100px;
    height:100px;
}

多行規則聲明

為了易讀性和便於快速編輯，統一將語句分為多行，即使該樣式只包含一條聲明。

不推薦

.demo {width:100px;height:100px;}

推薦

.demo {
    width:100px;
    height:100px;
}

中文字體引用

css 中文字體可以用 unicode 格式來表示，比如“宋體”可以用 \5B8B\4F53 來表示。具體參考下表：

中文	英文名	unicode
宋體	SimSun	\5B8B\4F53
微軟雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1

更多字體點擊查看。

對於 sass 的嵌套

在 sass 中你可以嵌套選擇器，這可以使代碼變得更清潔和可讀。嵌套所有的選擇器，但盡量避免嵌套沒有任何內容的選擇器。

如果你需要指定一些子元素的樣式屬性，而父元素將不什么樣式屬性，可以使用常規的 css 選擇器鏈，這將防止您的腳本看起來過於復雜。

不推薦

.content {
    display: block;
}
 
.content > .news-article > .title {
    font-size: 1.2em;
}

推薦

.content {
    display: block;
    > .news-article > .title {
      font-size: 1.2em;
    }
}

當使用 sass 的嵌套功能的時候，重要的是有一個明確的嵌套順序。

1. 當前選擇器的 @extend 和 @include
2. 當前選擇器的樣式屬性
3. 父級選擇器的偽類選擇器（:first-letter，:hover，:active 等等）
4. 偽類元素（:before 和 :after）
5. 父級選擇器的聲明樣式（.selected，.active 等等）
6. 用 sass 的上下文媒體查詢
7. 子選擇器作為最后的部分

.test {
    @extend %clearfix;
    color:#ccc;
    &:hover {
        color:#000;
    }
    &:before {
        border:1px solid #eee;
        content:"";
    }
    &.active {
        color:#f00;
        &:hover {
            color:#ff0;
        }
    }
    @media screen and (max-width: 640px) {
        display:block;
        font-size:2em;
    }
    > .title {
        font-size:1.2em;
    }
}

參考文獻

• Web Styleguide - Style guide to harmonize HTML, Javascript and CSS / Sass coding style
• http://www.css88.com/archives/5505