【規範】前端編碼規範——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，儘可能從根本上解決問題，好比改變結構等等。
聲明順序 爲了保證更好的可讀性，咱們應該遵循如下順序：
定位：

position

 | 

z-index

 | 

top

 | 

right

 | 

bottom

 | 

left

 | 

clip

佈局：

display

 | 

float

 | 

clear

 | 

visibility

 | 

overflow

 | 

overflow-x

 | 

overflow-y

尺寸：

width

 | 

min-width

 | 

max-width

 | 

height

 | 

min-height

 | 

max-height

外邊距：

margin

 | 

margin-top

 | 

margin-right

 | 

margin-bottom

 | 

margin-left

內邊距：

padding

 | 

padding-top

 | 

padding-right

 | 

padding-bottom

 | 

padding-left

邊框：

border

 | 

border-top

 | 

border-right

 | 

border-bottom

 | 

border-left

 | 

border-radius

 | 

box-shadow

 | 

border-image

背景：

background

 | 

background-color

 | 

background-image

 | 

background-repeat

 | 

background-attachment

 | 

background-position

 | 

background-origin

 | 

background-clip

 | 

background-size

顏色：

color

 | 

opacity

字體：

font

 | 

font-style

 | 

font-variant

 | 

font-weight

 | 

font-size

 | 

font-family

文本：

text-transform

 | 

white-space

 | 

word-break

 | 

word-wrap

 | 

overflow-wrap

 | 

text-align

 | 

word-spacing

 | 

letter-spacing

 | 

text-indent

 | 

vertical-align

 | 

line-height

文本修飾：

text-decoration

 | 

text-shadow

書寫模式：

direction

 | 

unicode-bidi

 | 

writing-mode

列表：

list-style

 | 

list-style-image

 | 

list-style-position

 | 

list-style-type

表格：

table-layout

 | 

border-collapse

 | 

border-spacing

 | 

caption-side

 | 

empty-cells

內容：

content

 | 

counter-increment

 | 

counter-reset

 | 

quotes

用戶界面：

appearance

 | 

text-overflow

 | 

outline

 | 

outline-width

 | 

outline-color

 | 

outline-style

 | 

outline-offset

 | 

cursor

 | 

zoom

 | 

box-sizing

 | 

resize

 | 

user-select

多列：

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

伸縮盒：

flex

變換，過渡，動畫：

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 5B8B4F53 微軟雅黑 Microsoft YaHei 5FAE8F6F96C59ED1 更多字體點擊查看。
對於 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 的嵌套功能的時候，重要的是有一個明確的嵌套順序。
當前選擇器的 

@extend

 和 

@include

當前選擇器的樣式屬性
父級選擇器的僞類選擇器（

:first-letter

，

:hover

，

:active

 等等）
僞類元素（

:before

 和 

:after

）
父級選擇器的聲明樣式（

.selected

，

.active

 等等）
用 sass 的上下文媒體查詢
子選擇器做爲最後的部分

.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...
轉載於猿2048:➻《【規範】前端編碼規範——css 規範》