SMACSS的分类方法

SMACSS（Scalable and Modular Architecture for CSS）是一种CSS代码组织和分类方法论，由Jonathan Snook提出。它通过将样式规则划分为特定类别，帮助开发者构建可维护、可扩展的CSS架构。以下是SMACSS的核心分类及其实现细节。

基础规则（Base Rules）

基础规则定义了HTML元素的默认样式，通常针对标签选择器（如body、h1、a等）。这些规则不包含类或ID选择器，仅设置全局默认值。例如：

/* 基础规则示例 */
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

a {
  color: #0066cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

基础规则的特点：

1. 使用元素选择器而非类选择器
2. 避免使用!important
3. 通常包含重置样式（如margin: 0）

布局规则（Layout Rules）

布局规则定义页面的大尺度结构，如头部、侧边栏、网格系统等。SMACSS建议使用l-前缀标识布局类名。例如：

/* 布局规则示例 */
.l-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.l-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.l-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

布局组件的特点：

1. 可能包含width、float、position等属性
2. 通常不直接设置装饰性样式（如颜色）
3. 使用语义化的命名前缀（如l-）

模块规则（Module Rules）

模块是页面中可复用的独立组件，如导航栏、卡片、按钮等。模块应当独立于布局存在，命名时不需要特定前缀。例如：

/* 模块规则示例 */
.card {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 15px;
  background: white;
}

.card__title {
  font-size: 1.2em;
  margin-bottom: 10px;
}

.card--featured {
  border-color: #ff9900;
  box-shadow: 0 0 8px rgba(255, 153, 0, 0.3);
}

模块的命名约定：

• 块元素：.module
• 子元素：.module__child
• 修饰符：.module--variant

状态规则（State Rules）

状态规则描述模块或布局在特定状态下的样式变化，通常使用is-前缀。状态样式可能通过JavaScript动态添加/移除。例如：

/* 状态规则示例 */
.is-active {
  background-color: #e6f7ff;
  border-left: 3px solid #1890ff;
}

.is-hidden {
  display: none;
}

.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

状态规则的特点：

1. 可以覆盖其他规则
2. 通常与JavaScript交互
3. 可能使用!important（在必要时）

主题规则（Theme Rules）

主题规则定义网站的视觉主题，通常通过覆盖默认样式实现。SMACSS建议使用theme-前缀。例如：

/* 主题规则示例 */
.theme-dark {
  background-color: #1a1a1a;
  color: #f0f0f0;
}

.theme-dark .card {
  background-color: #2d2d2d;
  border-color: #444;
}

主题实现方式：

1. 通过类名切换（如body.theme-dark）
2. 使用CSS变量动态控制
3. 可能配合媒体查询实现暗黑模式

代码组织实践

SMACSS推荐按类别分文件组织代码，例如：

styles/
├── base/
│   ├── _reset.css
│   └── _typography.css
├── layout/
│   ├── _grid.css
│   └── _header.css
├── modules/
│   ├── _buttons.css
│   └── _cards.css
├── states/
│   └── _ui-states.css
└── themes/
    └── _dark-mode.css

命名约定示例

结合BEM的改进命名方案：

/* 模块 + 子元素 + 状态 */
.search-form {}
.search-form__input {}
.search-form__button {}
.search-form__button--disabled {}

/* 布局 + 状态 */
.l-sidebar {}
.l-sidebar.is-collapsed {}

/* 主题覆盖 */
.theme-winter .search-form {
  background-color: #f0f9ff;
}

与预处理器结合

在Sass/Less中应用SMACSS：

// _variables.scss
$color-primary: #1890ff;

// _mixins.scss
@mixin card-variant($border-color) {
  border-color: $border-color;
  box-shadow: 0 0 8px rgba($border-color, 0.3);
}

// modules/_card.scss
.card {
  &__title { font-size: 1.2em; }
  &--featured { @include card-variant(#ff9900); }
}

响应式设计策略

SMACSS推荐将媒体查询与模块放在一起：

/* 直接在模块中定义响应式 */
.news-card {
  width: 100%;
}

@media (min-width: 768px) {
  .news-card {
    width: 50%;
  }
}

替代方案：创建单独的响应式布局模块

.l-grid--2cols {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 992px) {
  .l-grid--3cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

性能优化建议

1. 避免深层嵌套选择器（如.sidebar ul li a）
2. 布局规则使用简写属性
3. 状态类名应放在选择器末尾（如.btn.is-active）
4. 主题变量使用CSS自定义属性：

:root {
  --color-primary: #1890ff;
  --color-bg: white;
}

.theme-dark {
  --color-bg: #1a1a1a;
}

.card {
  background: var(--color-bg);
}