CSS Bed（CSS Bed）是一个无类（classless）CSS 主题的集合，用作网页开发的起点。其背后的源码托管在 GitHub（GitHub）上。获取主题需将一段代码片段粘贴到网站的 head 中。若发现漏洞或想添加主题，可访问 GitHub 上的 CSS Bed 源码。同一页面还提供多种无类主题切换，如 HTML only、awsm.css 等。

这是一组无 class CSS 主题的合集，可作为网页开发的起点。

这一版背后的源码。

怎么获取这个主题？

把这段代码粘进网站的 head 里。

发现 bug？想把某个主题加进列表？看 GitHub 上的 cssbed 源码。

用另一个无 class 主题看同一个页面

• HTML only
• awsm.css
• bahunya
• bamboo
• bootstrap
• evenbettermotherfucking
• holiday.css
• kacit
• marx
• meyer
• minicss
• mvp.css
• no-class
• pico.css
• sakura
• sakura-vader
• simple.css
• stylize.css
• tacit
• thebestmotherfucking
• tufte
• vanillacss
• w3c-chocolate
• w3c-traditional
• water.css-dark
• water.css-light
• writ
• yorha

为什么用无 class 主题？

• 响应式
• 浏览器支持好
• 好看
• 体积小（不到几 kb）——不必为每个能想到的组件浪费字节
• 没有学习曲线——照常写 HTML 就行，不用翻文档查哪个 class 管什么，也不用跟框架较劲
• 最初的 Hacker News 讨论帖

它是响应式的吗？

当然是！ 它不含任何花哨样式，所以很容易做移动端响应式。只要加上那个著名的响应式 viewport 标签就没问题了。

实际上，试试调整这个页面的大小，你会看到所有东西流动得非常顺畅。

元素演示

这应该是个演示页，所以得放更多元素！

表单元素

代码

下面有些代码，可以用 Ctrl-C 复制。你知道吗，alert(1) 能在 JavaScript 里弹出提示框！

// This logs a message to the consoleconsole.log('Hello, world!')

其他

这是水平线和图片，因为我不知道还能放哪儿。

---

这是一个 blockquote，或者更正式的说法

这是一个引用块

  老式的预格式化文本，完全不是代码

   |\_/|        ****************************    (\_/)
  / @ @ \       *  "Purrrfectly pleasant"  *   (='.'=)
 ( > º < )      *       Poppy Prinz        *   (")_(")
  `>>x<<´       *   (pprinz@example.com)   *
  /  O  \       ****************************

还有一个标记规整的表格！

| 名称 | 数量 | 价格 | | --- | --- | --- | | Godzilla | 2 | $299.99 | | Mozilla | 10 | $100,000.00 | | Quesadilla | 1 | $2.22 |

排版

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 这是加粗， 这是正常，这只是粗体，这是强调！ 还有，这里有个链接。

“HTML blockquote 元素（即 HTML 块引用元素）表示所包含的文本是一段较长的引文。它通常通过缩进来呈现（如何修改请见说明）。引文来源的 URL 可以用 cite 属性给出，来源的文字表式则可以用 <cite> 引用元素给出。”

• 无序列表项 1
• 无序列表项 2
• 无序列表项 3

1. 有序列表项 1
2. 有序列表项 2
3. 有序列表项 3

mailto:、tel:、sms: 链接的样式可能是这样的……

john.doe@example.com
778-330-2389
666-666-6666

标题 1

标题后面的一段 <p> lorem ipsum。层叠样式表（CSS）是一种样式表语言，用来描述以 HTML 这类标记语言写成的文档该如何呈现。CSS 与 HTML、JavaScript 同为万维网的基石技术。

标题 2

标题后面同样的一段 <p> lorem ipsum。

标题 3

标题后面同样的一段 <p> lorem ipsum。

标题 4

标题后面同样的一段 <p> lorem ipsum。

标题 5

标题后面同样的一段 <p> lorem ipsum。

标题 6

标题后面同样的一段 <p> lorem ipsum。

讨论整体对「无类名 CSS」这个方向抱有明显兴趣，但多数人认为现有主题的默认样式质量不达标，而且「classless」这个卖点在实际改动中很快就被打破；少数人则强调它在快速原型、极致轻量和约束 LLM 输出上的现实价值。

认为现成主题的默认样式普遍不及格

• 有人几乎翻遍了所有主题，没一个把基础排版做对：标题下方（到紧随段落）的外边距本该小于标题上方，很多主题在移动端左右外边距为零，整体默认值很糟（较多人） > 它们连「标题下的间距应小于标题上」这种基本功都没做到。（@mikae1）
• 支持暗色模式的主题少得让人意外，而暗色模式今天应该算合理默认的一部分（较多人）
• 大多数主题把按钮做得不像按钮（较多人）

认为「无类名」在实际使用中很快就不成立

• 只要想做哪怕最小的布局调整，就不得不引入非元素选择器；超出单页文档的场景，还是得用 matcha.css 这类可自定义构建的方案当起点（较多人） > 你基本上一想改布局，就立刻得引入非元素选择器了。（@shikwasa）
• 实践中要达到想要的页面外观，经常要加几个类，自己也犯过完美主义导致的类名泛滥（较多人）

认为它作为快速原型与性能手段依然值得用

• 快速手写原型非常好用，小体积样式表内联后的字节数甚至少于向服务器二次确认资源是否更新的那次往返（较多人） > 内联进去的字节数，比再跑一趟服务器检查资源有没有更新还少。（@maxk42）
• 个人服务端应用直接套 pico.css 就能得到可用的 UI 基线，也能约束 LLM 在 CSS 上做出的一些离谱操作（较多人）

认为 LLM 可能带来它的复兴

• 这篇 2019 年的文章，或许会因为 LLM 而被重新捡起来（少数人）

有价值的补充

• dropin-minimal-css 这个站点可以并排对比各种无类名样式表，正好解决逐个切换主题的痛点。
• 更准确的术语是 reset style sheet，「无类名 CSS」和传统 reset 样式表并不是一回事。
• matcha.css 允许在同一个页面上直接挑选自定义构建。
• 收录页里 vanillacss 出现了意料之外的域名跳转，其他主题都符合预期。
• 被点名的首选是 Pico.css，其他还有 simple.css、tacit、w3c-chocolate。
• 有人希望收录页能直接滚动浏览所有主题，但那样会显著增大打包体积，理解作者不做。