CSS 工程化
CSS 工程化主要体现在以下几个方面：
- 模块化：模块化是将 CSS 代码分解成独立的、可重用的模块，从而提高代码的可维护性和可读性。通常，每个模块都关注一个特定的功能或组件的样式。这有助于减少样式之间的依赖和冲突，也使得找到和修改相关样式变得更容易。模块化的实现可以通过原生的 CSS 文件拆分（如使用扩展名
.module.css），或使用预处理器（如 Sass 的 @import 和 @use）的功能来实现。 - 命名规范：为 CSS 类名和选择器定义一致的命名规范有助于提高代码的可读性和可维护性。以下是一些常用的命名规范：
- BEM（Block，Element，Modifier）：BEM 是一种命名规范，将类名分为三个部分：块（Block）、元素（Element）和修饰符（Modifier）。这种方法有助于表示组件之间的层级关系和状态变化。如 navigation__link--active。
- OOCSS（面向对象的 CSS）：OOCSS 旨在将可重用的样式划分为独立的“对象”，从而提高代码的可维护性和可扩展性。这种方法强调将结构（如布局）与皮肤（如颜色和字体样式）分离。这样可以让你更容易地复用和组合样式，创建更灵活的 UI 组件。
- SMACSS（可扩展和模块化的 CSS 架构）：是一种 CSS 编写方法，旨在提高 CSS 代码的可维护性、可扩展性和灵活性。SMACSS 将样式分为五个基本类别：Base、Layout、Module、State 和 Theme。这有助于组织 CSS 代码并使其易于理解和修改。
- Base：包含全局样式和元素默认样式，例如：浏览器重置、全局字体设置等。
- Layout：描述页面布局的大致结构，例如：页面分区、网格系统等。
- Module：表示可重用的 UI 组件，例如：按钮、卡片、表单等。
- State：表示 UI 组件的状态，例如：激活、禁用、隐藏等。通常，状态类会与其他类一起使用以修改其显示。
- Theme：表示 UI 组件的视觉样式，例如：颜色、字体等。通常，主题类用于支持多个主题或在不同上下文中使用相同的组件。
- 预处理器：CSS 预处理器（如 Sass、Less 或 Stylus）是一种编程式 CSS 语言，可以在开发中提供更高级的功能，如变量、嵌套、函数和混合等。预处理器将这些扩展语法编译为普通的 CSS 代码，以便浏览器能够解析。
- 后处理器：CSS 后处理器（如 Postcss）可以在生成的 CSS 代码上执行各种操作，如添加浏览器前缀、优化规则和转换现代 CSS 功能以兼容旧浏览器等。它通常与构建工具（例如 Webpack）一起使用，以自动化这些任务。
- 代码优化：代码优化旨在减少 CSS 文件的大小、删除无用代码和提高性能。一些常见的优化工具包括：
- CSSO：CSSO 是一个 CSS 优化工具，可以压缩代码、删除冗余规则和合并相似的声明。
- PurgeCSS：PurgeCSS 是一个用于删除无用 CSS 规则的工具。它通过分析项目的 HTML、JS 和模板文件来检测实际使用的样式，并删除未使用的样式。
- clean-css：clean-css 是一个高效的 CSS 压缩工具，可以删除空格、注释和重复的规则等，以减小文件大小。