CSS如何规范使用section模块类名

• 所有可复用的样式必须绑定到具体类名上，比如 .section-spacing，而不是依赖 section 标签选择器
• 如果真要重置默认行为，用属性选择器更安全：section[class] { margin-bottom: 0; }，只影响带类名的 section
• 用 CSS 自定义属性控制间距变量，比如 --section-spacing: 3rem;，在不同模块中覆盖即可，不用写多套 margin 规则

响应式场景下类名要不要加断点标识

别加。像 section-md 或 hero-lg 这类带尺寸的类名，会让 HTML 变成样式快照，一旦设计调整就得改一堆模板。断点逻辑应该完全交给 CSS，类名只表达“这是什么”，不表达“它在哪儿显示成什么样”。

• 正确做法：保持
  不变，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 事件丢失。定名时多想两秒，比后期补救成本低得多。

到这里，我们也就讲完了《CSS如何规范使用section模块类名》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！