CSS 标签样式：别再只靠 class 堆砌了，试试“语义即样式”的思路

你有没有过这种时刻：写完一个按钮，顺手加个 .btn-primary；做个卡片，立刻套上 .card；连 <h2> 都要补个 .section-title 才敢放心？
不是说 class 不好，而是我们太习惯把 HTML 当成“空壳”，把所有样式责任一股脑推给 class——结果是 HTML 越来越臃肿，CSS 越来越难维护，连自己半年前写的 .card--hover-scale 都得翻三遍源码才想起它到底干了啥。

其实，浏览器早就给了我们一套轻量、稳定、自带语义的样式锚点：HTML 标签本身。

不是“用标签代替 class”，而是让标签承担它本该承担的样式职责——比如 <strong> 默认加粗、<blockquote> 自带缩进、<code> 用等宽字体。这些不是“默认值”，而是可预测、可覆盖、可组合的样式基底。

先看一个真实场景：
你正在写一篇技术文档，里面混着代码片段、命令行输出、配置项说明。如果全用 <div class="code-block">，那每个块都要手动设 font-family: monospace、background: #f6f8fa、padding: .75em……但换个思路：

<p>运行以下命令：</p>
<code>npm install --save-dev vite</code>
<pre><code>import { defineConfig } from 'vite'</code></pre>

这时，<code> 天然就是等宽字体 + 行内样式，<pre> 天然保留换行与空格 + 块级布局。你只需要微调：

code {
  background: #f0f3f6;
  padding: .2em .4em;
  border-radius: 3px;
}
pre code {
  display: block;
  padding: 1em;
  overflow-x: auto;
  line-height: 1.5;
}

没加一个 class，但结构更清晰，语义更准确，后期改主题时也只需改两处 CSS —— 因为样式绑定在语义上，而不是某个随意命名的 class。

再比如表单。很多人一上来就写：

<div class="form-group">
  <label class="form-label">邮箱</label>
  <input type="email" class="form-input">
</div>

但 <label> 和 <input> 本就有原生关联能力（for + id），也有默认样式倾向：<label> 是内联元素、有可点击区域；<input> 在不同 type 下有不同默认外观（type="number" 会带上下箭头，type="date" 弹出日历）。
真正需要定制的，是打破默认的“不一致”：比如统一禁用 <input> 的蓝色焦点框，或让 <select> 在 Safari 和 Chrome 下高度一致。这时候写：

input, select, textarea {
  font: inherit; /* 继承父级字号/行高，避免 Safari 字体突变 */
  margin: 0;     /* 清除部分浏览器默认外边距 */
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

比写十个 .form-input:focus 更省力，也更可靠。

当然，标签样式不是万能解药。<div> 和 <span> 确实该少用——它们没有语义，也就没有样式锚点；但 <article>、<nav>、<time>、<figure> 这些语义化标签，浏览器虽未赋予强视觉样式，却提供了极佳的样式作用域。比如：

article h2 {
  font-size: 1.5rem;
  border-bottom: 1px solid #eaecef;
  padding-bottom: .5rem;
}

这个规则不会污染首页的 <h2>，也不会影响侧边栏的 <h2>——因为 article 划定了边界。语义即作用域，作用域即维护成本的下限。

还有个容易被忽略的点：伪类与标签的天然契合。
<a> 默认有 :link、:visited、:hover、:active；<input> 有 :valid、:invalid、:focus-visible；<details> 有 :open。这些不是“彩蛋”，而是浏览器帮你做好的状态映射。
比如，用 :invalid 配合 required 属性，不用 JS 就能高亮错误输入：

input:invalid {
  border-color: #dc3545;
}
input:invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, .25);
}

真实、即时、零 JS 依赖——这才是标签样式最实在的价值。

当然，也要坦诚它的边界：

• <button> 在 Firefox 下默认有灰色背景，在 Chrome 下更接近白色，微调仍需 appearance: none + 重置；
• <hr> 的默认 margin 在各浏览器差异明显，生产环境建议重置；
• <ul> 的 marker 样式（圆点/数字）用 list-style 控制比用伪元素更稳妥。

所以，实用建议很朴素：
先用标签表达意图，再用 CSS 修饰表现；优先覆盖语义标签的默认行为，而非绕开它另起炉灶；把 class 留给真正需要差异化设计的模块，而不是给每个块都贴标签。

最后一个小实验：打开你最近写的页面，删掉所有 class，只保留标签结构，然后在浏览器开发者工具里禁用全部 CSS。
你能一眼看出哪些内容是标题、哪些是引用、哪些是代码、哪些是交互控件吗？
如果答案是“能”，恭喜——你的 HTML 已经在悄悄帮你管理样式了。
如果答案是“一团乱麻”，那不是 HTML 的错，是你和标签之间，还差一次认真的对话。

毕竟，样式从来不只是“怎么好看”，更是“怎么被理解”。而理解，从标签开始。