应使用语义化模块职能类名，如hero、features、testimonials；避免数字编号、位置命名或泛化名称；变体用BEM修饰符（如hero--dark）；统一小写连字符；类名补充HTML语义缺失，不依赖标签选择器。
section里该用什么类名才不算乱套
别把每个 <section> 都塞个 section-1、section-2 这种数字后缀——它不是编号器，是语义容器。真正该体现的是模块职能，比如 hero、features、testimonials，这些名字能直接对应设计稿里的模块标题，也方便团队协作时一眼看懂。
- 避免用位置命名（如
top-section），页面结构一调就失效 - 拒绝功能泛化（如
content-area），等于没写 - 如果模块有变体（比如深色版
hero-dark），用 BEM 的修饰符写法：hero hero--dark - 所有类名统一小写 + 连字符，不混用下划线或驼峰
HTML5语义标签和CSS类名怎么不打架
<section> 本身已有语义，但浏览器不默认给样式，所以你得靠类名来驱动视觉表现。关键不是“要不要加类”，而是“类名是否补充了语义缺失的部分”。比如 <section class="faq"> 比 <section> 更完整，因为 FAQ 是业务概念，不是 HTML 原生语义。
-
<header>、<nav>、<footer>这类全局容器一般不额外加模块类名，除非有特定样式需求（如main-header） -
<article>内部的<section>可以带上下文前缀，例如article-intro，避免和页面级intro冲突 - 不要为了“语义洁癖”放弃类名：即使用了
<section>，该加pricing还得加，否则 CSS 没法精准挂钩
多个section共用一套样式时怎么避免污染
常见错误是写一个 .section { margin-bottom: 2rem; } 然后指望它兜底——结果某天某个 <section> 出现在卡片内部，底部外边距直接撑裂布局。根本问题是把标签当样式钩子，而不是用类名明确意图。
- 所有可复用的样式必须绑定到具体类名上，比如
.section-spacing，而不是依赖section标签选择器 - 如果真要重置默认行为，用属性选择器更安全：
section[class] { margin-bottom: 0; }，只影响带类名的 section - 用 CSS 自定义属性控制间距变量，比如
--section-spacing: 3rem;，在不同模块中覆盖即可，不用写多套 margin 规则
响应式场景下类名要不要加断点标识
别加。像 section-md 或 hero-lg 这类带尺寸的类名，会让 HTML 变成样式快照，一旦设计调整就得改一堆模板。断点逻辑应该完全交给 CSS，类名只表达“这是什么”，不表达“它在哪儿显示成什么样”。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：保持
<section class="cta">不变，CSS 里用@media (min-width: 768px) { .cta { padding: 2rem; } } - 例外情况只有 JS 主动切换状态时才需要断点类名，比如
is-mobile-menu-open，但这和响应式无关，是交互态 - 如果组件需要差异化渲染（比如移动端隐藏某 section），用
hidden-mobile这类语义化工具类，而不是section-mobile-hidden
最常被忽略的一点：类名一旦上线，就不再是“临时起意”，而是接口的一部分。改一个 features 为 feature-grid 可能导致 JS 查询失败、SEO 结构微调、甚至 Analytics 事件丢失。定名时多想两秒，比后期补救成本低得多。
