样式方案

工程化
1.1k 词

样式方案

传统的CSS书写存在许多弊端，如下：

  • 开发体验欠佳，样式不允许嵌套，传统的后代选择器等等比较繁琐
  • 样式污染问题，需要严格考虑选择器命名和权重，避免样式污染和覆盖
  • 浏览器兼容性问题，需要手动加上-moz-、-webkit、-ms-、-o-等
  • 打包后的代码体积问题

为了解决这些弊端，社区中诞生了不少方案，常见的有五类：

  1. css预处理器，如scss、less、和Stylus。这些方案都有自己的一套语法，让CSS允许使用嵌套规则、变量、函数、条件判断、循环等等，大大的增强了样式的灵活性。
  2. css modules，能够将CSS类名处理成哈希值，这样就可以避免同名的情况下的样式污染。如在vite中配置的:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// index.css -> index.module.css
css: {
    modules: {
      // 一般我们可以通过 generateScopedName 属性来对生成的类名进行自定义
      // 其中，name 表示当前文件名，local 表示类名
      generateScopedName: "[name]__[local]___[hash:base64:5]"
    },
    preprocessorOptions: {
      // 省略预处理器配置
    }
    
    // 产物： index-module_header_3qxGt

  }
  1. css后处理器，PostCSS就是常用的后处理器工具，他可以用来解析和处理CSS代码，从而实现非常丰富的功能。如
  • px 转 rem
  • 打包产物自动加上浏览器前缀
  1. css in js，主流包括emotion、style-components等等。顾名思义，这种方案允许在JS中书写CSS。
1
2
3
4
5
6
7
8
9
10
11
12
13
/* 以 emotion 为例*/
//第一种:String Styles(以模板字符串的方式去写样式)(推荐)
const style=css`
    width:200px;
    height:50px;
    background:red
`
//第二种:Object Styles(以对象的方式去写样式)
const style2=css({
    width:200,
	height:50,
	background:'red'
})
  1. 原子化css ，如tailwind CSS、windi CSS、UnoCSS等，通过类名来细分具体的样式，大大地简化了样式写法，提高了开发效率，主要解决了开发体验和打包体积的问题。
1
<div class="w-4 h-4 bg-pink-200">盒子</div>
留言