SMACSS，全称为“Scalable and Modular Architecture for CSS”。提供一个分类系统和一套指导方针，用于组织大型项目的 CSS 代码，提高整个项目 CSS 的可预测性、可维护性和扩展性。
分类系统
把样式系统划分为五个具体类型。
Base 基础：定义元素的默认样，为项目提供一致的基础外观。
- 只使用元素选择器、伪类选择器、属性选择器、后代选择器、子选择器。
- 避免使用
!important和类选择器。
Layout 布局：定义页面的骨架结构，构建页面的整体框架。
- 通常使用以
l-或layout-为前缀的类名（可选但推荐，用于清晰区分）。 - 样式主要涉及宽度、浮动、清除浮动、定位、显示属性、内外边距（布局相关）、Flexbox 或 Grid 属性。
Module 模块：核心和主题，可复用的、独立的组件。构建页面的具体内容快。
- 模块名通常使用单一类名（如
.media,.card,.btn,.tabs）。 - 模块的子元素使用后代选择器（
.module-name > child或.module-name-child）。推荐使用子选择器>限制范围。避免使用元素选择器（如.card div），使用类选择器（如.card-content）。 - 模块内部避免使用 ID 选择器。
- 模块应尽可能独立于其所在的布局上下文。
State 状态：描述模块或布局在特定状态下的样式变化。
- 通常使用以
is-、has-或s-为前缀的类名（如.is-active,.is-hidden,.has-error,.is-loading)。 - 状态类通常通过 JavaScript 动态添加/移除。
- 状态样式可以覆盖任何 Base、Layout 或 Module 的样式。它们通常具有更高的优先级（可能使用
!important，尤其是在覆盖第三方库时，但应谨慎使用）。
Theme 主题：可选的视觉外观层，实现主题更换。
- 通常使用以
theme-为前缀的类名。
指导方针
-
深度限制： 建议选择器嵌套深度不超过 2-3 层（例如 .module > .child 或 .module-child）。避免 .layout .module .child .grandchild 这样的深层次选择器。
-
最小化特异性： 优先使用类选择器。避免过度依赖 ID 选择器（特异性过高，难以覆盖）。在 State 层才考虑使用 !important（有节制地）。
-
命名约定： 强烈推荐使用命名空间前缀（l- 表示 Layout, is- 表示 State）来清晰区分类别，提高代码可读性和可维护性。
