UI 组件库的 CSS 架构 ​

🌟 WHAT ​

对于复杂前端项目的开发，优秀的 CSS 的架构可以减少样式冲突，减少开发者的

🌟 HOW ​

以下是一些常用的 CSS 规范，但是大型项目通常会同时采用好几种结合的方式

Baseline 基础型 ​

将所有样式规则放在同一个文件内

优点：简单直接、快速

缺点：但随着业务增长面临冲突和难以维护的问题

Module 模块化 ​

将样式表分成模块导入项目中，例如 Vue 的 scoped style 和 React 的 CSS module 和 css-in-js

优点：永不冲突，有助于模块代码的组织维护

缺点：重复的样式代码无法抽象，增加相似模块的开发成本，后期容易体积臃肿

BEM ​

块+元素+修饰符的命名规范

命名层级为{块BLOCK}__{元素ELEMENT}--{修饰符MODIFIER}

优点：有助于解决样式冲突，以及嵌套过深导致后期的优先级处理问题

缺点：和模块化相似的缺点，但是可以通过预编译抽离公共样式

ACSS ​

ACSS 模式几乎是一个样式属性就对应一个类名，tailwindcss推崇的理念，优点是复用性很强，维护成本很低，例如：d-flex, m-10, w-20 等。

优点：颗粒度很细，增加了代码的复用程度，对大型项目可以减少体积

缺点：需要学习对应的规范，不直观，小项目可能需要借助工程化做 Tree Shaking

SMACSS ​

可扩展和模块化的 CSS

SMACSS 采用了样式的分层结构，大致有 7 层

1. Settings 层：通用样式变量，如颜色、尺寸

2. Tools 层：通用工具函数，如 mixins、function

3. Generic 层：通用基础样式，一般用于统一各个浏览器的基础样式，例如 normalize、resets 库

4. Base 层：对某些全局使用的元素进行通用的定制化样式，例如 p 标签、ul 标签

5. Objects 层：使用 OOCSS 的地方，某些结构与样式分离的专用类

6. Components 层：具体的组件，对应到组件库的每一个组件

7. Trumps 层：重写某些样式，只会影响到最具体的某一小块 DOM 元素

优点：用于大型项目中做分层提高可维护性

缺点：增加了样式的复杂度，且样式和组件分离增加了维护成本