摘要：的第二章，什么是釋義，層疊樣式表也算是一種標記語言，其內容作為瀏覽器的輸入，瀏覽器會解析其文本內容，作為附加的樣式信息，用以修飾標簽。年，提出層疊樣式表，的雛形出現。屬性的繼承開篇我們就提到了，為層疊樣式表，層疊代表的意思為屬性的繼承。

作為程序員，技術的落實與鞏固是必要的，因此想到寫個系列，名為 why what or how 每篇文章試圖解釋清楚一個問題。

why what or how 的第二章，什么是 CSS ？

CSS - Cascading Style Sheets，層疊樣式表

CSS 也算是一種標記語言，其內容作為瀏覽器的輸入，瀏覽器會解析其文本內容，作為 HTML 附加的樣式信息，用以修飾標簽。

標記語言，一類以固定的形式描述文檔結構或是數據處理細節的語言，一般為純文本形式，其內容作為其他程序的輸入。

樣式表大家都很清楚，記錄樣式信息的表格，以鍵值對的形式存在，格式如下

p {
    font-size: 10px;
}

那么何為層疊呢？層疊的意義是什么？

層疊，字面意思：層層疊加，我們知道 HTML 的頁面結構是樹狀的，不同標簽的層級嵌套最終組合形成了頁面，那么從另一個角度來看，頁面的結構就是一層一層的，如下圖所示

html 為最底層，body 位于 html 層之上，header、nav、article、aside、footer 這些標簽位于 body 之上，section 位于 article 之上，標簽的堆疊就形成了網頁結構，那么這關 CSS 什么事？

先拋出一個問題：如果說 article 標簽代表一篇文章，那么其內部的文字大小，樣式，排版是不是應該一致？

是！那么樣式進行層疊的意義也在于此，只要我給 article 標簽固定的樣式，那么 article 內部的標簽就會（部分）繼承這個默認的樣式信息，層級結構代表了節點間的關系，那么就有了父子級的區別，也就有了繼承的關系。

那有的朋友就會問了？現在的 CSS 不就是這樣的嗎？這不是默認的行為？

CSS 確實如此，但剛開始為 HTML 進行修飾的樣式規則卻并非如此，CSS 只是在眾多規則中，最終成為標準的那一個。

1991 - 1993 年，各種瀏覽器相繼出現，但每個都實現了自己制定樣式規則，網頁呈現由用戶控制，樣式沒有統一的規定。

1993 年，Mosaic 瀏覽器采用增加新種類的 HTML 標簽實現樣式的表達，以滿足設計師的要求， 之類代表樣式的標簽開始出現。

1994 年，H?kon W Lie 提出層疊 HTML 樣式表（Cascading HTML Style Sheets），CSS 的雛形出現。

1995 年，W3C 建立，W3C 對 CSS 很感興趣，為此專門組織了一次討論會。

1996 年，CSS 語法完成，發布了 CSS1.0 ，但由于當時主流的瀏覽器并不支持（每家都有自己的樣式寫法），并且當時主流的方式為 HTML 的樣式標簽，因此 CSS 等幾年后才流行起來。

1997 年，W3C 組織了專門管 CSS 的工作組。

1998 年，瀏覽器市場份額被微軟公司的 IE4 和網景公司的 Netscape Navigator 兩大瀏覽器巨頭所占據。IE4 率先實現了 CSS 1.0 但由于不重視，導致規范實現不完善，bug 很多。由于不同瀏覽器支持的標準不一致，網頁設計人員不得不為 IE 和 Netscape Navigator 分別設計一套網頁。民間設計人員團體 網頁標準計劃(WaSP) 發動水軍將 W3C 的建議宣揚為標準，并批評還未加盟 W3C 標準的業界廠商。

1998 年，W3C 組織出版 CSS2.0 網頁標準計劃的 7 位成員成立了 CSS武士團（CSS Samurai），指出 Opera 瀏覽器和 IE 瀏覽器在支持 CSS 方面存在的諸多問題。Opera 公司著手解決了問題，但微軟并未解決。他們同時也勸說其他瀏覽器開始支持 CSS 標準。

1999 年，W3C 開始制定 CSS3 標準。

2003 年，Dave Shea 推出了一個名為 CSS禪意花園("CSS Zen Garden") 的站點，向人們展示出僅通過應用不同頁面樣式規則，就可以實現對網頁藝術風格的煥然一新。

2006 - 2009年， DIV+CSS 布局逐步取代缺乏靈活性的傳統表格布局，無表格網頁設計成為網頁內容布局的主流方案。

2009 - 至今，CSS3 標準已部分公布，但仍未全部制訂完畢，瀏覽器廠商也逐步跟進，W3C 官方將這些不同的特性分門別類，稱為 modules，不在沿用 CSS3.0 的版本號，而是將多帶帶的 module 分別命名，每個 module 也有不同的版本號。

...

CSS 從標準制定，到最終有瀏覽器開始實現，至少間隔了 5 年的時間，而 CSS 的上位也由民間組織推動，到瀏覽器廠商最終采納。直到目前，我們還能在 HTML 中使用類似 之類代表樣式的標簽，也是歷史遺留下來的產物，但 HTML5 的推出，規范了 HTML 標簽是作為網頁的結構，CSS 作為網頁的樣式信息，因此那些代表樣式的標簽已經被規范所移除，我們也應該少用甚至不用。

CSS 在眾多的樣式規則中脫穎而出，其實和 IE4 的成功有這很大的關系，IE 系列最先實現了 CSS1.0 標準，可以說是在與 Netscape Navigator 戰爭中勝利的因素之一，甚至很多的 CSS3 屬性背后也有著 IE 的影子，但后來 IE 系列的落寞很大程度上是因為它的不作為。

一條 CSS 規則的結構如下：

┌─────── 選擇規則 ──────┐   ┌────────── 聲明塊 ──────────┐
p + p > span:first-child    {
                                ┌──────  CSS 屬性 ───────┐
                                font-size   : 10px       ;
                                └─ 屬性名 ─┘ └─ 屬性值 ─┘
                            }

由兩部分組成，選擇器與聲明塊。

選擇規則：用于匹配具體 HTML 中符合要求的標簽

聲明塊：用于設置符合要求標簽的樣式

一條選擇規則有兩部分組成，選擇器與連接符，上面例子中，p、span、:first-child 屬于選擇器，而 +、> 這些符號屬于連接符。

一個聲明塊由多條 CSS 屬性組成，屬性分為兩部分，屬性名與屬性值，以 : 分隔，以 ; 結尾，一條屬性規定了標簽的一個樣式。

選擇規則，意如其名，用于選擇 HTML 文檔中的標簽，那么如何進行選擇的呢？選擇規則分為兩部分，我們分開介紹

選擇器

選擇器用于選擇 HTML 頁面中存在的標簽。選擇器分為幾大類，如下：

屬性選擇器有多種寫法，如下：

注： 屬性選擇器寫法，如 [attr=value] 其后都可以跟 i，比如 [attr=value i] 代表在匹配時，忽略 value 的大小寫。

常用偽類，如下

連接符（符號用引號引起）

連接符規定了選擇器該如何進行組合，為了方便解釋，我會將符號取一個名字，最終的選擇規則代表的含義只需按順序從前往后讀即可。

給幾個例子

p.class1

p,div

p .class1

p > .class1

p + .class1

p ~ .class1

我們順起來念：

選中 p 并且帶有 class1 類名的標簽。

選中 p 標簽或者 div 標簽。

選中 p 標簽內的帶有 class 類名的標簽。

選中 p 標簽內第一級帶有 class 類名的標簽。

選中 p 標簽之后的第一個帶有 class 類名的標簽。

選中 p 標簽之后的所有帶有 class 類名的標簽。

針對于復雜的選擇規則的編寫，比如在 bootstrap 中有這樣一段：

.btn-group > .btn-group:not(:first-child):not(:last-of-type) > .btn {
  border-radius: 0;
}

代表的意義是什么呢？

按照順序念：選中帶有 btn-group 類名標簽內第一級帶有 btn-group 類名并且不是第一個子元素并且不是最后一個子元素標簽內第一級帶有 btn 類名的標簽。

對應的 html 如下：

    按鈕1
    
        按鈕2
        按鈕3
        按鈕4
    
    按鈕5

選中的標簽為按鈕2/3/4。

我們從該條規則的意義來理解這條規則：btn-group 中的 btn-group 下的 btn 不應該有圓角（在中間時）。因為正常的按鈕都是帶圓角的，而放在按鈕組中的按鈕其實只要左右兩邊的按鈕帶上圓角就好，這時候就需要通過特殊的手段來吧這些要去除圓角的元素給選擇，并去掉圓角。

接著我們在看我們翻譯出來的內容，是不是不那么繞了呢？

最后在提一段 bootstrap 中的樣式規則，大家一起翻譯翻譯吧

.btn-group > .btn-group:last-of-type:not(:first-child) > .btn:first-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

選擇器的內容到此為止，接下來就要談談聲明塊中的 CSS 屬性了。

CSS 中樣式分很多種，按照樣式效果進行區別，大致可以分為如下幾類

該篇僅介紹 CSS 是什么，而不解釋 CSS 有什么，所以不過于深究這些屬性的具體內容，可以通過查看 CSS參考來了解。

開篇我們就提到了，CSS 為層疊樣式表，層疊代表的意思為屬性的繼承。

這個繼承可以簡單的總結為一句話：

父級標簽的字體樣式和文章排版樣式會被子標簽所繼承，也就是說子標簽不用寫這些屬性，就擁有了這些屬性。

CSS 中有幾個特殊的屬性值，需要特別關注一下：

unset - 如果該屬性為繼承屬性則使用繼承值，不是則使用瀏覽器默認值

initial - 使用初始化的值，也就是瀏覽器默認值

inherit - 使用繼承值

由于相同的標簽可以由不同的選擇規則所選中，那么這時候就出現了一個情況，如果有多個選擇規則同時選中了同一個元素，并且同時設置了相同屬性，那么標簽最終是要按照哪條規則定義的屬性來顯示？

不同 CSS 規則對同一個標簽設置了相同屬性，CSS 選擇規則權重最高的規則會覆蓋權重低的樣式設置。

何為權重，經過上面的介紹，CSS 設置標簽的樣式有如下幾種

直接寫在標簽 style 屬性上

ID 選擇器

類名選擇器

偽類

標簽選擇器

通配符

從上到下，選擇器的權重依次遞減，就像是同樣是一張紙幣，100 的紙幣代表的比 10 塊的紙幣大，但是與紙幣不同的是，權重高的永遠比權重低的優先級要高，不管低權重的選擇器有幾個。

除去 style 的方式我們用一個數組來代表選擇規則的權重。

[0, 0, 0, 0, 0]

從左到右為：ID 選擇器、類名選擇器、偽類、標簽選擇器、通配符，數組的初始值全為 0 ，我們可以變看選擇規則來確定最終數組，比如那個很復雜的 btn 選擇：

.btn-group > .btn-group:not(:first-child):not(:last-of-type) > .btn {
  border-radius: 0;
}

從左到右，每出現一個選擇器，就將對應的數組內的數組加一，那么上條規則最終的數組如下：

[0, 3, 2, 0, 0]

這時，有的朋友可能會問了，偽類選擇有 4 個啊，怎么是 2 ？這里需要注意的是：:not 偽類僅帶有取反的意思，并不增加權重。

那么權重該如何比較？

簡單的來說，從前往后比，誰比誰先大，誰的權重高。相信寫一段比較程序大家就了解了：

function compare(weight1, weight2){
    for(let i = 0; i < 5; i++){
        if(weight1[i] !== weight2[i]){
            if(weight1[i] > weight2[i]){
                console.log("參一權重大");
            }else{
                console.log("參二權重大");
            }
            return;
        }
        
    }
}

那么 style 所規定的樣式權重如何？

style 樣式所規定的權重，比 ID 選擇器 的權重還要高。

那么我們想要在 CSS 文件中修改 style 所規定的樣式該怎么辦？

使用 !important 修飾特定的樣即可。如下所示

p {
    color: red !important;
}

那么 p 標簽的字體顏色即為紅色，即使設置了 style 也沒用。

總結一下：權重等級由高到低為：!important > style > 選擇規則。就像是老大哥說東小弟不敢說西，權重也是絕對服從上一級的。

因此為了避免出現尷尬的狀況，請慎重使用 !important。

CSS 發展到現在，人們發現 CSS 雖然含有層疊的含義，但是寫法卻是一維的，就比如文檔結構如下的一個網頁：

    
這是一段文字

我們要在 article，p 標簽上設置樣式，看起來是這樣的：

article {
    font-size: 14px;
}

article p {
    color: red;
}

由于樣式規則按照一條一條的形式進行編寫，看起開就是一維，標簽的層級結構不能在其中體現，如果這樣寫那就好了：

article {
    font-size: 14px;
    p {
        color: red;
    }
}

從樣式編寫上就說明了層級結構，p 標簽所繼承的樣式明了，但是瀏覽器又僅能識別一維的樣式編寫，那該如何讓瀏覽器認識該結構呢？

預編譯器因運而生，常用的 css 預編譯器有：sass、less、stylus等，這些預編譯器需要特定的語法，但都支持二維的寫法。

那么這些個預編譯干了什么？

很簡單的一句話，將符合預編譯器語法的文件轉化為 css 文件。

同樣的這些預編譯器的語法，這里不過多介紹，提供幾個網站供大家查閱：

sass/scss

less

stylus

我是在 2019 年寫下這篇文章，為何要特地的聲明時間，是因為一個東西的出現：CSS Modules，我們需要好好來了解了解。

何為 CSS Modules ，官方解釋如下：

CSS files in which all class names and animation names are scoped locally by default.

翻譯過來就是：

CSS 的類名和動畫名字都在一個命名空間下。

不懂？寫個例子。

以下為偽源碼：

// test.css
.box{
    color:red;
}

import style from "test.css"

function Test(){
    return (
)
}

以下為偽輸出：

_styles__box_34682763478 就是在加了命名空間后的類名，這樣構建出的代碼就不會出現相同類名被覆蓋的問題。

總的來說，CSS Modules 做了一件時，混淆了 class 類名、id 和動畫名。

這時就有一些開發站出來說，這個東西好啊，我再也不用去想類名該如何取才能不導致沖突了。冷靜下來先考慮這幾個問題：

雖然不會沖突了，但如果你想覆蓋類名該怎么辦？

是否能接受編譯慢的問題？

樣式名會隨著文件的位置或文件內容改變，是否能接受這種變化？

頁面上是否需要用到大量 JavaScript DOM API？如果是，那么通過樣式名選取變的不可靠。

當使用了 CSS Modules 后項目中是否出現了極多的 :global 如果是，那要仔細思考下，不用 CSS Modules 成本是否更低？

以下是問題對應的一些場景

問題一：你引用了團隊中其他人寫的組件，但需要你自己修改（覆蓋）一些樣式，而其他人也是用 CSS Modules 編寫樣式，因此他的類名是不固定的，你該如何去覆蓋這個組件中標簽的樣式？

通知組件編寫者修改樣式？要是通用組件咋辦？

讓他用固定樣式？那用 CSS Modules 的意義在于哪？

問題三四：當你程序需要使用 DOM API 但通過 CSS Modules 生成的樣式名會隨著文件的位置或內容改變，這樣程序就變得不可靠，當然這個問題有辦法解決

js 中也用 CSS Modules 的命名，只不過調試變得些許困難

js 中使用的樣式名與 CSS Modules 進行區分，js 和 CSS Modules 使用兩套樣式多帶帶的樣式

那么接下來說說我的使用體驗，或者說我覺得好的使用體驗

項目中 CSS Modules 和原始的 CSS 一同使用。

CSS Modules 僅使用在組件內部，項目中依然使用公共樣式。

CSS Modules 僅使用在一些與結構無關的但又不好命名的標簽上，這些標簽一般也不會被 js 所選擇。

CSS Modules 混淆采用和文件位置相關的命名空間產生方式，而不根據文件內容。

一旦某個樣式是跨組件通用就不用 CSS Modules ，通過項目規定的命名空間在原始 CSS 文件中定義。

開發 UI 庫或公共組件，不用 CSS Modules。

總的來說就是一個原則，CSS Modules 用在非共用，無所謂命名以及非跨組件通用的標簽上，這些標簽可以認為是組件的內部狀態，不會被外部影響或修改。

也不知道多年以后 CSS Modules 是否真的解決了編譯慢的問題（至少我的電腦上是），CSS Modules 原理上仍是傳統的 CSS 編寫方式，只不過它混淆了名稱，并添加了映射，但是以后的發展會如何呢？我不知道，但我會持續的關注它。

慣例以問句開篇，用問句來結尾

CSS 的層疊體現在哪？

CSS 選擇規則分為那兩部分，每部分都如何組成？

列一列選擇器，并分個類？

常見屬性都有哪些？

預編譯器是干什么用的？

CSS Modules 是什么？

談談對 CSS Modules 的看法吧。

最后，其實本篇還想談談布局和文檔流的內容，但篇幅過長，也涉及到了 HTML ，所以就打算將布局多帶帶出來，以后會有如何進行網頁布局的單篇，已經記錄，希望大家持續關注。

MDN - 什么是 CSS ？

WIKI 層疊樣式表

CSS 二十年發展簡史

MDN - CSS 參考

CSS所有屬性分類

css的優先級 和 權重

該系列所有問題由 minimo 提出，愛你喲~~~