css工程化概述
css的問題
類名衝突的問題
當你寫乙個css類的時候，你是寫全域性的類呢，還是寫多個層級選擇後的類呢？
你會發現，怎麼都不好
過深的層級不利於編寫、閱讀、壓縮、復用
過淺的層級容易導致類名衝突
一旦樣式多起來，這個問題就會變得越發嚴重，其實歸根結底，就是類名衝突不好解決的問題
重複樣式
這種問題就更普遍了，一些重複的樣式值總是不斷的出現在css**中，維護起來極其困難
primary
info
warn
error
success
如果有更多的顏色，都是從這些色調中自然變化得來，可以想象，這些顏色會到處充斥到諸如背景、文字、邊框中，一旦要做顏色調整，是乙個非常大的工程
css檔案細分問題
在大型專案中，css也需要更細的拆分，這樣有利於css**的維護。
比如，有乙個做輪播圖的模組，它不僅需要依賴js功能，還需要依賴css樣式，既然依賴的js功能僅關心輪播圖，那css樣式也應該僅關心輪播圖，由此類推，不同的功能依賴不同的css樣式、公共樣式可以單獨抽離，這樣就形成了不同於過去的css檔案結構：檔案更多、拆分的更細
而同時，在真實的執行環境下，我們卻希望檔案越少越好，這種情況和js遇到的情況是一致的
因此，對於css，也需要工程化管理
從另乙個角度來說，css的工程化會遇到更多的挑戰，因為css不像js，它的語法本身經過這麼多年並沒有發生多少的變化（css3也僅僅是多了一些屬性而已），對於css語法本身的改變也是乙個工程化的課題
如何解決
這麼多年來，官方一直沒有提出方案來解決上述問題
一些第三方機構針對不同的問題，提出了自己的解決方案
解決類名衝突
一些第三方機構提出了一些方案來解決該問題，常見的解決方案如下：
命名約定
即提供一種命名的標準，來解決衝突，常見的標準有：
bemoocss
amcss
smacss
其他css in js
這種方案非常大膽，它覺得，css語言本身幾乎無可救藥了，乾脆直接用js物件來表示樣式，然後把樣式直接應用到元素的style中
這樣一來，css變成了乙個乙個的物件，就可以完全利用到js語言的優勢，你可以：
通過乙個函式返回乙個樣式物件
把公共的樣式提取到公共模組中返回
應用js的各種特性操作物件，比如：混合、提取、拆分
更多的花樣
這種方案在手機端的react native中大行其道
css module
非常有趣和好用的css模組化方案，編寫簡單，絕對不重名
具體的課程中詳細介紹
解決重複樣式的問題
css in js
這種方案雖然可以利用js語言解決重複樣式值的問題，但由於太過激進，很多習慣寫css的開發者編寫起來並不是很適應
預編譯器
有些第三方搞出一套css語言的進化版來解決這個問題，它支援變數、函式等高階語法，然後經過編譯器將其編譯成為正常的css
這種方案特別像構建工具，不過它僅針對css
常見的預編譯器支援的語言有：
less
sass
解決css檔案細分問題
這一部分，就要依靠構建工具，例如webpack來解決了
利用一些loader或plugin來打包、合併、壓縮css檔案
css工程化面試題
1.如何解決css模組化的問題 less sass等css預處理器 postcss外掛程式 webpack處理css 2.postcss可以做什麼？其取決於外掛程式可以做什麼 autoprefixer cssnext prescc等相容性處理 import模組合併 css語法檢查，相容性檢查 壓縮檔...
前端工程化
為什麼出現了前端工程化？09年之前，我們學習的css，div，js只是對頁面設計進行乙個打輔助的功能，當時只能勉強的成為頁面設計師，為什麼會出現前端工程師 1.突然間前端的需求逐漸增多，使用者對介面的要求越來越高，前端範疇越來越大。2.前後端總是保持一致才能進行開發，不能分開開發，提出前端工程化，也...
前端工程化
一 什麼是前端工程化 根據業務特點，將前端開發流程規範化 標準化 包括開發流程 技術選型，規範，構建發布等用於提公升前端工程師開發效率和 質量，提高產品的質量。實現前端工程化的目的 就是通過流程規範 自動化工具來提公升前端的開發效率 效能 質量 多人協作能力以及開發體驗。前端工程化體系分為 元件化 ...