CSS方法论（OOCSS、SMACSS）

OOCSS和SMACSS是CSS架构领域的两种主流方法论，为大型项目提供样式组织方案。

OOCSS（面向对象的CSS）

核心原则

分离结构与外观 将视觉样式抽象为可复用的类。

CSS

/* 结构 */
.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
}

/* 外观 */
.btn-primary {
  background: #007bff;
  color: white;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-outline {
  background: transparent;
  border: 1px solid #007bff;
  color: #007bff;
}

分离容器与内容 样式不应依赖容器，保持组件独立性。

CSS

/* 错误：依赖容器 */
.sidebar .widget-title {
  font-size: 16px;
}

/* 正确：独立于容器 */
.widget-title {
  font-size: 16px;
}

实际应用

HTML

<div class="media media--large">
  <img class="media__img media__img--circle" src="photo.jpg">
  <div class="media__body">
    <h3 class="media__title">标题</h3>
    <p class="media__text">内容描述</p>
  </div>
</div>

CSS

/* 媒体对象模式 */
.media {
  display: flex;
  align-items: flex-start;
}

.media__img {
  margin-right: 16px;
}

.media__img--circle {
  border-radius: 50%;
}

.media__body {
  flex: 1;
}

/* 尺寸修饰 */
.media--large {
  padding: 24px;
}

SMACSS（可扩展和模块化的CSS架构）

分类体系

类型	说明	命名约定	示例
Base	基础样式	元素选择器	`body`, `a`, `input`
Layout	布局样式	`l-`前缀	`l-header`, `l-sidebar`
Module	模块样式	无前缀	`.card`, `.nav`
State	状态样式	`is-`前缀	`.is-active`, `.is-hidden`
Theme	主题样式	`theme-`前缀	`.theme-dark`

Base（基础样式）

CSS

/* 重置和默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: #333;
}

a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

Layout（布局样式）

CSS

/* 布局容器 */
.l-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.l-grid {
  display: grid;
  gap: 24px;
}

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

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

.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

.l-sidebar {
  width: 280px;
  flex-shrink: 0;
}

.l-main {
  flex: 1;
  min-width: 0;
}

Module（模块样式）

CSS

/* 模块独立封装 */
.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card__header {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.card__title {
  font-size: 18px;
  font-weight: 600;
}

.card__body {
  padding: 16px;
}

.card__footer {
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 0 0 8px 8px;
}

State（状态样式）

CSS

/* 状态类独立定义 */
.is-active {
  font-weight: 600;
  color: #007bff;
}

.is-hidden {
  display: none !important;
}

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

.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.is-expanded {
  max-height: none;
}

Theme（主题样式）

CSS

/* 主题覆盖 */
.theme-dark {
  --bg-primary: #1a1a1a;
  --text-primary: #ffffff;
}

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

.theme-dark .card__footer {
  background: #1a1a1a;
}

方法论对比

特性	OOCSS	SMACSS
核心思想	面向对象、复用优先	分层架构、模块化
命名约定	无强制前缀	类型前缀（l-、is-等）
学习曲线	较平缓	需要理解分层
适用场景	中小型项目	大型复杂项目
文件组织	按组件	按类型分目录

目录结构建议

text

styles/
├── base/
│   ├── _reset.scss
│   └── _typography.scss
├── layout/
│   ├── _grid.scss
│   └── _header.scss
├── modules/
│   ├── _card.scss
│   └── _nav.scss
├── states/
│   └── _states.scss
├── themes/
│   └── _dark.scss
└── main.scss

要点总结

OOCSS核心：分离结构与外观、分离容器与内容
SMACSS分层：Base、Layout、Module、State、Theme五层架构
命名约定：OOCSS灵活，SMACSS有前缀规范
选择依据：项目规模和团队习惯决定方法论选用
可结合使用：混合两种方法论优点

📝 发现内容有误？点击此处直接编辑