语义化标签本身不简化样式编写，但能让你不用写一堆类名就能让样式有意义地生效——前提是css选择器直接基于标签和属性，而非class堆砌；classless.css等方案放弃class选择器，为header、nav、main等原生标签定义默认样式，依赖正确使用语义标签，并重置浏览器默认样式以注入统一设计语言。
语义化标签本身不简化样式编写，但能让你**不用写一堆类名就能让样式有意义地生效**——前提是 CSS 选择器直接基于标签和属性，而不是靠 class 堆砌。
classless.css 是怎么靠原生标签工作的
像 classless.css 这类方案，核心是放弃 class 选择器，转而为 header、nav、main、article、section、aside、footer 等标签写样式规则。它不依赖你加 class="card" 或 class="btn"，而是默认 button 就该有交互样式，h1 就该大且居中，ul 就该带缩进和项目符号。
- 它假设你用对了标签：比如导航真用了
nav，而不是div class="nav" - 它禁用或重置部分浏览器默认样式（如移除
button的边框），再统一注入设计语言 - 它不处理“同标签不同用途”的场景：比如两个
section，一个要卡片式，一个要全宽背景，这时仍需 class 或自定义属性（如section data-variant="card"）
为什么 div 多的页面写样式更费劲
当你满屏都是 div，CSS 就只能靠 class 区分语义，结果就是：
- HTML 里出现大量重复类名：
<div class="container"><div class="row"><div class="col-6">……这类命名本质是把布局逻辑塞进 HTML<li>样式表膨胀：每个 class 都得单独写一遍 margin/padding/font-size，无法复用标签级默认行为</li> <li>改结构时样式容易断裂：比如把 <code>div class="card"换成article，所有相关 class 规则就失效了 -
div没语义，CSS 无法通过上下文推断意图：浏览器不知道这个div是导航、侧边栏还是广告位 -
button：默认可聚焦、可键盘操作、有 :focus-visible 样式；用div role="button"就得手动补 tabindex + 键盘事件 -
input[type="email"]、input[type="number"]：自带基础校验和移动端软键盘适配，div+ JS 模拟就得自己做 -
details/summary：折叠面板无需 JS，支持 Space/Enter 展开，aria-expanded状态自动同步 -
table、th、td：表格语义明确，屏幕阅读器能读行列关系；用div模拟表格就得加一堆role="table"和aria-*属性 -
time[datetime]：机器可解析时间，datetime="2026-05-01"才有效，写成"2026/05/01"就废了 - 表单里用
div包input，没套label，导致无障碍测试失败，后期返工 - 文章页把整篇内容塞进一个
div class="content"，而不是拆成article+header+section，导致 SEO 抓不到主标题层级 - CSS 用了
display: none隐藏导航，却没加aria-hidden="true"，屏幕阅读器仍会朗读 - 用
h2当作“加大字号的副标题”而不考虑文档大纲，破坏nav aria-label="跳转到..."的可用性
哪些语义标签能直接触发样式逻辑
不是所有语义标签都有“开箱即用”的样式意义，但以下标签在现代 CSS 实践中已形成事实约定：
协作时最容易被忽略的语义断点
设计师给的视觉稿里常有“看起来像按钮的 div”“看起来像卡片的 section”，前端若只按像素还原，就会漏掉底层语义。真正卡住协作效率的往往不是样式难写，而是：
语义不是加完标签就结束的事，它得贯穿 HTML 结构、CSS 显隐控制、JS 交互反馈三个层面。
