标签不能替代css类命名，二者属不同层面：表达语义结构（独立主题区块），类名定义样式与行为（如hero、pricing），需协作使用；类名应体现业务职能而非位置或编号，避免泛称，推荐bem修饰符处理变体，响应式逻辑交由css控制。
<section></section> 标签本身不能替换传统的 CSS 类命名法，它和类名解决的是不同层面的问题：<section></section> 是 HTML 语义结构标签，负责表达“这里是一块有主题、可独立理解的内容区域”；
CSS 类名（如 hero、features）是样式与行为的挂钩点，负责告诉浏览器“这个区块要怎么显示、怎么交互”。
二者不是替代关系，而是协作关系——正确用法是：在语义正确的 <section></section> 上，加上语义清晰的类名。
✅ 该用什么类名，而不是“section-1”“top-section”
<section></section> 不是编号容器，也不是位置描述器。类名要体现模块职能：
-
section class="hero"→ 主视觉区（非“第一块内容”） -
section class="pricing"→ 定价模块（非“中间那块带价格的”） -
section class="testimonials"→ 用户评价区（非“下面那段引述”）
避免：
-
section-1,section-main→ 数字和泛称无法传达意图 -
top-section,left-panel→ 位置会变，类名就失效 -
content,wrapper→ 太宽泛，等于没写
✅ 类名如何补充 <section></section> 的语义缺口
HTML5 标签自带语义，但不带业务含义。比如：
<section class="faq"><h2>常见问题</h2> <!-- 内容 --> </section>
✅ faq 补充了 <section></section> 缺失的业务语义：这是 FAQ 模块，不是普通分区。
❌ 单独 <section></section> 或 <section class="section"></section> 无法让开发者、维护者、辅助技术快速识别其用途。
同理：
-
<section class="blog-list"></section>比<section></section>更易协作、更易复用 -
<section class="dashboard-stats"></section>让 JS 脚本能精准定位：“我要操作的是仪表盘数据区”，而非“所有 section”
✅ 多个 section 共用样式？靠类名，别靠标签
别写：
section { margin-bottom: 2rem; } /* ❌ 风险：所有 section 都被影响 */
应写：
.section-spacing { margin-bottom: 2rem; } /* ✅ 显式、可控 */
然后按需添加：
<section class="hero section-spacing"></section><section class="features section-spacing"></section><section class="contact"></section><!-- 不需要间距，就不加 -->
或者用 CSS 自定义属性统一控制：
:root { --section-gap: 3rem; }
.hero, .features { margin-bottom: var(--section-gap); }
✅ 变体怎么命名？用 BEM 修饰符
同一模块不同状态，用 -- 修饰符，不另起新类：
<section class="hero hero--dark"></section><section class="hero hero--compact"></section>
对应 CSS：
.hero { /* 基础样式 */ }
.hero--dark { background: #111; color: #fff; }
.hero--compact { padding: 1rem; }
这样既保持语义连贯，又支持样式组合，也方便团队理解“这是深色版 hero”。
✅ 响应式、断点、尺寸…类名里别塞
不要：
<section class="hero-lg hero-tablet"></section>
要：
<section class="hero"></section>
样式逻辑全交给 CSS：
.hero { padding: 1rem; }
@media (min-width: 768px) {
.hero { padding: 2rem; }
}
类名只回答“这是什么”，不回答“它在哪、多大、怎么动”。
类名不是装饰，是契约。它让 HTML、CSS、JS、设计师、测试人员在同一语义频道上对话。<section></section> 提供骨架，类名赋予意义——两者配合，才构成可维护、可访问、可扩展的现代页面结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
