13.3 CSS规范

13.3.1 书写规范

stylelint

13.3.2 引入方案

基于细粒度划分：细粒度由小致大（细粒度越大，灵活性越低、维护性越高）

1. 行内方案

<div style="{ borderRadius: '0.5rem', padding: '1rem' }"> Click </div>

优点：简单直观，便于修改
缺点：权重高无法利用层叠和继承特性、HTML代码冗长、无法复用
使用场景：适合小规模项目或快速原型开发

2. 原子化方案

<div class="rounded-lg p-4 mr-2"> Click </div>

优点：没有命名负担、高内聚低耦合复用灵活
缺点：类名记忆成本高、无语义可读性差、HTML代码冗长
使用场景：注重样式统一、代码体积、高性能、高扩展、复用灵活的场景

3. 类方案

<div class="button button--primary"> Click </div>

优点：有语义可读性好，易维护，易扩展
缺点：命名负担高，复用性一般 使用场景：注重高度复用、统一维护的场景

4. 组件化方案

<Button> Click </Button>

优点：代码结构清晰、可复用性较高，易于维护
缺点：灵活性差、扩展性差
使用场景：注重组件级复用、统一维护的场景

组件：组件化方案，命名规则采用有BEM方案
公共样式：类方案，命名规则采用有BEM方案
框架样式：类方案，命名规则采用有BEM方案
业务代码：原子化方案（unocss等）