有哪些CSS標準是前端工程師很有必要研讀的？

01-14

前端標準繁多，雖然知道在w3c上都有，但是存在兩個問題：
1. 當遇到一個屬性時(比如position),我怎麼知道應該去查哪個標準？
2. 標準的大概組成是怎樣的，有哪些標準是前端工程師值得一讀的？
還請各位@前輩分享下研讀標準的經驗^_^

瀉藥

如果只是開發時候查下屬性

隨便看看 w3school 就好了

如果想要深入了解點

看看 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

這個也就夠了

如果還要對規範細節有了解

就得看 W3 的 All Standards and Drafts

這個了

其中 W3 的 CSS 規範(RC/WD)其實大致分兩類

1、CSS2 基礎布局相關 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

這裡對基本布局情況做了闡述

5 Selectors
6 Assigning property values, Cascading, and Inheritance
8 Box model
9 Visual formatting model
10 Visual formatting model details

是相對重要的幾個章節

層疊、計算、布局細節內容均出於此

2、CSS2 之後擴展內容

通常是對於CSS2之後的擴充內容

這些按具體內容分成不同規範

如最大的關鍵字系列

Selectors Level 4

CSS basic box model

CSS Values and Units Module Level 3

CSS Pseudo-Elements Module Level 4

CSS Animations

CSS Transforms Module Level 1

Media Queries Level 4

CSS Will ChangeCSS Flexible Box Layout Module Level 1

Filter Effects Module Level 1

CSS Regions Module Level 1

CSS Multi-column Layout ModuleCSS Inline Layout Module Level 3

等等

基本上按某類屬性、需求歸納為一種規範文檔

著重介紹屬性名、值以及使用方式

這類是最多的

一般遇到不知道的屬性看下屬性名字總結出關鍵字

按關鍵字基本可以容易的找到所屬規範

再如總括、擴展系列

CSS Syntax Module Level 3

CSS Fonts Module Level 3

等

是按照某種抽象類型進行綜述

基本不牽扯到到CSS屬性啊、值啊的什麼的具體說明

對查屬性值啥的無用

再如對象映射（包裝）關係系列

CSS Object Model (CSSOM)

CSSOM View Module

CSS Font Loading Module Level 3等

主要內容是介紹CSS屬性包裝為可操作對象相關的內容

通俗的說就是JS可調用的CSS操作API介紹

JS里CSS相關操作API不知道可以跟這類規範里找找看

基本上建議先看RC、後看DW內容(畢竟 DW 更易變化)

現在一般不建議你直接看spec，因為css spec/draft非常多，你都找不清楚哪個屬性在哪個module里。平時開發，查 http://webplatform.org 或 http://developer.mozilla.org 就可以了。

如果真的想鑽研spec，可查閱這裡：CSS Working Group Editor Drafts

最重要的是 CSS 2.2（CSS 2.1的修訂版），研讀清楚就可以了。

其他部分，哪個感興趣就看哪個（因為大部分模塊互相之間是正交的），不過有幾個是基礎，建議先看好：

0. CSS Snapshot 2015

1. Selectors Level 4

2. CSS Values and Units Module Level 3

3. CSS Cascading and Inheritance Level 4

@貘吃饃香貘大又來知乎斬贊了，斬的毫無人道！第二點的話，對CSS愛的不是那麼牆裂的人表示兩個高票答案說的很好了，那麼我來補充下第一點好了。

首先推薦一個工具，如果你有macbook/ipad的話，可以嘗試購買 Dash for OS X ，

然後簡單配置下（就下載你要的文檔，還不夠簡單么）：

接下來返回軟體，搜索你要查找的內容，結果會立即展示出來，比如：

MDN的文檔多數有示例，以及spec出處，如果你想刨根問底，那麼可以果斷點開：

咳咳，你以為到這裡就完事了么，如果是這樣，那這個回復也太水了（即使本來就很水）

然而MDN的兼容性列表不一定靠譜，我們多數時候還是需要看一眼Caniuse，甚至是MSDN...

再推薦一個工具：GitHub - Fyrd/caniuse: Raw browser/feature support data from caniuse.com

使用這個工具可以輕鬆獲取我們要的屬性的兼容性，而不用麻煩的打開瀏覽器再吧啦吧啦...

有木有很方便呢？

咳咳，你以為到這裡就完事了么，如果是這樣，那這個回復也太水了（即使本來就很水）

如果之前安裝過caniuse，或許你查詢的時候會提示資料庫超過三十天木有更新了，怎麼解決呢？

提供兩個解決方案：

方案一：重新安裝

npm uninstall -g caniuse-cmd npm install -g caniuse-cmd

方案二：幫它更新資料庫

export BIN_PATH=$(which caniuse);cd $(dirname $BIN_PATH) cd $(dirname $(readlink $BIN_PATH)) npm install caniuse-db

咳咳，你以為到這裡就完事了么，如果是這樣，那這個回復也太水了（即使本來就很水）

真的完事了...

dash...查文檔...主幹部分找本css權威指南就可以其餘就是你工作中問題去查記錄

當你覺得你查的資料含糊不清的時候，還是看協議比較靠不，個人也看過一點協議，只是一點，就小有收穫。