Hacker News 中文摘要

文章摘要

作者在反思自己之前的CSS实践时，意识到自己并未充分利用浏览器默认元素样式，决定彻底摒弃类选择器，重新设计网站。他采用严格的约束条件，将CSS结构分为基础、组件和工具三层，专注于默认样式的优化，以探索现代HTML和CSS下的无类设计体验。

文章总结

标题：这个网站没有类 | Adam Stoddard

在最近的一篇文章《没有所谓的CSS重置》中，我写道：

把元素想象成组件，但它们是浏览器自带的。自定义元素，但没有“自定义”部分。你可以直接使用它们。

这句话一直在我脑海中回响，几周后，当我进行一些清理工作时，我意识到一个令人不安的事实：我并没有真正遵循自己的建议。虽然我设置了一些默认的样式，但还有很多地方没有处理。我感到被“攻击”了，甚至被“点名”了。现在的我被过去的我“烤”得焦头烂额。唯一的解决办法就是：重构我的网站。

我喜欢在设计网站时施加严格的限制，因为我认为限制能带来有趣、创造性的解决方案。这次也不例外。我决定不再依赖内置元素，而是完全摒弃类。自从CSS Zen Garden时代以来，我就没有使用过无类的方法，我想看看在现代HTML和CSS中，这种方法会带来怎样的体验。

强化默认样式

网站的CSS结构围绕三个层级：base、components和utilities。base中的所有内容已经是标签选择器，所以我的任务是改变组件的处理方式，并完全消除utilities。

第一步是缓解问题。有很多代码本可以作为默认样式，但没有被利用。因此，我彻底审查了所有标记，增加了语义元素的使用，提取了常见模式作为新的元素默认值，并更多地使用了上下文元素样式。例如，将：

css .header-primary { margin-block: clamp(var(--size-sm), 4vw, var(--size-lg)) var(--size-flex); }

改为：

```css body { background-color: var(--color-sheet);

& > header { margin-block: clamp(var(--size-sm), 4vw, var(--size-lg)) var(--size-flex); } } ```

这是一个不错的开始，现代特性如嵌套、:where()和:has()让这一切比20年前更加顺畅。但我过于依赖上下文样式，最终导致了选择器定义的过载和越来越晦涩的选择器模式。当我写出这样的代码时，我知道自己已经走得太远了：

```css li { &:has( > a + p) { padding-block: var(--size-lg); border-block-end: var(--border-default); text-wrap: balance;

& > a {
  font-size: var(--font-xxl);
}

& > p {
  margin-block: var(--size-sm);
}

} } ```

我需要一个真正的解决方案来处理组件和变体管理。

自定义元素与属性的应用

我隐约想到一个解决方案，即借鉴自定义元素和Web组件的模式，但不使用JavaScript。由于它们的渐进增强特性，自定义标签名和自定义属性在HTML中是100%有效的，无论是否使用JavaScript。在阅读了Keith Cirkel的《CSS类被认为有害》后，这个想法变得更加坚定。

重新审视上面的例子，现在我们有了这样的模式：

```css note-pad { padding-block: var(--size-lg); border-block-end: var(--border-default); text-wrap: balance;

& a { font-size: var(--font-xxl); }

& p { margin-block: var(--size-sm); } } ```

自定义属性成为处理BEM修饰符的首选，但不再依赖风格化的书写约定来模拟键值对，而是使用真正的键值对。

```css random-pattern { & [shape-type="1"] { border: 0.1rem solid var(--color-sheet); background-color: var(--color-sheet); filter: url("#noise1"); }

& [shape-type="2"] { background: var(--pattern-lines-horizontal); background-size: var(--pattern-scale); } } ```

你可以使用data-whatever作为属性，但实际上，任何两个用短横线分隔的单词都是安全的。我个人认为去掉data前缀感觉更好，并且允许更丰富的语义。

反思与未来

从积极的一面来看，用户的结果是明确的：我删除了相当数量的CSS（现在整个网站的CSS大约只有5KB），并且由于更加关注标记，可访问性无疑得到了提升。此外，看看那些标记，多么干净、闪亮。

然而，这种方法对作者的要求更高。与纯粹的组件方法相比，它需要更仔细的规划；你不能孤立地思考问题。因此，虽然我很高兴在我的个人网站上采用这种方法，但在一个前端知识水平参差不齐的大型项目中，我可能不会推荐它。

有一种更封装化的变体（随意使用自定义标签名），但这引发了一个未解决的问题：用没有语义价值的自定义标签名替换语义元素感觉不好，并且在所有内容周围添加额外的包装也感觉不好。

总的来说，我还不确定这是否是我今后构建所有网站的“唯一正确方式”，但我觉得自己已经跨越了某种门槛。我曾经认为类是可以接受的，但现在我不那么确定了。虽然我还不知道这最终会带来什么，但这次实践无疑会对我的工作产生持久的影响。

一个小忏悔：我只完成了99%。我使用了11ty的语法高亮插件，它使用类进行样式设置。我认真考虑过syntax-highlight，但我不喜欢在不需要的地方引入客户端JavaScript，而且编写体验会倒退，所以我暂时不情愿地保留了它。

评论总结

评论主要围绕网页设计和CSS使用的简化与复杂性展开，观点多样且平衡。以下是总结：

支持简化CSS的观点：
- 一些评论者认为简化CSS可以减少代码量，提升网站性能。例如，iLoveOncall提到：“移除了相当数量的CSS（现在整个网站的CSS大约为5KB）”，但也有人认为这种简化可能增加维护复杂性。
- edent分享了自己的经验：“我应用了这些经验到我的网站，发现很多类从未被重用”，并指出WordPress中大量未使用的类。
反对过度简化的观点：
- 多位评论者认为过度依赖HTML结构来定义样式会导致维护困难。bgarbiak指出：“你不想让网站的外观依赖于其结构”，并举例说明复杂选择器的局限性。
- jbreckmckye回顾了历史经验：“20年前我们尝试过‘CSS禅’，但失败了，因为无法完全将HTML结构和表现耦合”。
对设计风格的赞赏：
- 一些评论者对博客的设计风格表示赞赏。thiago_fm提到：“我喜欢他博客的设计——点、链接高亮等”，并认为这种设计融合了2000年代的互联网风格和现代标准。
- chamomeal称赞：“深色模式最易读，但其他主题也非常好看”。
技术实现的讨论：
- 评论者讨论了技术实现的细节。the_other指出：“创建新的‘语义’元素并在标记中自定义它们，而不是采用上下文方法，存在不匹配”。
- habibur发现：“页脚提到‘我只完成了99%，使用了11ty的语法高亮插件，它使用类进行样式化’”。
用户体验的反馈：
- 有评论者提到用户体验问题。admissionsguy抱怨：“在手机上只能看到每行的一半，无法滚动，显然他们做得不好”。
对现代CSS工具的偏好：
- 一些评论者仍然偏好使用现代CSS工具。CafeRacer表示：“干得好！但我还是会继续用Tailwind”。
- 701mk提到：“这就是为什么我喜欢在小项目中使用PicoCSS，它无需太多类就能立即添加样式”。