前端解決方案彙總

css方案

現行的主流的 CSS 方案：

跟 JS 徹底解耦，靠預處理器和好比 BEM 這樣的規範來保持可維護性，偏傳統。
CSS Modules，依然是 CSS，可是經過編譯來避免 CSS 類名的全局衝突。
各種 CSS-in-JS 方案，React 社區爲表明，比較激進。
Vue 的單文件組件 CSS，或是 Angular 的組件 CSS（寫在裝飾器裏面），一種比較折中的方案。
在比較這幾種 CSS 方案時要明確場景的問題，在傳統靜態界面使用傳統的 CSS 方案沒什麼問題，可是在組件化，單頁應用的場景下傳統的 CSS 書寫方式會有維護的問題，使用 BEM 實際上是維護和組件平行的命名方式，思惟負擔比較重。

傳統 css 的一些問題

• 做用域
  組件對應的 CSS 不但願污染全局，CSS Modules 和 inline styles 等能夠解決。
• Critical CSS
  首屏 CSS 所需 CSS 不須要其餘頁面的 CSS，CSS-in-JS 解決該方案比較好。
• Atomic CSS
  儘量把 CSS 規則壓縮的更小，使用原子類。
• 分發複用
  CSS-in-JS 能夠發包到 NPM 複用，由於所有是 Javascript，可是如今 webpack 能夠作到這一點，沒必要要 CSS-in-JS。
• 跨平臺複用
  也能夠將 CSS 編譯爲 Javascript 能夠複用。

構建方案

構建工具突飛猛進，前端的能力愈來愈強，WEB 的需求也愈來愈複雜，對前端的要求也愈來愈高，面對複雜度不一樣的需求，須要的工具也不一樣。

grunt 和 gulp 在絕大多數狀況下可使用 npm script 替代，因此用的人比較少。

大公司裏怎樣開發和部署前端代碼？ - 張雲龍的回答

Rollup 在打包效率和 tree shaking 方面作的比 webpack 好，React 也採用 Rollup 打包。