SMACSS

SMACSS（Scalable and Modular Architecture for CSS）：可扩展模块化CSS架构

简介
SMACSS（Scalable and Modular Architecture for CSS）是由 Jonathan Snook 提出的一种CSS代码组织和架构方法论，旨在通过模块化和分层分类的方式，使CSS更易于维护、扩展和优化。SMACSS 强调将样式规则划分为不同的类别，并遵循一致的命名约定，适用于大型项目和团队协作开发。

核心原则

1. 样式分类（5大类别）
   • Base（基础样式）：默认HTML元素样式（如body、h1、a）。
   • Layout（布局样式）：页面结构（如header、footer、网格系统）。
   • Module（模块样式）：可复用的UI组件（如.card、.button）。
   • State（状态样式）：动态状态（如.is-active、.is-hidden）。
   • Theme（主题样式）：颜色、字体等视觉主题（如.theme-dark）。
2. 命名约定
   • 布局（Layout）：使用l-前缀（如.l-header）。
   • 模块（Module）：直接命名（如.button、.modal）。
   • 状态（State）：使用is-或has-前缀（如.is-disabled）。
3. 模块化设计
   • 每个模块独立封装样式，避免全局污染。
   • 通过子模块或变体扩展功能（如.button.primary）。
4. 避免过度嵌套
   • 限制选择器嵌套深度（通常不超过2层）。
   • 减少CSS特异性（Specificity），提高可覆盖性。
5. 性能优化
   • 减少冗余代码，按需加载模块样式。
   • 使用预处理器（如Sass/Less）管理变量和混合。

适用场景

✅ 大型企业项目：需要长期维护和团队协作的代码库。
✅ 设计系统/组件库：模块化UI组件开发。
✅ 多主题应用：通过Theme层轻松切换视觉风格。
✅ 前端框架开发：如Bootstrap、Foundation的CSS结构参考了SMACSS。

总结

SMACSS 通过清晰的分类和命名规范，解决了大型项目中CSS难以维护的问题。它比OOCSS更结构化，比BEM更灵活，适合需要平衡可读性和扩展性的项目。尽管现代CSS-in-JS方案流行，SMACSS 的原则仍被许多团队用于管理传统CSS代码库。合理运用其分层思想，能显著提升开发效率和协作质量。