### Web標準：是敵還是友
* W3C 并不“生產”標準，只是設定了相應的的規則，監督規范生成的整個進程。CSS 規范通常是由 CSS 工作組的成員來編寫的。分別來自W3C 會員公司的成員（88%），特邀專家（7%）和W3C 工作人員（5%）。**對于哪些東西該進入標準，瀏覽器廠商比W3C 有更多的發言權**。
* 制定標準并不是閉門造車，CSS 工作組堅持透明原則，內部的所有交流都是公開的，并邀請公眾的關注和參與。
* 每項規范從最初啟動到最終成熟，都會經過以下階段：
> 1. 編輯草案（ED）
> 2. 首個公開工作草案（FPWD）
> 3. 工作草案（WD）
> 4. 候選推薦規范（CR）
> 5. 提名推薦規范（PR）
> 6. 正式推薦規范（REC）
* CSS 1的規范發表于1996年，非常短且簡單。CSS 2 發表于1998年，它的定義更加嚴格且囊括了更多的功能。
* 在 CSS 2之后，CSS 工作組意識到這門語言已經變得非常龐大，再也無
法把它塞進單個規范中了。這樣不僅閱讀和編輯極其困難，而且限制了CSS
本身的快速發展。因此，**他們將CSS 打散到多個不同的規范（模塊）中，
每個模塊都可以獨立更新版本**。
* 延續已有特性的模塊會升級到3這個版本號。比如以下模塊：
> - [CSS語法](http://w3.org/TR/css-syntax-3)
> - [CSS層疊與繼](http://w3.org/TR/css-cascade-3)
> - [CSS顏色](http://w3.org/TR/css3-color)
> - [選擇符](http://w3.org/TR/selectors)
> - [CSS背景與邊框](http://w3.org/TR/css3-background)
> - [CSS值與單位](http://w3.org/TR/css-values-3)
> - [CSS文本排版](http://w3.org/TR/css-text-3)
> - [CSS文本裝飾效果](http://w3.org/TR/css-text-decor-3)
> - [CSS字體](http://w3.org/TR/css3-fonts)
> - [CSS基本UI特性](http://w3.org/TR/css3-ui)
* 如果某個模塊是前所未有的新概念，那它的版本號將從1開始。比如下面這些：
> - [CSS變形](http://w3.org/TR/css-transforms-1)
> - [圖像混合效果](http://w3.org/TR/compositing-1)
> - [濾鏡效果](http://w3.org/TR/filter-effects-1)
> - [CSS遮罩](http://w3.org/TR/css-masking-1)
> - [CSS伸縮盒布局](http://w3.org/TR/css-flexbox-1)
> - [CSS網格布局](http://w3.org/TR/css-grid-1)
* 實際上沒有任何規范中定義了**CSS3** 這個名詞。**通常我們所說的CSS3 指的是一個非正式的集合，包括CSS 規范第三版（Level 3）再加上一些版本號還是1 的新規范**。
* **瀏覽器前綴**（Vendor Prefix）是一些放在CSS屬性前的小字符串，用來確保這種屬性只在特定的瀏覽器渲染引擎下才能識別和生效。主要是各種瀏覽器用來試驗或測試新出現的屬性特征。當需要使用瀏覽器引擎前綴時，最好是把帶有各種前綴的寫法放在前面，然后**把不帶前綴的標準的寫法放到最后**。通常我們不在代碼里直接寫帶有瀏覽器前綴的屬性，而是**通過工具如Autoprefixer在項目構建階段自動添加**。瀏覽器前綴被認為是一場史詩般的失敗。因此瀏覽器廠商已經通過配置開關取代前綴的方式來實驗性地實現新特性了。
> - -moz- /* 火狐等使用Mozilla 瀏覽器引擎的瀏覽器 */
> - -webkit- /* Safari, Chrome 等使用Webkit引擎的瀏覽器 */
> - -o- /* Opera 瀏覽器(早期) */
> - -ms- /* Internet Explorer */
### CSS 編碼技巧
* 代碼可維護性的最大要素是**盡量減少改動時要編輯的地方**。靈活的CSS 不僅容易修改，也更容易擴展。
* 當某些值相互依賴或存在一定關系時，應該把它們的**相互關系用代碼表現出來**。常見的如間距、行高等和字體大小有關時，應通過一些相對長度單位來設置它們如em, ex, % 等。
* **有的時候代碼易維護性和代碼量少不可兼得**。例如
``` css
border-width: 10px;
border-left-width: 0;
```
要優于
``` css
border-width: 10px 10px 10px 0;
```
* 靈活運用CSS 中有史以來的第一個變量[**currentColor**](https://theblog.adobe.com/extending-the-color-cascade-with-the-css-currentcolor-variable/)。
* 通常尺度精準的設計并不符合我們視覺的精準度，而這個時候需要**以視覺精準度為準**去調整。例如垂直居中，上下左右的邊距。
* 媒體查詢（Media Query）是實現實現響應式網頁設計（Responsive Web Design，RWD）的常用方法，但是我們**不應該過度依賴媒體查詢**，因為每次查詢不能以一種連續的方式來修復問題，并且添加的媒體查詢代碼越多，后期的維護和修改就會越費力。而應該**以實現彈性可伸縮的頁面的思路去寫CSS 代碼**，只需要在媒體查詢的各個斷點區間內指定相應的尺寸，并且媒體查詢的斷點不應該由具體的設備來決定，而應該根據設計自身來決定。
> - 使用百分比長度或與視口相關的單位（vw、vh、vmin 和vmax）來取代固定長度。
> - 當你需要在較大分辨率下得到固定寬度時，使用 max-width 而不是width，因為它可以適應較小的分辨率，而無需使用媒體查詢。
> - 不要忘記為替換元素（比如 img、object、video、iframe 等）設置一個max-width，值為100%。
> - 假如背景圖片需要完整地鋪滿一個容器，不管容器的尺寸如何變化，background-size: cover 這個屬性都可以做到。
> - 當圖片或其他元素以行列式進行布局時，讓視口的寬度來決定列的數量。Flex布局或者display: inline-block加上常規的文本折行行為都可以實現這一點。
> - 在使用多列文本時，指定 column-width（列寬）而不是指定column-count（列數），這樣它就可以在較小的屏幕上自動顯示為單列布局。
* **合理使用簡寫是一種良好的防衛性編碼方式，可以抵御未來的風險**。當然，如果我們要明確地去覆蓋某個具體的展開式屬性并保留其他相關樣式，那就需要用展開式屬性。例如：
```
background: red;
background-color: red;
```
前者是簡寫，它可以確保你得到red 純色背景；但如果你用的是展開式的單個屬性（background-color），那這個元素的背景最終有可能會顯示為一個粉色的漸變圖案、一張貓的圖片或其他任何東西，因為同時可能會有一條background-image 聲明在起作用。
* **在引入預處理的問題上需要冷靜決策**，不應該在每個項目一開始時就不動腦筋順著慣性來。因為使用預處理器可能會使CSS 的文件體積和復雜度增加、增加調試難度（通過SourceMap解決）、在開發過程中存在一定的延時、需要學習成本、預處理器本身會存在bug 等。**很多受預處理器啟發的特性都已經以各種方式融入到原生CSS 中了**。建議在每個項目開始時使用純CSS，只有當代碼開始變得無法保持DRY 時，才切換到預處理器的方案。
