前端解决方案汇总

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