RoleTang's Blog

css工程化

4/12/2022

原始书写css样式书写带来的问题。

  1. 开发体验问题：无法支持嵌套等。

  2. 样式污染问题：同样的类名，可能后者会覆盖前者。

    // a.css
.container {
  color: red;
}

// b.css
// 很有可能覆盖 a.css 的样式！
.container {
  color: blue;
}

  3. 浏览器兼容问题：对于不同的浏览器，需要添加不同的前缀来兼容不同的浏览器和版本。如-webkit,-o,-moz，也意味着一个样式需要多种冗余代码。

  4. 打包产物体积过大问题，会产生很多冗余代码。

解决方案

  1. CSS 预处理器：主流的包括Sass/Scss、Less和Stylus。这些方案各自定义了一套语法，让 CSS 也能使用嵌套规则，甚至能像编程语言一样定义变量、写条件判断和循环语句，大大增强了样式语言的灵活性，解决原生 CSS 的开发体验问题。
  2. CSS Modules：能将 CSS 类名处理成哈希值，这样就可以避免同名的情况下样式污染的问题。
  3. CSS 后处理器PostCSS，用来解析和处理 CSS 代码，可以实现的功能非常丰富，比如将 px 转换为 rem、根据目标浏览器情况自动加上类似于--moz--、-o-的属性前缀等等，它也类似于babel，可以做一些兼容性的处理。
  4. CSS in JS 方案，主流的包括emotion、styled-components等等，顾名思义，这类方案可以实现直接在 JS 中写样式代码，基本包含CSS 预处理器和 CSS Modules 的各项优点，非常灵活，解决了开发体验和全局样式污染的问题。
  5. CSS 原子化框架，如Tailwind CSS、Windi CSS，通过类名来指定样式，大大简化了样式写法，提高了样式开发的效率，主要解决了原生 CSS 开发体验的问题。

Less