技術學派：CSS規范總結

SS樣式的權值(權重)

權值等級的定義

第一等：代表內聯樣式，如: style=””，權值為1000。

第二等：代表ID選擇器，如：#content，權值為100。

第三等：代表類，偽類和屬性選擇器，如.content，權值為10。

第四等：代表類型選擇器和偽元素選擇器，如div p，權值為1。

Ps:通用選擇器（*），子選擇器（>）和相鄰同胞選擇器（+）并不在這四個等級中，所以他們的權值都為0，!important 優先級最高，萬不得已的情況下才用。

權重計算

 #content div#main-content h2=2*100+2*1=202
 #content #main-content>h2=2*100+1=201
 body #content div[id="main-content"] h2=1*100+1*10+3*1=113
 #main-content div.paragraph h2=1*100+1*10+2*1=112
 #main-content [class="paragraph"] h2=1*100+1*10+1*1=111
 div#main-content div.paragraph h2.first=1*100+2*10+3*1=123

優先規則

權值大的樣式會覆蓋權值小的樣式，上面例子的樣式會采用權值最大201的樣式，當你亂用!important，特別是后期修改樣式的時候，是不是有種心力憔悴電費感覺？

當css前后樣式項的權值一樣，后面的樣式會覆蓋前面的樣式。

Css 概念

CSS規范

命名風格規范

1 css文件命名：統一為小寫的英文字母（盡量少用拼音），如：index.css。

當名字需要組合拼寫時，可以在單詞間加中杠線（不要用下劃線：容易寫錯）。如：member-report.css。（推薦）

或者統一為駝峰式拼寫。如：MemberReport.css (項目啟動前統一風格)。

2 樣式名（html的class名）：在讓人看懂的前提下，盡量語義化或簡寫。盡量少用拼音，和無語義的縮寫 .bt .bd 等；風格可以統一為小寫字母，如：content。當名字需要組合時，可以采用css文件名的規范。

樣式的繼承

文本樣式

color,font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height，text-align, text-indent, texttransform,word-spacing

列表相關屬性

list-style-image, list-style-position,
list-style-type, list-style,

像素化 css

CSS優化

渲染

就是瀏覽器把HTML代碼以css定義的規則顯示在瀏覽器窗口的過程

瀏覽器對頁面呈現的處理流程

用戶輸入網址（假設是個html頁面，并且是第一次訪問），瀏覽器向服務器發出請求，服務器返回html文件；
瀏覽器開始載入html代碼，發現<head>標簽內有一個<link>標簽引用外部CSS文件；
瀏覽器又發出CSS文件的請求，服務器返回這個CSS文件；
瀏覽器繼續載入html中<body>部分的代碼，并且CSS文件已經拿到手了，可以開始渲染頁面了；
瀏覽器在代碼中發現一個<img>標簽引用了一張圖片，向服務器發出請求。此時瀏覽器不會等到圖片下載完，而是繼續渲染后面的代碼；
服務器返回圖片文件，由于圖片占用了一定面積，影響了后面段落的排布，因此瀏覽器要回過頭來重新渲染這部分代碼；
瀏覽器發現了一個包含一行Javascript代碼的<script>標簽，趕快運行它；
Javascript腳本執行了這條語句，它命令瀏覽器隱藏掉代碼中的某個<div> （style.display=”none”）。杯具啊，突然就少了這么一個元素，瀏覽器不得不重新渲染這部分代碼；
終于等到了</html>的到來，瀏覽器淚流滿面……
等等，還沒完，用戶點了一下界面中的“換膚”按鈕，Javascript讓瀏覽器換了一下<link>標簽的CSS路徑；
瀏覽器召集了在座的各位<div><span><ul><li>們，“大伙兒收拾收拾行李，咱得重新來過……”，瀏覽器向服務器請求了新的CSS文件，重新渲染頁面。

回流

當頁面的布局發生變化時，瀏覽器會回過頭來重新渲染，這就是頁面為什么會慢的一個原因，當一個點的變化影響了布局，這就會使得要倒回去重新渲染，這個倒回去的過程稱為 reflow（回流）。

當頁面布局和幾何屬性改變時就需要回流。下述情況會發生瀏覽器回流

添加或者刪除可見的DOM元素；
元素位置改變和計算（offsetWidth 和 offsetHeight）
元素尺寸改變——邊距、填充、邊框、寬度和高度
內容改變——比如文本改變或者圖片大小改變，字體的改變而引起的計算值寬度和高度改變；
頁面渲染初始化
瀏覽器窗口尺寸改變——resize事件發生時；
操作 class 屬性，腳本操作 DOM，設置 style 屬性的值，激活 CSS 偽類

var s = document.body.style;
s.padding = "2px"; // 回流+重繪
s.border = "1px solid red"; // 再一次 回流+重繪
s.color = "blue"; // 再一次重繪
s.backgroundColor = "#ccc"; // 再一次 重繪
s.fontSize = "14px"; // 再一次 回流+重繪
// 添加node，再一次 回流+重繪
document.body.appendChild(document.createTextNode('abc!'));
回流比重繪的代價要更高，回流的花銷跟render tree有多少節點需要重新構建有關系，假設你直接操作body，比如在body最前面插入1個元素，會導致整個render tree回流，這樣代價當然會比較高，但如果是指body后面插入1個元素，則不會影響前面元素的回流。

reflow問題也是可以優化的，減少reflow是很有必要的，比如給圖片設定好寬度和高度，這樣就可以把圖片的占位面積預定好。

重繪

一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格（景顏色，文字顏色，邊框顏色）而不會影響布局，瀏覽器就會repaint。repaint的速度明顯比reflow的速度快。

為了幫助小伙伴們更好的學習WEB前端，技術學派整理了WEB前端的相關學習視頻及學習路線圖。

領取方式

關注“技術學派”后，評論轉發文章，私信回復：WEB前端

碼規范

CSS樣式表是一個序列通用字符集，傳輸和存儲過程中，這些字符必須由支持 US-ASCII（例如 UTF-8, ISO 8859-x, SHIFT JIS 等）字符編碼方式編譯

文檔內嵌樣式表編碼

When a style sheet is embedded in another document, such as in the STYLE element or "style" attribute of HTML, the style sheet shares the character encoding of the whole document.

當樣式出現在其它文檔，如 HTML 的 STYLE 標簽或標簽屬性 "style"，樣式的編碼由文檔的決定。

文檔外鏈樣式表編碼

When a style sheet resides in a separate file, user agents must observe the following priorities when determining a style sheet's character encoding (from highest priority to lowest):

An HTTP "charset" parameter in a "Content-Type" field (or similar parameters in other protocols)BOM and/or [@charset ]()or other metadata from the linking mechanism (if any)charset of referring style sheet or document (if any)Assume UTF-8

文檔外鏈樣式表的編碼可以由以下各項按照由高到低的優先級順序決定：

HTTP “Content-Type” 字段參數 “charset”（或其它協議相似的參數）
BOM（byte-order mark）和（或）[@charset ]()
Link 中的元數據設置（如果有的話）
引用樣式表字符集或文檔編碼（如果有的話）
假定為 UTF-8 編碼

樣式表編碼

Authors using an [@charset ]() rule must place the rule at the very beginning of the style sheet, preceded by no characters. (If a byte order mark is appropriate for the encoding used, it may precede the [@charset ]() rule.)

[@charset ]() must be written literally, i.e., the 10 characters '[@charset ]() "' (lowercase, no backslash escapes), followed by the encoding name, followed by '";'.

@charset規則一定要在樣式文件的第一行首個字符位置開始，否則的話就會有機會讓 BOM 設置生效（如果有設置 BOM 的話）而優于 [@charset ]() 作為樣式表的編碼
@charset ""; 一定要寫上，并且用小寫字母，不能出現轉義符

團隊約定

樣式文件必須寫上 [@charset ]() 規則，并且一定要在樣式文件的第一行首個字符位置開始寫，編碼名用 “UTF-8”
字符 [@charset ]() ""; 都用小寫字母，不能出現轉義符，編碼名允許大小混寫
考慮到在使用“UTF-8”編碼情況下 BOM 對代碼的污染和編碼顯示的問題，在可控范圍下，堅決不使用 BOM。（更多關于 BOM 可參考 BOM的介紹和「帶 BOM 的 UTF-8」和「無 BOM 的 UTF-8」有什么區別？）

推薦：

@charset "UTF-8";

.jdc{}

不推薦：

/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */
 
/* @charset規則不在文件首行首個字符開始 */
@charset "UTF-8";

.jdc{}

@CHARSET "UTF-8";
/* @charset規則沒有用小寫 */

.jdc{}

/* 無@charset規則 */
.jdc{}

更多關于樣式編碼：CSS style sheet representation

代碼風格

代碼格式化

樣式書寫一般有兩種：一種是緊湊格式 (Compact)

.jdc{ display: block;width: 50px;}

一種是展開格式（Expanded）

.jdc{
    display: block;
    width: 50px;
}

團隊約定

統一使用展開格式書寫樣式

代碼大小寫

樣式選擇器，屬性名，屬性值關鍵字全部使用小寫字母書寫，屬性字符串允許使用大小寫。

/* 推薦 */
.jdc{
    display:block;
}
    
/* 不推薦 */
.JDC{
    DISPLAY:BLOCK;
}

選擇器

盡量少用通用選擇器 *
不使用 ID 選擇器
不使用無具體語義定義的標簽選擇器

/* 推薦 */
.jdc {}
.jdc li {}
.jdc li p{}

/* 不推薦 */
*{}
#jdc {}
.jdc div{}

代碼縮進

統一使用四個空格進行代碼縮進，使得各編輯器表現一致（各編輯器有相關配置）

.jdc {
    width: 100%;
    height: 100%;
}

分號

每個屬性聲明末尾都要加分號；

.jdc {
    width: 100%;
    height: 100%;
}

代碼易讀性

左括號與類名之間一個空格，冒號與屬性值之間一個空格

推薦：

.jdc { 
    width: 100%; 
}

不推薦：

.jdc{ 
    width:100%;
}

逗號分隔的取值，逗號之后一個空格

推薦：

.jdc {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

不推薦：

.jdc {
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

為單個css選擇器或新申明開啟新行

推薦：

.jdc, 
.jdc_logo, 
.jdc_hd {
    color: #ff0;
}
.nav{
    color: #fff;
}

不推薦：

.jdc,jdc_logo,.jdc_hd {
    color: #ff0;
}.nav{
    color: #fff;
}

顏色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要帶有不必要的 0

推薦：

.jdc {
    color: rgba(255,255,255,.5);
}

不推薦：

.jdc {
    color: rgba( 255, 255, 255, 0.5 );
}

屬性值十六進制數值能用簡寫的盡量用簡寫

推薦：

.jdc {
    color: #fff;
}

不推薦：

.jdc {
    color: #ffffff;
}

不要為 0 指明單位

推薦：

.jdc {
    margin: 0 10px;
}

不推薦：

.jdc {
    margin: 0px 10px;
}

屬性值引號

css屬性值需要用到引號時，統一使用單引號

/* 推薦 */
.jdc { 
    font-family: 'Hiragino Sans GB';
}

/* 不推薦 */
.jdc { 
    font-family: "Hiragino Sans GB";
}

屬性書寫順序

建議遵循以下順序：

布局定位屬性：display / position / float / clear / visibility / overflow
自身屬性：width / height / margin / padding / border / background
文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

mozilla官方屬性順序推薦

CSS3瀏覽器私有前綴寫法

CSS3 瀏覽器私有前綴在前，標準前綴在后

.jdc {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

更多關于瀏覽器私有前輟寫法：#Vendor-specific extensions

參考閱讀

Google Code Guide

者：sunshine小小倩

轉發鏈接：https://juejin.im/post/592d4a5b0ce463006b43b6da

在線咨詢

上一篇：有一個會代碼的大神男朋友是什么感覺
下一篇：大學生必備的66個網站，從大一用到大四！扶我起來，我還能學習

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

技術學派：CSS規范總結

SS樣式的權值(權重)

CSS規范

CSS優化

領取方式

碼規范

文檔內嵌樣式表編碼

文檔外鏈樣式表編碼

樣式表編碼

團隊約定

代碼風格

代碼格式化

代碼大小寫

選擇器

代碼縮進

分號

代碼易讀性

屬性值引號

屬性書寫順序

CSS3瀏覽器私有前綴寫法

參考閱讀

您的項目需求