使用less，sass等css預處理器
使用postcss外掛程式（postcss-import/precss）
使用webpack處理css（css-loader + style-loader）
postcss是乙個平台，具體要取決於這個平台上面的外掛程式可以做什麼
常用的外掛程式如下
// 1. 可以新增屬性字首，適應所有的瀏覽器
const autoprefixer = require('autoprefixer');
// 2. 將所有的import 匯入進來的模組全部合併為乙個檔案
const atimport = require('postcss-import');
// 3. 實現**的壓縮優化
const cssnano = require('postcss-cssnano');
// 4. cssnext提前使用css的高階語法
const cssnext = require('postcss-cssnext');
// 5. precss 類似於sass的語法處理
const precss = require('precss')
4.css語法檢查，相容性檢查
5.壓縮檔案
解決類名衝突的問題
使用postcss或者webpack等構建工具進行編譯
在html模板中使用編譯過程產生的類名（物件.類名的方式來獲取）
js作為入口，管理資源具有天然優勢（html，css本身是無法管理模組和資源的）
將元件的結果、樣式、行為封裝到一起，增強元件內聚（減少**耦合）
可以做更多的處理（webpack，使用css modules 解決了命名的衝突問題）
[!note]將css解析成抽象語法樹(ast樹)postcss是乙個通過js外掛程式轉換樣式表的工具，它本身並不是一門新的css語言，而是乙個平台或者是生態心態，提供外掛程式擴充套件服務即js api，開發者可以根據這些介面，定製開發外掛程式，
目前比較流行的外掛程式工具如：autoprefixer 、stylelint 、cssnano。
將ast樹」傳遞」給任意數量的外掛程式處理
將處理完畢的ast樹重新轉換成字串
source string → tokenizer → parser → ast → processor → stringifier
5.2.1 tokenizer
[!note]舉個例子：將源css字串進行分詞
.classname
通過tokenizer後結果如下：
[
["word", ".classname", 1, 1, 1, 10]
["space", " "]
["", "}", 1, 26]
]
const token = [
// token 的型別，如word、space、comment
'word',
// 匹配到的詞名稱
'.classname',
// 代表該詞開始位置的row以及column，但像 type為`space`的屬性沒有該值
1, 1,
// 代表該詞結束位置的row以及column，
1, 10
]
[!note]經過tokenizer之後，需要parser將結果初始化為ast
this.root = ", hasbom: false, id: ""},
start: ,
end:
},raws:
nodes // 子元素
}
經過ast之後，postcss提供了大量js api給外掛程式用
5.2.4 stringifier
外掛程式處理後，比如加瀏覽器字首，會被重新stringifier.stringify為一般css。
前端知識體系 CSS相關 CSS基礎知識強化
第一優先順序 無條件優先的屬性只需要在屬性後面使用 important。它會覆蓋頁面內任何位置定義的元素樣式。ie6支援上有些bug 第二等 id選擇器，如 header，權值為0100.第三等 類選擇器 如 bar，權值為0010.第四等 型別 標籤 選擇器和偽元素選擇器，如 div first ...
web前端 css知識體系 初學者
1 選擇器 常用的選擇器有類選擇器 標籤選擇器 id選擇器 偽類選擇器 屬性選擇器等。css權重即優先順序順序是 內聯樣式 id選擇器 偽類選擇器 屬性選擇器 類選擇器 標籤選擇器 需要特別注意的是，important 會覆蓋所有樣式規則，即 important 的優先順序最高。2 定位 定位有相對...
css知識體系 flexbox模型
flexbox 模型的產生主要是為給布局 對齊和容器內的空間分配提供乙個更有效的方法，即使尺寸未知或是動態改變的 flex，收縮，彈性 就是為此命名 flex布局使得容器能夠改變子元素的寬高來更好的填充可用空間，它既可以擴大子元素填充可用空間也可以收縮以防止溢位。最重要的是，相對於傳統的規則布局 b...