好的代码不只是能运行，而是让人一眼就能读懂、维护。CSS 书写规范是每一位前端工程师的必修课——它不只是风格偏好，更是团队协作的基础语言。

---

📑 目录

1. 为什么需要 CSS 规范？
2. 文件组织与编码规范
3. 代码格式规范
4. 属性书写顺序
5. 选择器规范
6. Class 命名规范
7. BEM 命名方法论
8. 常见命名速查表
9. 值与单位规范
10. CSS Reset 重置样式表
11. 浏览器私有前缀规范
12. 注释规范
13. 网站图标（favicon）
14. 工程化工具链
15. 规范速查手册
16. CSS 禅意花园：设计哲学与美学理念

---

1. 为什么需要 CSS 规范？

很多人在项目初期忽视 CSS 规范，直到项目膨胀到数千行样式、多人协作、维护困难时才后悔莫及。CSS 规范解决的不只是「好不好看」的问题：

没有规范的 CSS 项目：
├── 样式冲突频繁（.title 被全局污染）
├── 优先级混乱（到处写 !important）
├── 属性顺序随意（难以快速定位问题）
├── 命名无意义（.aaa .div1 .box2）
└── 无法维护（6 个月后看不懂自己写的代码）

有规范的 CSS 项目：
├── 样式隔离清晰（BEM / 模块化）
├── 优先级可预测（扁平化选择器）
├── 属性按逻辑分组（定位→盒模型→排版→视觉）
├── 命名语义化（.product-card__title--featured）
└── 可维护、可扩展（团队协同无障碍）

规范带来的核心收益：

维度	无规范	有规范
可读性	低，需要猜意图	高，一眼看懂
可维护性	改一处影响全局	局部改动可控
协作效率	风格各异，互相覆盖	统一风格，无缝衔接
性能	冗余代码多	简洁紧凑
调试效率	难以定位	快速排查

---

2. 文件组织与编码规范

2.1 文件编码声明

CSS 文件必须在第一行第一个字符处声明编码，且使用小写：

/* ✅ 推荐 */
@charset "UTF-8";

.container {
    width: 1190px;
}

/* ❌ 不推荐：@charset 不在首行 */
/* 文件注释 */
@charset "UTF-8";

/* ❌ 不推荐：大写 */
@CHARSET "UTF-8";

为什么必须是第一行？ 浏览器解析样式表时，编码声明必须优先于其他内容，否则 BOM 设置可能覆盖 @charset，导致中文乱码。

2.2 推荐的文件目录结构

project/
├── index.html
├── css/
│   ├── reset.css        # 重置样式（优先引入）
│   ├── base.css         # 全局基础样式（字体、颜色变量）
│   ├── layout.css       # 页面布局（版心、栅格）
│   ├── components/      # 组件样式
│   │   ├── button.css
│   │   ├── card.css
│   │   └── nav.css
│   └── pages/           # 页面级样式
│       ├── home.css
│       └── detail.css
├── images/
│   ├── sprites.png      # 精灵图
│   └── favicon.ico
└── js/
    └── main.js

2.3 引入顺序

<!-- 1. 重置样式（最先引入，消除浏览器默认差异）-->
<link rel="stylesheet" href="css/reset.css">

<!-- 2. 基础样式 -->
<link rel="stylesheet" href="css/base.css">

<!-- 3. 布局样式 -->
<link rel="stylesheet" href="css/layout.css">

<!-- 4. 组件/页面样式（最后引入，可覆盖前面） -->
<link rel="stylesheet" href="css/index.css">

---

3. 代码格式规范

3.1 展开格式 vs 紧凑格式

团队项目统一使用展开格式（Expanded），不使用紧凑格式：

/* ✅ 推荐：展开格式，每条属性独占一行 */
.nav-item {
    display: inline-block;
    width: 100px;
    height: 40px;
    color: #333;
}

/* ❌ 不推荐：紧凑格式，难以阅读和 diff */
.nav-item { display: inline-block; width: 100px; height: 40px; color: #333; }

3.2 空格规范

/* ✅ 规则：选择器与 { 之间有一个空格 */
.selector {
    /* ✅ 规则：属性名冒号后有空格，冒号前没有空格 */
    color: #333;
    
    /* ✅ 规则：逗号分隔的值，逗号后有空格 */
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    
    /* ✅ 规则：rgb/rgba 括号内不加空格 */
    background: rgba(0,0,0,.5);
    
    /* ✅ 规则：多值 box-shadow 逗号后加空格 */
    box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 2px 8px rgba(0,0,0,.05);
}

/* ❌ 错误示范 */
.selector{               /* 缺少空格 */
    color:#333;          /* 冒号后缺空格 */
    font-family:'Arial','Helvetica'; /* 逗号后缺空格 */
    background: rgba( 0, 0, 0, 0.5 ); /* 括号内多余空格 */
}

3.3 缩进规范

统一使用 4 个空格缩进（不使用 Tab，避免编辑器差异）：

/* ✅ 4空格缩进 */
.card {
    width: 300px;
    padding: 20px;
}

.card .card-title {
    font-size: 18px;
    font-weight: 700;
}

3.4 分号规范

每条属性声明末尾必须加分号，包括最后一条：

/* ✅ 推荐：每条属性末尾加分号 */
.box {
    width: 100px;
    height: 100px;  /* ← 最后一条也加分号 */
}

/* ❌ 不推荐：最后一条省略分号 */
.box {
    width: 100px;
    height: 100px   /* ← 虽然浏览器容忍，但不规范 */
}

为什么最后一条也要加分号？ CSS 压缩工具合并文件时，若最后一条缺少分号，会与下一个规则合并导致解析错误。

3.5 多选择器换行

多个选择器共用样式时，每个选择器独占一行：

/* ✅ 推荐：每个选择器独占一行 */
.btn-primary,
.btn-secondary,
.btn-danger {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
}

/* ❌ 不推荐：多选择器写在一行 */
.btn-primary, .btn-secondary, .btn-danger {
    display: inline-block;
}

3.6 大小写规范

选择器、属性名、属性值关键字全部使用小写字母（字符串值除外）：

/* ✅ 推荐 */
.nav-list {
    display: flex;
    background: #fff;
}

/* ❌ 不推荐 */
.NAV-LIST {
    DISPLAY: FLEX;
    BACKGROUND: #FFF;
}

---

4. 属性书写顺序

属性书写顺序是最容易被忽视却最影响代码可读性的规范。业界主流规范（Airbnb、京东 JDC、腾讯 AlloyTeam）均推荐按以下四大分组排列：

Positioning（定位）
    ↓
Box Model（盒模型）
    ↓
Typography（排版文字）
    ↓
Visual（视觉装饰）
    ↓
其他/CSS3（动画、变换等）

4.1 完整属性顺序示例

.declaration-order {
    /* ① Positioning — 定位（影响脱标，优先级最高，放最前）*/
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    /* ② Box Model — 盒模型（决定尺寸与布局）*/
    display: block;
    float: left;
    width: 200px;
    height: 100px;
    margin: 10px 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;

    /* ③ Typography — 排版文字 */
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    vertical-align: middle;

    /* ④ Visual — 视觉装饰 */
    background: #f5f5f5;
    background-image: url(../images/bg.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    opacity: 1;
    cursor: pointer;

    /* ⑤ CSS3 — 动画、变换等 */
    transition: all .3s ease;
    transform: translateX(0);
    animation: fadeIn .5s ease;
}

4.2 属性顺序的逻辑

排列逻辑：

• 定位放最前——它影响元素是否脱离文档流，是最强的「位置决定因素」
• 盒模型其次——决定元素占多大空间
• 排版再次——文字内容的呈现方式
• 视觉随后——颜色、背景、装饰效果
• CSS3 动画放最后——不影响布局，查阅时不优先

---

5. 选择器规范

5.1 选择器基本规则

/* ✅ 推荐 */
.nav-list { }          /* class 选择器 */
.nav-list li { }       /* 后代选择器 */
.nav-list > li { }     /* 子代选择器 */
input[type="text"] { } /* 属性选择器 */

/* ❌ 不推荐 */
* { }                  /* 通配符，性能差，尽量避免 */
#main { }              /* ID 选择器，优先级太高，不可复用 */
div.container { }      /* 标签+class 限定，冗余且降低复用性 */

5.2 嵌套层级控制

选择器嵌套不要超过 3 层，过深的选择器会导致优先级膨胀和性能下降：

/* ✅ 推荐：层级清晰，不超过3层 */
.nav { }
.nav-item { }
.nav-item.is-active { }

/* ❌ 不推荐：嵌套过深 */
.header .nav ul li a span {
    color: red;
}

5.3 避免使用 ID 选择器做样式

/* ❌ 不推荐：ID 优先级极高（0,1,0,0），难以覆盖 */
#header {
    background: #fff;
}

/* ✅ 推荐：用 class 替代，可复用，优先级可控 */
.page-header {
    background: #fff;
}

ID 选择器优先级为什么高？ CSS 优先级计算：!important > 行内 > ID(0,1,0,0) > class(0,0,1,0) > 标签(0,0,0,1)。一个 ID 选择器需要 256 个 class 才能覆盖，极易造成级联混乱。

5.4 关系选择器空格

/* ✅ 推荐：关系选择器前后各一空格 */
.parent > .child { }
.sibling + .next { }
.sibling ~ .general { }

/* ❌ 不推荐：无空格，难以区分 */
.parent>.child { }

---

6. Class 命名规范

6.1 命名基本原则

原则	说明	示例
语义化	名称应表达用途，不表达样式	.nav-primary ✅ .red-box ❌
小写字母	全部小写，避免大小写混用	.nav-item ✅ .NavItem ❌
连字符分隔	多单词用 - 连接（kebab-case）	.user-avatar ✅ .userAvatar ❌
简短但完整	不过度缩写，保留语义	.btn ✅ .s ❌ .navigation → .nav ✅
基于父级扩展	子模块在父名基础上扩展	.news-title、.news-body

6.2 反例与正例对比

/* ❌ Bad：无意义命名 */
.t { font-size: 14px; }
.abc { color: red; }
.aaa { display: flex; }
.div2 { margin: 10px; }
.box_new { padding: 20px; }

/* ✅ Good：语义化命名 */
.article-title { font-size: 14px; }
.alert-message { color: red; }
.flex-container { display: flex; }
.product-card { margin: 10px; }
.checkout-panel { padding: 20px; }

6.3 命名空间体系（大型项目推荐）

大型项目推荐引入命名空间前缀，一眼区分不同类型的 class：

/* 布局类：g- (grid/global) */
.g-wrap { max-width: 1190px; margin: 0 auto; }
.g-header { height: 80px; }
.g-sidebar { width: 240px; }

/* 模块类：m- (module) */
.m-nav { display: flex; }
.m-card { border-radius: 8px; }
.m-modal { position: fixed; }

/* 元件类：u- (unit/utility) */
.u-btn { display: inline-block; cursor: pointer; }
.u-clearfix::after { content: ""; display: block; clear: both; }
.u-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 状态类：is- / z- */
.is-active { color: #dd302d; }
.is-disabled { opacity: .5; pointer-events: none; }
.is-loading { cursor: wait; }

/* 功能/工具类：f- */
.f-left { float: left; }
.f-right { float: right; }
.f-hidden { display: none; }

/* JavaScript 钩子类：j-（仅供 JS 使用，不写样式）*/
.j-submit-btn { }   /* JS 通过此类绑定事件，不定义任何样式 */
.j-ajax-form { }

---

7. BEM 命名方法论

BEM 是目前最主流的 CSS 命名方法论，由俄罗斯 Yandex 团队提出，被 Vue UI 库、Element Plus、Bootstrap 等广泛采用。

7.1 BEM 三要素

Block（块）__Element（元素）--Modifier（修饰符）

概念	含义	连接符	示例
Block	独立的、可复用的组件	—	.card、.nav、.btn
Element	属于某个 Block 的子部分	__（双下划线）	.card__title、.nav__item
Modifier	Block 或 Element 的状态/变体	--（双连字符）	.btn--primary、.nav__item--active

7.2 BEM 实战示例

<!-- HTML 结构 -->
<div class="product-card">
    <img class="product-card__thumb" src="..." alt="">
    <div class="product-card__body">
        <h3 class="product-card__title">商品名称</h3>
        <p class="product-card__price product-card__price--discount">¥99</p>
        <button class="product-card__btn product-card__btn--primary">加入购物车</button>
    </div>
    <span class="product-card__badge product-card__badge--new">新品</span>
</div>

/* Block */
.product-card {
    position: relative;
    width: 240px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

/* Elements */
.product-card__thumb {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.product-card__body {
    padding: 12px 16px;
}

.product-card__title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-card__price {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-top: 8px;
}

/* Modifier：价格的折扣状态 */
.product-card__price--discount {
    color: #dd302d;
}

.product-card__btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Modifier：主色按钮 */
.product-card__btn--primary {
    background: #dd302d;
    color: #fff;
}

.product-card__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 12px;
}

/* Modifier：新品角标 */
.product-card__badge--new {
    background: #ff9800;
    color: #fff;
}

7.3 BEM 的好处

7.4 BEM 注意事项

/* ✅ Element 不要多层嵌套，只关联 Block */
.card__title { }      /* ✅ 正确 */
.card__body__title { } /* ❌ 错误：不能 Block__Element__Element */

/* ✅ Modifier 不单独使用，必须配合 Block 或 Element */
<div class="btn btn--primary">按钮</div>   /* ✅ */
<div class="btn--primary">按钮</div>       /* ❌ 缺少基础类 */

/* ✅ Modifier 描述状态，不描述视觉 */
.btn--disabled { }    /* ✅ 描述状态 */
.btn--red { }         /* ❌ 描述视觉，改变设计时需改 class 名 */

---

8. 常见命名速查表

8.1 页面结构命名

Class 名	含义
.wrap / .wrapper	最外层包裹容器
.container / .ct	版心容器（固定宽度、水平居中）
.header	页面头部区域
.body / .main	页面主体内容区
.footer	页面尾部区域
.aside / .sidebar	侧边栏
.content	主要内容区
.section	页面分区

8.2 导航与菜单命名

Class 名	含义
.navigation / .nav	导航区域
.nav-item	导航项
.nav-link	导航链接
.breadcrumbs	面包屑导航
.pagination	分页组件
.tabs	选项卡容器
.tab-item	选项卡项
.dropdown	下拉菜单

8.3 内容组件命名

Class 名	含义
.article	文章内容区
.card	卡片组件
.panel	面板组件
.media	媒体资源容器（图文混排）
.thumbnail	缩略图/头像
.banner	横幅广告
.ad	广告位
.carousel / .slider	轮播图

8.4 UI 元素命名

Class 名	含义
.button / .btn	按钮
.btn-primary	主要按钮（蓝/红）
.btn-secondary	次要按钮
.btn-danger	危险操作按钮
.input / .form-control	表单输入框
.label	标签文字
.badge	徽章/角标
.tag	标签贴
.tooltip	鼠标悬停提示
.popup / .popover	弹出气泡
.modal	模态框/弹窗
.overlay / .mask	遮罩层
.loading	加载中状态
.empty	空状态展示
.icon	图标
.avatar	用户头像

8.5 状态类命名

/* 通用状态类 */
.is-active    { }   /* 激活 / 选中 */
.is-disabled  { }   /* 禁用 */
.is-loading   { }   /* 加载中 */
.is-hidden    { }   /* 隐藏 */
.is-visible   { }   /* 显示 */
.is-open      { }   /* 展开（下拉/折叠） */
.is-closed    { }   /* 收起 */
.is-selected  { }   /* 被选择 */
.is-current   { }   /* 当前项 */
.has-error    { }   /* 有错误 */
.has-children { }   /* 有子项（树形菜单） */

---

9. 值与单位规范

9.1 数值简写规则

/* ✅ 去掉小数点前面的 0 */
.box { opacity: .5; }         /* 而非 0.5 */
.box { margin: .5em 1em; }    /* 而非 0.5em */

/* ✅ 0 值不加单位 */
.box { margin: 0; }           /* 而非 0px */
.box { padding: 10px 0 0; }   /* 而非 0px */

/* ✅ 简写冗余值 */
.box { margin: 5px 10px; }    /* 而非 5px 10px 5px 10px */
.box { padding: 0 20px; }     /* 而非 0px 20px 0px 20px */

9.2 颜色值规范

/* ✅ 颜色值使用小写，能简写的尽量简写 */
.box { color: #fff; }         /* 而非 #ffffff 或 #FFFFFF */
.box { color: #333; }         /* 而非 #333333 */
.box { color: #f60; }         /* 而非 #ff6600 */

/* ✅ 带透明度用 rgba，无透明度用十六进制 */
.box { color: rgba(0,0,0,.5); }       /* 半透明 */
.box { background: rgba(255,255,255,.9); } /* 半透明白底 */
.box { color: #333; }                 /* 不透明，用十六进制 */

/* ✅ CSS 变量统一管理颜色 */
:root {
    --color-primary:   #dd302d;
    --color-success:   #52c41a;
    --color-warning:   #faad14;
    --color-danger:    #f5222d;
    --color-text:      #333;
    --color-text-mute: #999;
    --color-border:    #e8e8e8;
    --color-bg:        #f5f5f5;
}

9.3 属性值引号

CSS 属性值需要引号时，统一使用单引号：

/* ✅ 推荐：单引号 */
.box {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background-image: url('images/bg.png');
    content: '';
}

/* ❌ 不推荐：双引号 */
.box {
    font-family: "PingFang SC";
}

9.4 常用单位说明

单位	含义	使用场景
px	像素，绝对单位	固定尺寸、边框、定位偏移
%	相对父元素	响应式宽高、定位偏移
em	相对当前字体大小	行高、间距（随字体缩放）
rem	相对根元素字体大小	移动端整体缩放
vw/vh	相对视口宽/高	全屏布局、移动端适配
fr	Grid 比例单位	CSS Grid 弹性分配

---

10. CSS Reset 重置样式表

不同浏览器对 HTML 元素有不同的默认样式（Chrome 与 Firefox 的 h1 字号、ul 缩进均不同），Reset 样式表的目的是消除这些差异，建立统一的基准线。

10.1 项目实用 Reset 样式表

这是经过多个项目验证的精简版重置样式，覆盖了最常见的浏览器默认样式问题：

@charset "UTF-8";

/* ===========================
   消除默认内外边距
   =========================== */
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, dl, dt, dd, ul, ol, li,
pre, form, fieldset, legend, button,
input, textarea, th, td {
    margin: 0;
    padding: 0;
}

/* ===========================
   列表去除默认样式
   =========================== */
ul, ol {
    list-style: none;
}

/* ===========================
   图片：块级化 + 去除旧版IE边框
   =========================== */
img {
    display: block;
    border: 0;
}

/* ===========================
   标题字体：恢复正常粗细，
   让开发者自行控制
   =========================== */
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: 400;
}

/* ===========================
   加粗、斜体：恢复正常
   =========================== */
b, strong {
    font-weight: 400;
}

i, em {
    font-style: normal;
}

/* ===========================
   下划线/删除线：去除默认
   =========================== */
u, ins, s, del {
    text-decoration: none;
}

/* ===========================
   表格：合并边框、去除间距
   =========================== */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ===========================
   表单元素：去除默认外轮廓
   =========================== */
input, button, select, textarea {
    outline: none;
}

10.2 Reset vs Normalize 的区别

对比	Reset（重置）	Normalize（标准化）
思路	清零所有默认样式	修复浏览器差异，保留有用默认值
体积	较小	较大（更全面）
后续工作	需要自己重新定义所有样式	在合理默认值基础上微调
适合场景	高度定制化设计稿还原	内容型网站、快速开发
代表	Eric Meyer’s Reset	normalize.css

/* ===========================
   版心容器（版心 = 页面内容区域的最大宽度容器）
   常见于电商、门户网站
   =========================== */
.container {
    width: 1190px;        /* 固定宽度 */
    margin-left: auto;    /* 水平居中 */
    margin-right: auto;
}

/* 响应式版心 */
.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;     /* 两侧内边距，防止内容贴边 */
}

10.3 现代项目推荐基础样式

/* 现代化基础样式，基于 Reset 之上 */
*, *::before, *::after {
    box-sizing: border-box;   /* 边框盒模型，更直觉 */
}

html {
    font-size: 16px;
    scroll-behavior: smooth;  /* 平滑滚动 */
}

body {
    font-family: 'PingFang SC', 'Microsoft YaHei',
                 -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    background: #fff;
    -webkit-font-smoothing: antialiased;     /* macOS 字体平滑 */
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* 图片自适应 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

---

11. 浏览器私有前缀规范

11.1 私有前缀顺序

CSS3 属性的浏览器私有前缀在前，标准写法放最后：

.box {
    /* 私有前缀：由旧到新，标准在最后 */
    -webkit-border-radius: 8px;   /* Safari/Chrome（旧） */
    -moz-border-radius: 8px;      /* Firefox（旧） */
    -o-border-radius: 8px;        /* Opera（旧） */
    -ms-border-radius: 8px;       /* IE（旧） */
    border-radius: 8px;           /* 标准写法（必须在最后）*/
}

为什么标准写法放最后？ 浏览器会按顺序读取属性，当浏览器支持标准属性时，用标准值覆盖前缀值；若浏览器不支持标准属性，则使用私有前缀值。反过来写会导致标准属性被覆盖。

11.2 常见需要前缀的属性

/* 弹性盒子（旧语法）*/
.flex-container {
    display: -webkit-flex;   /* Safari 旧版 */
    display: flex;
}

/* 变换 */
.box {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);       /* IE9 */
    transform: rotate(45deg);
}

/* 过渡 */
.box {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

/* 多行省略（至今仍需前缀）*/
.text-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

11.3 Autoprefixer 自动化

现代项目推荐使用 Autoprefixer 工具，根据目标浏览器范围自动添加前缀，无需手写：

// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')({
            overrideBrowserslist: [
                '> 1%',          // 全球使用率超过1%
                'last 2 versions', // 最新2个版本
                'not dead'       // 未停止维护
            ]
        })
    ]
};

---

12. 注释规范

12.1 文件头注释

/**
 * @description 尚品汇首页主样式
 * @author      张三
 * @date        2026-05-06
 * @version     1.0.0
 */

12.2 区块注释

/* =====================================
   顶部导航栏
   ===================================== */
.topbar {
    height: 30px;
    background: #ececec;
}

/* ----- 左侧欢迎文字 ----- */
.topbar-welcome {
    float: left;
    font-size: 12px;
    color: #666;
}

/* ----- 右侧用户操作 ----- */
.topbar-user {
    float: right;
}

12.3 行内注释

.product-card {
    width: 240px;
    padding: 16px;
    border-radius: 8px;
    overflow: hidden;   /* BFC：包裹子元素浮动 */
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);  /* 微弱阴影，提升层次感 */
}

.product-card__price {
    color: #dd302d;     /* 品牌红，与品牌色保持一致 */
}

12.4 TODO 注释

/* TODO: 等待设计稿确认颜色值 */
.banner-text {
    color: #ff6600;
}

/* FIXME: IE11 下渐变不生效，需要添加 filter 兼容 */
.gradient-bg {
    background: linear-gradient(to right, #667eea, #764ba2);
}

/* HACK: 修复 Safari 中 overflow:hidden 与 border-radius 不生效的问题 */
.card {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

---

13. 网站图标（favicon）

favicon（favorites icon）是显示在浏览器标签页、书签栏的小图标，是网站品牌识别的重要组成部分。

13.1 使用方式

方式一：自动读取（零配置）

将图标文件命名为 favicon.ico 放在网站根目录，浏览器会自动读取：

project/
└── favicon.ico  ← 浏览器自动加载

方式二：HTML <link> 显式引入（推荐）

<head>
    <!-- 标准方式 -->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    
    <!-- 现代方式：支持多尺寸 PNG -->
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    
    <!-- Apple 设备添加到桌面 -->
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
</head>

13.2 favicon 尺寸规范

尺寸	用途
16×16	浏览器标签页（最小）
32×32	Windows 任务栏、快捷方式
48×48	Windows 任务栏（高分屏）
180×180	iOS 添加到主屏幕
192×192	Android Chrome 添加到桌面

13.3 在线制作工具

• ico51：http://www.ico51.cn/ — 上传图片一键转 ICO
• bitbug：http://www.bitbug.net/ — 支持多尺寸生成
• RealFaviconGenerator：https://realfavicongenerator.net/ — 一次生成全平台 favicon

---

14. 工程化工具链

现代项目不依赖人工遵守规范，而是通过工具强制执行：

14.1 Stylelint — CSS Lint 工具

# 安装
npm install stylelint stylelint-config-standard --save-dev

# 运行检查
npx stylelint "**/*.css"

# 自动修复
npx stylelint "**/*.css" --fix

// .stylelintrc.json
{
    "extends": "stylelint-config-standard",
    "rules": {
        "color-hex-case": "lower",
        "color-hex-length": "short",
        "number-leading-zero": "never",
        "declaration-block-trailing-semicolon": "always",
        "selector-class-pattern": "^[a-z][a-z0-9-_]*$",
        "max-nesting-depth": 3
    }
}

14.2 Prettier — 代码格式化

// .prettierrc
{
    "singleQuote": true,
    "tabWidth": 4,
    "printWidth": 100,
    "trailingComma": "none"
}

14.3 EditorConfig — 编辑器统一配置

# .editorconfig — 统一不同编辑器的缩进、换行等行为
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

14.4 VSCode 推荐插件

插件	功能
Stylelint	实时高亮 CSS 规范错误
Prettier	保存时自动格式化
CSS Peek	从 HTML 跳转到 CSS 定义
IntelliSense for CSS	CSS class 名称自动补全
Color Highlight	高亮显示颜色值
CSS Variables Autocomplete	CSS 变量自动补全

---

15. 规范速查手册

✅ 书写建议速查

/* 1. 去掉小数点前的 0 */
opacity: .5;              /* ✅ */ opacity: 0.5;      /* ❌ */

/* 2. 颜色用小写简写 */
color: #fff;              /* ✅ */ color: #FFFFFF;    /* ❌ */

/* 3. 0 值不加单位 */
margin: 0;                /* ✅ */ margin: 0px;       /* ❌ */

/* 4. 简写冗余值 */
padding: 5px 10px;        /* ✅ */ padding: 5px 10px 5px 10px; /* ❌ */

/* 5. 不用 ID 选择器 */
.nav { }                  /* ✅ */ #nav { }           /* ❌ */

/* 6. 私有前缀 → 标准前缀 */
-webkit-transform: rotate(45deg);  /* ✅ 在前 */
transform: rotate(45deg);          /* ✅ 在后 */

/* 7. 属性值用单引号 */
font-family: 'PingFang SC';        /* ✅ */
font-family: "PingFang SC";        /* ❌ */

/* 8. 冒号后加空格 */
color: #333;             /* ✅ */  color:#333;        /* ❌ */

/* 9. { 前加空格 */
.box { }                 /* ✅ */  .box{ }            /* ❌ */

/* 10. 最后一条属性也加分号 */
.box { width: 100px; }  /* ✅ */  .box { width: 100px }  /* ❌ */

📋 属性分组顺序速查

① 定位：position / top / right / bottom / left / z-index
② 盒模型：display / float / clear / width / height / margin / padding / border / overflow
③ 排版：font / line-height / text-* / color / vertical-align / white-space
④ 视觉：background / box-shadow / opacity / cursor / list-style
⑤ 其他：transition / transform / animation / content

🏷️ 命名规则速查

布局层：.g-header / .g-nav / .g-content / .g-footer
模块层：.m-card / .m-modal / .m-tabs
元件层：.u-btn / .u-icon / .u-badge
状态层：.is-active / .is-disabled / .is-loading
BEM  ：.block__element--modifier

---

16. CSS 禅意花园：设计哲学与美学理念

“Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers.”
— Dave Shea，CSS Zen Garden 创始人

16.1 什么是 CSS 禅意花园？

2003 年，设计师 Dave Shea 创建了一个名为 CSS Zen Garden 的网站，它只提供一份固定不变的 HTML 文件，邀请全球设计师提交不同的 CSS 样式表。结果令人震惊——完全相同的 HTML 结构，呈现出了数百种截然不同的视觉设计：禅意山水、蒸汽朋克、古典印刷、未来科技……

这个项目用最直接的方式证明了一个理念：

HTML 是骨架，CSS 是灵魂。结构与表现分离，是 Web 设计最重要的哲学。

同一份 HTML：
<div class="preamble" id="zen-preamble">
    <h3>The Road to Enlightenment</h3>
    <p>Littering a dark and dreary road...</p>
</div>

↓ 换一个 CSS 文件 ↓

设计 A：极简白色日式美学    设计 B：浓郁深色蒸汽朋克
设计 C：明亮花卉插画风格    设计 D：严肃古典铅字排版
设计 E：赛博朋克霓虹效果    设计 F：清新草地自然系…

16.2 禅意花园的五大设计哲学

哲学一：结构与表现彻底分离

CSS Zen Garden 最核心的启示：HTML 只负责内容结构，CSS 只负责视觉呈现，二者不应耦合。

<!-- ❌ 结构与表现耦合：样式写死在 HTML 里 -->
<font color="red" size="5"><b>商品标题</b></font>
<table width="100%" bgcolor="#f5f5f5">
    <tr><td align="center">内容</td></tr>
</table>

<!-- ✅ 结构与表现分离：HTML 只描述语义 -->
<h2 class="product-title">商品标题</h2>
<section class="product-section">
    <p>内容</p>
</section>

/* CSS 负责全部视觉 —— 改变 CSS 即改变整个外观 */
.product-title {
    font-size: 22px;
    font-weight: 700;
    color: #dd302d;
}

.product-section {
    background: #f5f5f5;
    text-align: center;
    padding: 20px;
}

实践意义： 当设计稿改版时，只需修改 CSS，HTML 结构无需改动；同一页面可以根据不同场景（打印、移动端、暗黑模式）加载不同 CSS，实现一套内容多套呈现。

---

哲学二：语义化是设计的地基

禅意花园中所有参赛作品共享同一份 HTML，这意味着 HTML 的类名和结构必须足够语义化，才能被不同的 CSS 正确识别并赋予不同的视觉含义。

<!-- 语义化的 HTML 拥有无限的 CSS 可能性 -->
<header class="page-header">
    <h1 class="site-title">
        <span class="site-title__main">品牌名称</span>
        <span class="site-title__sub">品牌口号</span>
    </h1>
    <nav class="main-nav" aria-label="主导航">
        <ul class="main-nav__list">
            <li class="main-nav__item">
                <a class="main-nav__link" href="#">首页</a>
            </li>
        </ul>
    </nav>
</header>

语义化带来的好处不只是规范，更是设计弹性：

语义化程度	CSS 可施展空间	维护难度
全部用 <div> 和 <span>	低（无规律可循）	高
使用语义标签但无 class	中（难以精确控制）	中
语义标签 + 语义化 class	高（可灵活重塑外观）	低

---

哲学三：CSS 是创意的画布，不只是工具

CSS Zen Garden 证明了 CSS 能做到的远超「让元素对齐」：

/* 用纯 CSS 创造艺术感十足的排版 */
.article-lead {
    font-size: clamp(1.2rem, 3vw, 2rem);  /* 流体字体大小 */
    line-height: 1.4;
    letter-spacing: .05em;                 /* 字间距营造高级感 */
    text-indent: 2em;                      /* 首行缩进 */

    /* 文字渐变色（现代CSS魔法）*/
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 用 ::before / ::after 实现装饰元素，不污染 HTML */
.section-title {
    position: relative;
    padding-bottom: 12px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(to right, #667eea, #764ba2);
    border-radius: 2px;
}

/* 用 CSS 变量实现主题切换 —— 真正的"换肤" */
:root {
    --theme-primary: #667eea;
    --theme-bg: #ffffff;
    --theme-text: #333;
}

[data-theme="dark"] {
    --theme-primary: #a78bfa;
    --theme-bg: #1a1a2e;
    --theme-text: #e2e8f0;
}

body {
    background: var(--theme-bg);
    color: var(--theme-text);
}

---

哲学四：渐进增强，而非优雅降级

禅意花园的作品必须在各种浏览器下工作，这催生了**渐进增强（Progressive Enhancement）**的设计理念：

渐进增强金字塔：

        ┌─────────────────┐
        │  CSS3 动效、变换  │  ← 高级浏览器享有最佳体验
        │  Grid、自定义属性 │
        ├─────────────────┤
        │  CSS 颜色、排版   │  ← 普通浏览器有基础视觉
        │  浮动、定位       │
        ├─────────────────┤
        │  语义化 HTML      │  ← 所有浏览器/设备都能访问内容
        └─────────────────┘

/* 实践渐进增强：先写基础样式，再叠加高级特性 */
.hero-section {
    /* 基础：所有浏览器都支持 */
    background: #667eea;
    padding: 60px 20px;
    text-align: center;
}

/* 高级：支持 CSS Grid 的浏览器有更好的布局 */
@supports (display: grid) {
    .hero-section {
        display: grid;
        place-items: center;
        min-height: 60vh;
    }
}

/* 最高级：支持 CSS 自定义属性的浏览器有主题切换能力 */
@supports (color: var(--test)) {
    .hero-section {
        background: var(--theme-primary);
    }
}

---

哲学五：节制之美——少即是多

禅意花园中最受推崇的作品，往往不是堆砌了最多特效的那些，而是克制、有留白、层次分明的设计。这与中国「禅」的美学精神高度契合。

/* ✅ 禅意的极简风格：充分的留白、克制的色彩 */
.zen-card {
    max-width: 480px;
    margin: 0 auto;
    padding: 40px 48px;          /* 宽松的内边距，给内容呼吸空间 */
    background: #fff;
    border-left: 3px solid #667eea;  /* 只用一根线作为视觉重点 */
}

.zen-card__title {
    font-size: 20px;
    font-weight: 300;            /* 细字重，优雅而非强势 */
    letter-spacing: .1em;        /* 字间距拉开，提升质感 */
    color: #1a1a1a;
    margin-bottom: 24px;
}

.zen-card__body {
    font-size: 15px;
    line-height: 1.8;            /* 宽行高，可读性强，不压迫 */
    color: #666;
}

/* ❌ 过度设计：堆砌效果，失去重心 */
.chaos-card {
    background: linear-gradient(red, blue, green);
    border: 5px dashed yellow;
    box-shadow: 0 0 30px purple, inset 0 0 20px orange;
    text-shadow: 2px 2px red, -2px -2px blue;
    animation: spin 1s infinite, pulse 2s infinite, shake 0.5s infinite;
    transform: skewX(10deg) rotate(5deg);
    font-size: 30px;
    font-weight: 900;
    color: hotpink;
}

---

16.3 从禅意花园汲取的 CSS 设计原则

原则一：视觉层次（Visual Hierarchy）

/* 通过字号、颜色、粗细建立清晰的视觉层次 */
.page-heading {
    font-size: 2.5rem;    /* 第一层：页面主标题 */
    font-weight: 700;
    color: #1a1a1a;
}

.section-heading {
    font-size: 1.5rem;    /* 第二层：章节标题 */
    font-weight: 600;
    color: #333;
}

.card-title {
    font-size: 1rem;      /* 第三层：卡片标题 */
    font-weight: 500;
    color: #555;
}

.caption {
    font-size: .85rem;    /* 第四层：辅助说明文字 */
    font-weight: 400;
    color: #999;
}

原则二：颜色系统（Color System）

/* 基于 60-30-10 法则建立颜色系统 */
:root {
    /* 60%：主色调（背景、大面积）*/
    --color-base: #ffffff;
    --color-base-mute: #f8f9fa;

    /* 30%：辅助色（内容区、卡片）*/
    --color-surface: #e8e8e8;
    --color-text: #333333;
    --color-text-mute: #888888;

    /* 10%：强调色（按钮、链接、重点）*/
    --color-accent: #667eea;
    --color-accent-hover: #5a6fd6;
    --color-danger: #dd302d;
    --color-success: #52c41a;
}

/* 使用颜色系统，而非散落的色值 */
.btn-accent {
    background: var(--color-accent);      /* ✅ */
    /* background: #667eea;              ← ❌ 硬编码，难以统一修改 */
}

.btn-accent:hover {
    background: var(--color-accent-hover);
}

原则三：间距节律（Spacing Rhythm）

/* 使用 8px 基准间距系统，建立视觉节律 */
:root {
    --space-1: 4px;    /* 极小间距：标签内边距 */
    --space-2: 8px;    /* 小间距：图标与文字 */
    --space-3: 12px;   /* 内边距：紧凑组件 */
    --space-4: 16px;   /* 标准间距：卡片内边距 */
    --space-5: 24px;   /* 中间距：组件间距 */
    --space-6: 32px;   /* 大间距：章节间距 */
    --space-7: 48px;   /* 超大：页面节间距 */
    --space-8: 64px;   /* 最大：顶部英雄区 */
}

.card {
    padding: var(--space-4);         /* 16px 内边距 */
    margin-bottom: var(--space-5);   /* 24px 卡片间距 */
    border-radius: var(--space-2);   /* 8px 圆角 */
}

.card + .card {
    margin-top: var(--space-5);
}

原则四：排版韵律（Typographic Rhythm）

/* 建立一致的排版系统 */
:root {
    /* 字体家族 */
    --font-sans: 'PingFang SC', 'Microsoft YaHei',
                 -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* 字号比例（使用 1.25 的模块化比例）*/
    --text-xs:   0.64rem;   /* 10px */
    --text-sm:   0.8rem;    /* 13px */
    --text-base: 1rem;      /* 16px */
    --text-lg:   1.25rem;   /* 20px */
    --text-xl:   1.563rem;  /* 25px */
    --text-2xl:  1.953rem;  /* 31px */
    --text-3xl:  2.441rem;  /* 39px */

    /* 行高 */
    --leading-tight:  1.25;   /* 标题 */
    --leading-normal: 1.5;    /* UI 文字 */
    --leading-relaxed: 1.75;  /* 正文阅读 */
    --leading-loose:  2;      /* 大段落 */
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

code, pre {
    font-family: var(--font-mono);
}

原则五：流动与响应（Fluidity）

CSS Zen Garden 的参赛作品必须适应不同屏幕，推动了流式布局的实践：

/* 流体容器：宽度随视口流动，不死板固定 */
.container {
    width: min(1190px, 100% - 40px);   /* 现代写法：不超过1190px，且两侧留20px */
    margin-inline: auto;
}

/* 流体字体：在最小和最大字号之间平滑缩放 */
.hero-title {
    font-size: clamp(1.5rem, 5vw, 3rem);
}

/* 流体间距：随视口大小自动调整 */
.section {
    padding-block: clamp(40px, 8vw, 80px);
}

/* 自适应列数：内容决定布局，而非写死列数 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

---

16.4 禅意花园的经典作品赏析与 CSS 还原

作品风格一：极简日式禅风

/* 灵感来源：白纸墨迹、侘寂（Wabi-sabi）美学 */
.zen-japanese {
    /* 大量留白 */
    padding: 80px 60px;
    background: #fafaf8;

    /* 极细的分割线 */
    border-top: 1px solid rgba(0,0,0,.08);
}

.zen-japanese__title {
    font-size: 1.8rem;
    font-weight: 200;           /* 极细字重 */
    letter-spacing: .3em;       /* 大字间距，宁静感 */
    color: #2c2c2c;
    margin-bottom: 2em;
}

.zen-japanese__text {
    max-width: 560px;
    font-size: .9rem;
    line-height: 2.2;           /* 宽松行高，给文字呼吸 */
    color: #666;
    font-feature-settings: 'kern' 1;
}

/* 用 ::before 加入极简装饰 */
.zen-japanese__title::before {
    content: '—';
    margin-right: 1em;
    color: #999;
    font-weight: 100;
}

作品风格二：Art Deco 装饰艺术

/* 灵感来源：1920年代装饰艺术运动——几何、对称、金色 */
.zen-artdeco {
    background: #1a0f0a;
    color: #d4a843;
    padding: 60px;
    text-align: center;
    border: 1px solid #d4a843;
    box-shadow: inset 0 0 0 6px #1a0f0a,
                inset 0 0 0 8px #d4a843;   /* 内嵌双层边框 */
}

.zen-artdeco__title {
    font-size: 2.5rem;
    letter-spacing: .5em;
    text-transform: uppercase;
    font-weight: 300;

    /* 金色渐变文字 */
    background: linear-gradient(180deg, #f0d060 0%, #a87830 50%, #f0d060 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 几何装饰线 */
.zen-artdeco__divider {
    width: 120px;
    height: 1px;
    background: linear-gradient(to right, transparent, #d4a843, transparent);
    margin: 20px auto;
}

.zen-artdeco__divider::before,
.zen-artdeco__divider::after {
    content: '◆';
    display: block;
    text-align: center;
    color: #d4a843;
    font-size: 8px;
    margin-top: -5px;
}

作品风格三：现代科技感

/* 灵感：赛博朋克、霓虹灯、数字界面 */
.zen-cyber {
    background: #0a0e1a;
    position: relative;
    overflow: hidden;
}

/* 扫描线效果 */
.zen-cyber::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,255,200,.02) 2px,
        rgba(0,255,200,.02) 4px
    );
    pointer-events: none;
}

.zen-cyber__title {
    color: #00ffc8;
    font-family: 'Courier New', monospace;
    font-size: 1.5rem;
    letter-spacing: .15em;
    text-shadow: 0 0 10px #00ffc8,
                 0 0 20px #00ffc8,
                 0 0 40px rgba(0,255,200,.5);   /* 霓虹发光效果 */
}

/* 动态边框动画 */
.zen-cyber__card {
    border: 1px solid rgba(0,255,200,.3);
    position: relative;
}

.zen-cyber__card::before,
.zen-cyber__card::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: #00ffc8;
    border-style: solid;
}

.zen-cyber__card::before {
    top: -1px; left: -1px;
    border-width: 2px 0 0 2px;
}

.zen-cyber__card::after {
    bottom: -1px; right: -1px;
    border-width: 0 2px 2px 0;
}

---

16.5 禅意花园对现代 CSS 开发的启示

启示一：CSS 的职责边界要清晰

HTML → 结构与语义（What）
CSS  → 外观与布局（How it looks）
JS   → 行为与交互（How it behaves）

打破边界的反模式：
❌ 用 JS 直接修改 style（大量内联样式）
❌ 用 JS 控制动画帧（CSS transition/animation 更高效）
❌ 用 HTML 属性控制视觉（style=""、align=""、bgcolor=""）
✅ JS 只添加/移除 class，CSS 负责 class 对应的样式

启示二：优秀的 CSS 是可组合的

/* 禅意花园的精髓：同一个 class 可以被不同设计重新诠释 */

/* 基础样式：定义结构 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5em 1.2em;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: all .2s ease;
}

/* 主题 A：扁平现代风 */
.btn--theme-a {
    background: #667eea;
    color: #fff;
    border-radius: 4px;
}

/* 主题 B：拟物阴影风 */
.btn--theme-b {
    background: linear-gradient(180deg, #fff 0%, #e8e8e8 100%);
    color: #333;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,.15),
                inset 0 1px 0 rgba(255,255,255,.9);
}

/* 主题 C：描边极简风 */
.btn--theme-c {
    background: transparent;
    color: #667eea;
    border: 2px solid currentColor;
    border-radius: 0;
    letter-spacing: .1em;
    text-transform: uppercase;
}

启示三：学会使用伪元素做装饰，保持 HTML 纯粹

/* ✅ 用 ::before / ::after 添加装饰，HTML 不增加任何标签 */

/* 引用块左竖线 + 装饰引号 */
blockquote {
    position: relative;
    padding: 20px 20px 20px 40px;
    margin: 0;
    background: #f8f9fa;
    border-radius: 4px;
}

blockquote::before {
    content: '"';
    position: absolute;
    left: 12px;
    top: 8px;
    font-size: 3rem;
    line-height: 1;
    color: #667eea;
    font-family: Georgia, serif;
    opacity: .4;
}

blockquote::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #667eea;
    border-radius: 4px 0 0 4px;
}

/* 标题下划线动效 */
.animated-link {
    position: relative;
    text-decoration: none;
    color: #333;
}

.animated-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #667eea;
    transition: width .3s ease;
}

.animated-link:hover::after {
    width: 100%;
}

---

16.6 CSS 禅意花园总结

CSS 禅意花园给我们最深刻的启示不是某个具体技巧，而是一种思维方式：

• CSS 是艺术媒介，不只是让页面「能看」的工具
• 约束激发创意，在统一的 HTML 结构下，优秀的设计师能创造无限可能
• 分离才能自由，结构与表现分离越彻底，修改和维护的自由度就越大
• 少做，做精，最好的 CSS 不是最多的 CSS，而是最恰当的 CSS

---

总结

好的 CSS 规范不是束缚，而是协作的语言。它让代码在时间的流逝中依然可读，让团队成员能无缝接手彼此的工作。

CSS 禅意花园告诉我们：掌握规范是起点，真正的目标是用 CSS 表达设计意图、传递美感，让每一行样式都有其存在的价值。

规范落地的三步法：

1. 文档化——团队内部确定并记录规范（比如本文）
2. 工具化——通过 Stylelint + Prettier + EditorConfig 强制执行
3. 习惯化——Code Review 时重点检查规范遵守情况，直到形成肌肉记忆

“我们站在 CSS 禅意花园的起跑线上，带着设计的热情和代码的严谨，写出真正优雅的样式。”

---

参考规范：京东前端规范 JDC · Airbnb CSS Style Guide · BEM 官网 · MDN CSS Reference · CSS Zen Garden