CSS品控與流程

時間 2019-11-09

標籤 css 流程欄目 CSS 简体版

原文原文鏈接

精通CSS意味着不只能寫出可用的標記和樣式，還能讓代碼好閱讀、方便移植、易維護。css

1.外部代碼質量：調試CSS

外部代理質量就是用戶能體驗到的最終結果。主要體如今幾個方面。html

正確性。CSS屬性名都寫對了嗎？瀏覽器可否支持？
健壯性。聲明兩套屬性，其中一套用做舊版瀏覽器的後備。
性能。頁面加載快不快？動畫和滾動是否平滑？

咱們要善於利用瀏覽器的開發者工具。前端

1.1 瀏覽器如何解析CSS

瀏覽器在加載一個網站時，首先會收到網址對應的一個HTML文件。而後瀏覽器把這個HTML文件解析爲一個對象（節點）樹。這就是文檔對象模型（DOM，document object model）。編程

<html lang="en">
<head> 
    <meta charset="utf-8"> 
    <title>Test Document</title>
</head>
<body>
    <h1>This is a test.</h1>
    <p>This is a paragraph.</p>
    <p>This is anothr paragraph.</p>
</body>
</html>

瀏覽器在碰到HTML中指向CSS文件的連接時，會獲取並解析CSS文件。相似於把HTML轉換成DOM，CSS文件會被瀏覽器轉換爲CSS對象模型（CSSOM，CSS object model）。
不只是外部CSS，內部style元素或行內style屬性中的CSS也會被解析並添加到CSSOM中。
每一個CSS選擇符都會匹配一個DOM節點，而後瀏覽器會基於層疊、繼承和特殊性來計算每一個DOM節點的最終樣式。瀏覽器

在渲染樹中，每一個節點表示要渲染到屏幕上的信息。
在構建完成的渲染樹中，節點都應該知道了本身是什麼顏色、文本使用哪一種字體顯示，以及是否有明確的寬度，等等。編程語言

瀏覽器會遍歷渲染樹，肯定每一個對象顯示在頁面上的什麼位置，這個過程叫佈局（layout）或重排（reflow）。
肯定了每一個渲染對象的位置和屬性後，瀏覽器能夠計算出它們在屏幕上佔據的像素數，這個過程叫繪製。模塊化

瀏覽器若是發現最終圖像的某一部分不影響頁面其餘內容的顯示，也可能決定把繪製拆分紅不一樣的任務，每一個任務負責繪製頁面上特定的部分，或者叫層。應用了濾鏡或混合模式的元素，須要肯定如何與其餘層混合。這個先拆分爲層，再組合起來的過程叫合成（compositing）。函數

1.2 優化渲染性能

爲保證屏幕上的頁面能平滑變化，最好能在16毫秒之內完成重繪。16毫秒對應的屏幕刷新率爲60Hz。
有些變化幾乎不會影響性能，好比滾動頁面。這時候瀏覽器只要把整個渲染結果從新繪製到不一樣位置便可。若是某些變化會致使頁面上的樣式改變，那麼就可能會影響性能。工具

2.內部代碼質量：以人爲本

代碼的內部質量從幾個方面來衡量：佈局

複用性。若是修改某個方案，是否須要修改不少地方？
可讀性。其餘人閱讀你的代碼時，是否能很快讀懂？
可移植。你寫的一段代碼是能夠獨立使用，仍是必須依賴項目的其餘代碼才能用？
模塊化。可否將你的代碼以不言自明的方式組織起來，放到其餘地方重用？

2.1 理解CSS

CSS很容易學會。做爲一個設計師，應該能作到拿起一個網頁就能夠給它應用樣式。換句話說，使用它不須要多高深的軟件編寫知識。
若是隻是作一個原型草稿，那麼代碼質量倒無所謂，能用就行。然而，一旦涉及線上的產品，代碼質量就可能產生深遠的影響。它關係到維護成本的高低，出現bug的可能性，以及新人上手的難易。

2.2 代碼質量的例子

<div id="pink-box">
    <p>This is alert message implementation one</p>
</div>

div#pink-box {
    border-radius: .5em;
    padding: 1em;
    border: .25em solid #d9c7cc;
    background-color: #ffeded;
    color: #373334;
}

ID選擇符主要是用於頁內連接，或做爲JavaScript的接入點。固然把它們用做CSS選擇符也徹底可行，但ID選擇符的高特殊性致使難以覆蓋它們的樣式。
選擇符前面還加了div，目的是限定ID選擇符。這種元素與ID或類選擇符共用的情形也很常見，但一般是用於覆蓋某些太過特殊的選擇符的。
改進的實現：

<div class="message">
    <p>This is a <code>message</code> box</p>
</div>
<div class="message message-warning">
    <p>This is a <code>message message-warning</code> box</p>
</div>
<div class="message message-success">
    <p>This is a <code>message message-success</code> box</p>
</div>

.message {
    border-radius: .5em;
    padding: 1em;
    border: .25em solid rgba(0, 0, 0, 0.15);
    background-color: #ffffed;
    color: rgba(0, 0, 0, 0.8);
}
.message-warning {
    background-color: #ffeded;
}
.message-success {
    background-color: #edffed;
}
.message + .message {
    margin-top: 1em;
}

2.3 管理層疊

咱們能夠概括幾條有助於提高代碼質量的原則：

以類名做爲應用樣式的主要手段；
類名要顧名思義，清晰明瞭；
經過拆分出單一用途的規則來避免沒必要要的重複；
不要把元素類型和樣式規則綁定在一塊兒。

這幾條原則有一個共性，即限制層疊效應，主要是經過控制特殊性實現的。

2.4 管理複雜性

CSS方法論歸根結底是爲了管理複雜性。
即便沒有CSS（包括JavaScript），網頁自己也應該能傳達自身的信息。

HTML規範中關於類名的描述：

做者給class屬性賦什麼值並無限制，但咱們推薦使用可以描述內容本質而非描述內容表現的名稱。

CSS規範中對類名的描述：

CSS爲class屬性賦予了太多能力，做者能夠徹底自主地設計他們本身的「文檔語言」，以幾乎沒有什麼表現性傾向的元素（如HTML中的div和span）爲基礎，並經過class屬性指定樣式信息。做者不該該這樣作，由於文檔語言的結構化元素一般具備公認的含義，做者定義的類則沒有。

3.工具與流程

CSS沒有通用編程語言的語法，循環、函數、列表、變量，這些都沒有。
有人爲CSS寫了另外一種語法，叫預處理器，它能把基於通用編程語言的語法編寫的樣式轉換成CSS。目前常見的預處理器有Sass、Less、Stylus、PostCSS等。
Sass（syntactically awesome style sheets，語法超帥的樣式表）是最流行的。編寫Sass最經常使用的方式使用CSS的超集，叫SCSS。換句話說，SCSS支持一切有效的CSS語法，此外又加上了Sass特有的功能。

4.工做流工具

使用Node和Gulp構建CSS工做流
Node是JavaScript在瀏覽器以外的實現，可用於任何須要編程實現的任務。自從Node問世以來，大量前端開發工具都是基於JavaScript的，正所謂「一客不煩二主」。
說到前端工做流，有不少Node工具，像Grunt、Gulp、Broccolli，都是專一於實現構建任務的。這些工具都是可配置的，並且多任務之間能夠連綴輸出，共同實現完整的流程。