开发者总是痴迷于CSS类名，随手就能写出 `.hidden`、`.loading`、`.active` 这样的类。但HTML本身就提供了更合适的属性——这些属性语义化、标准化，并且得到所有浏览器支持。既然如此，何必重复造轮子？让浏览器处理繁重的工作，同时还能提升SEO和无障碍性。 与其不断添加自定义类，不如拥抱HTML平台本身的灵活性：使用原生属性。有时候它们看起来略显冗长，但并非总是如此，而且带来的收益足以证明其价值。以下是一些常见的、可以替代CSS类的原生HTML属性。 **1. hidden 属性** 为什么要定义一个全局或组件级别的 `.hidden` 类，而不是直接使用 `hidden` 属性呢？它是HTML内建的，所有浏览器都支持，不需要额外的CSS。浏览器完全明白你的意图。 在某些场景下，你可能需要在CSS中重新定义 `[hidden]` 的行为，但即便如此，使用原生属性也比自定义类更具语义性，并且提供了更多的上下文信息。 **2. required 属性** 表单验证是过度工程化的完美温床。人们很容易在label或input上添加一个 `.required` 类；而实际上，你应该依赖 `required` 属性。浏览器会强制执行它，屏幕阅读器会播报它，而且你根本不需要JavaScript来验证！带有 `required` 属性的元素可以轻松地通过CSS选择器 `[required]` 来定位，所以没有必要同时标记属性和类。 如果你原本是想把 `required` 类添加到与必填控件关联的label上，你也可以使用组合器或 `:has()` 伪类来对 label 进行样式设置。 **3. disabled 属性** 按钮、输入框和其他表单控件经常被添加 `.disabled` 类，但 `disabled` 属性其实已经存在了。它可以阻止交互，向辅助技术传达禁用状态，并且是平台的一部分。 为什么既要使用非语义的类名，又要使用语义化的属性，做重复劳动呢？当原生工具已经存在时，重复定义类只会增加代码混乱和潜在的维护负担。直接使用 `disabled` 属性，让一切变得简单、可访问且语义清晰。
热门跟贴