前端解决方案汇总

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 打包。