🏗️ 第十四章：CSS 架构与维护

构建可维护、可扩展的 CSS 代码库

14.1 命名方法论：BEM (Block Element Modifier)

            BEM 是一种流行的 CSS 命名方法论，通过清晰的命名规则提高代码的可维护性。
        

基本语法

/* Block - 独立的功能块 */
.block {}

/* Element - 块内的元素 */
.block__element {}

/* Modifier - 块或元素的变体 */
.block--modifier {}
.block__element--modifier {}

示例

/* 按钮组件 */
.btn {
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.btn--primary {
    background: #3498db;
    color: white;
}

.btn--large {
    padding: 15px 30px;
    font-size: 16px;
}

/* 卡片组件 */
.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
}

.card__title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.card__content {
    line-height: 1.6;
}

.card--featured {
    border-color: #3498db;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.1);
}

BEM 的优势

清晰的命名规则，提高代码可读性
避免选择器嵌套过深
减少样式冲突
提高代码可维护性
便于团队协作

14.2 其他方法论简介

OOCSS (Object-Oriented CSS)

将样式抽象为可重用的对象，强调分离结构和样式。

/* 结构 */
.box {
    width: 200px;
    height: 200px;
    padding: 20px;
}

/* 样式 */
.bg-blue {
    background: #3498db;
}

.rounded {
    border-radius: 8px;
}

SMACSS (Scalable and Modular Architecture for CSS)

将 CSS 分为 5 个类别：

Base - 基础样式（重置、默认样式）
Layout - 布局样式
Module - 模块化组件
State - 状态样式（如 :hover, :active）
Theme - 主题样式

ITCSS (Inverted Triangle CSS)

按照特异性从低到高组织 CSS：

Settings (变量、配置)

Tools (混合宏、函数)

Generic (重置、 normalize)

Elements (HTML 元素默认样式)

Objects (布局对象)

Components (组件)

Utilities (工具类)

14.3 原生 CSS 嵌套语法

            原生 CSS 现在支持嵌套语法，就像 Sass/Less 一样，使代码更加清晰。
        

基本语法

.nav {
    display: flex;
    gap: 20px;
    
    .nav__item {
        padding: 10px;
        
        a {
            text-decoration: none;
            color: #333;
            
            <span class="selector":hover>
                color: #3498db;
            
        }
    }
}

嵌套的优势

减少重复代码
提高代码可读性
更好的代码组织
减少命名冲突

14.4 代码拆分与按需加载

文件结构

/* 推荐的文件结构 */
/css
  /base
    - reset.css
    - normalize.css
    - typography.css
  /components
    - button.css
    - card.css
    - nav.css
  /layout
    - grid.css
    - header.css
    - footer.css
  /utilities
    - spacing.css
    - colors.css
    - typography.css
  /themes
    - light.css
    - dark.css
  - main.css /* 主入口文件 */

按需加载

使用 @import 或构建工具实现按需加载：

/* main.css */
@import 'base/reset.css';
@import 'base/typography.css';
@import 'layout/grid.css';
@import 'components/button.css';
@import 'components/card.css';

14.5 工具链

PostCSS

PostCSS 是一个 CSS 处理工具，可以使用插件扩展 CSS 功能。

Autoprefixer

自动添加浏览器前缀，确保样式在不同浏览器中兼容。

CSS Minification

压缩 CSS 文件，减少文件大小，提高加载速度。

常用工具

工具	用途
PostCSS	CSS 处理工具
Autoprefixer	添加浏览器前缀
CSSNano	CSS 压缩
Stylelint	CSS 代码检查
Prettier	代码格式化

实战案例

BEM 组件

/* 导航组件 */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #f8f9fa;
}

.nav__logo {
    font-size: 24px;
    font-weight: bold;
    color: #3498db;
}

.nav__menu {
    display: flex;
    gap: 20px;
}

.nav__item {
    list-style: none;
}

.nav__link {
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
}

.nav__link:hover {
    color: #3498db;
}

.nav--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

文件结构组织

/* base/reset.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* components/button.css */
.btn {
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn--primary {
    background: #3498db;
    color: white;
}

.btn--secondary {
    background: #95a5a6;
    color: white;
}

动手练习

练习 1：BEM 命名

使用 BEM 命名创建一个卡片组件
添加不同的修饰符（如 featured、large）
确保命名清晰且符合 BEM 规范

练习 2：文件结构

创建一个完整的 CSS 文件结构
按照功能拆分 CSS 文件
使用 @import 组合文件

练习 3：原生 CSS 嵌套

使用原生 CSS 嵌套语法创建一个导航组件
确保嵌套层级合理
测试嵌套语法的兼容性

← 上一章：高级视觉效果下一章：性能优化与调试 →