设计与产品wiki.csswg.org
CSS 设计错误的不完整清单
Incomplete list of mistakes in the design of CSS
2015 — 2025，它一次次回到首页
黑点是上首页（≥ 50 分）的那次投稿，空心点是没冲上去的投稿，点越大分数越高。
导读
这是 CSS 工作组 wiki 上维护的一份“CSS 设计错误”不完整清单，记录语言中已被认为失策、且往往难以回头修改的设计决定。页面本身更像工作笔记，但围绕它的讨论集中在 CSS 是否偏离真实布局需求、是否适合动态交互，以及它相对其他排版系统的易用性。
为什么经久不衰：它把 CSS 历史上难以回头修补的取舍集中摊开，让开发者理解日常痛点从何而来，也让“CSS 该如何演进”的争论一直有新素材。
HN 评论精选
批评 CSS 缺乏对动态交互和过渡的程序化控制，导致简单 UI 也要靠 JS hack，主张需要面向动态交互的新 CSS。
我不认为语法和方案之类才是真正糟糕的部分。真正糟糕的是，CSS 在设计上根本不是给 CSS 之外的东西交互使用的。昨天我在做一个音乐播放器的进度条，用 CSS transition 让它平滑更新；但 JS 不知道样式何时真正更新，才能用新属性覆盖来触发过渡，属性设得太快过渡就不会发生。比如用户点击进度条改变位置时，我得先用 transition:none 停掉过渡，再 hack 一个 100ms 的 setTimeout 去设置新的过渡时长。为什么我不能控制过渡的位置？Chrome 的动画查看器都能轻松前后拖动时间。为什么交互性不跟 CSS 分开？CSS 元素不能影响自己作用域之外的东西，像一些本该原生支持的简单事情都得靠 JS。你可以根据 URL hash 名让 CSS 做某些事，但不能在 CSS 里设置它们，也不能改元素上的属性、类名之类。我觉得 JS 已经是网页的“编程语言”，意图远超渲染和交互；也许我们需要一种为动态交互而生的新 CSS。
devwastaken查看英文原文
I don't think things like syntax and schemes are the real bad parts. The real bad part is that CSS is in no way designed to be interacted with by anything but CSS. Just yesterday I was making a music player position bar, and using CSS transitions to have it smoothely update itself. Set the duration of the transition and it goes on. But what about when the transition takes effect? JS doesn't know when a style is actually updated and can then have a new property overwriting it to make the transition happen. If you do properties too quickly the transition won't happen. Such as if a user clicks on the bar to change the position, I have to hack in a 100ms setTimeout to set the new transition duration after stopping the transition with transition:none; Why can't I control a transitions location? Chrome's animation viewer can go back and forth in time easily. Why isn't interactivity seperate from CSS? CSS elements cannot effect those outside of its scope. You require JS for just dumb simple things that should be natively supportable. For instance you can make CSS do things based upon URL hash names like #somename, but you can't set them in CSS. You can't change attributes on elements, or classes or anything like that. I think we've gotten to the point where JS is the 'programming language' of a webpage that has intentions far beyond rendering and interactivity. Perhaps we need a newer kind of CSS that's made for dynamic interactions. That way great UI's can be built in a safer css-like environment.
认为清单多是吹毛求疵，CSS 源自印刷样式表，核心目标是让网站外观可集中更新，CSS Zen Garden 证明了其力量。
这些大多是吹毛求疵，有些还是我会反对的偏好。CSS 的灵感来自旧时代的样式表——油墨压进纸张的排版出版物。杂志或报纸可能有一份“样式表”，写着“段落应为 10 磅 Caslon”“所有二级标题应为悬挂标题，向外缩进 5 派卡”。在网页浏览器接手之前，样式表已经通过 QuarkXPress 甚至 Microsoft Word 这类桌面出版软件进入电子世界。他们要解决的问题是：如何轻松更新网站的外观和感觉？那还是大多数网站是静态 HTML 文件的时候，更新所有文章意味着每页都要改文件。CSS 能力最著名、最漂亮的例子是 CSS Zen Garden：2003 年 Dave Shea 提供了一张无样式 HTML 页面，然后世界各地设计师贡献样式表，把它变成截然不同的设计。
combatentropy查看英文原文
Most of these are nitpicks. Some are preferences that I would oppose. CSS is inspired by the style sheets of yore, of typeset publications made by ink-smeared metal pressed into paper. A magazine or newspaper might have a "style sheet" that said things like, "Paragraphs shall be 10-point Caslon" and "all second-level headings shall be hanging headings, outdented 5 picas." Before web browsers got a hold of them, stylesheets had already entered the electronic world in desktop-publishing software like QuarkXPress and even Microsoft Word. The problem they were trying to solve was, how do you update the look and feel your website easily? This was in the days when most websites were static HTML files, and updating all your articles meant changing a file for every page. The most famous and beautiful example of the power of Cascading Style Sheets is CSS Zen Garden. In 2003 Dave Shea provided an unstyled page of HTML, and then designers from around the world contributed stylesheets that transformed the page into wildly different designs (http://www.csszengarden.com/).
批评 CSS 早期设计脱离常见布局需求，迫使开发者用 hack 或绕开 CSS，而不是直接支持客户真正要的页面。
它本应围绕人们实际想做的事来设计：带页眉页脚的三栏布局、内容居中、细条纹（这个现在不那么流行了）、投影等等。可这些东西要么需要肮脏的 workaround，要么得完全跳出 CSS。CSS 的头十年就是“看看你能做多少你不想做的事，只要你别试图做客户真正要求的网站！”真愚蠢，多年后想起来还让我生气。
mcphage查看英文原文
(1) it should have been designed around what people actually try to do: three column layouts with headers and footers, aligning content in the middle, pinstriping (this one isn’t as popular anymore), drop shadows, etc. Instead, all of these things required either hacky workarounds, or stepping outside of CSS entirely. The first decade of CSS was “look at all these things you can do that you don’t want to, and you can use them so long as you don’t try to make the kind of sites your clients actually ask for!" So fucking stupid, it still makes me angry years later.
对比 LaTeX 后认为 CSS 的抽象和易用性被低估，元素树和类让布局修改直观得多。
直到最近我才终于意识到 CSS 被设计得有多用户友好。当我开始折腾 LaTeX 想给论文找个更好看的排版时，越来越清楚 CSS 的设计是经过思考且符合人体工学的。用 LaTeX 太痛苦了，我都不敢相信自己以前还抱怨过 CSS。在 CSS 里几行清晰代码就能做到的事，在 LaTeX 里要几十条难以理解的命令序列；比如改章节标题字号都不是小事，最后我写出一串复杂命令，而在 CSS 里只需 h1{font-size:1em;}。TeX 的问题是没有容易使用的抽象。CSS 里有元素——其实是元素树——它们有自己的属性，而且还能被轻松修改；你甚至可以给元素一个 class 让它们共享属性。这些在 TeX 里都不存在。我以前不知道元素及其属性的层级结构概念能给你一个直观的布局接口。当然，CSS 可能不提供对渲染的完全控制，TeX 在这方面无疑更强，但……
quarterlyresult查看英文原文
It wasn't until recently that I finally realized how user-friendly CSS was designed to be. As I started to fiddle with LaTeX in search of better looks on my papers, it gets more and more clear that the design of CSS is thoughtful and ergonomic. It is so painful to work with LaTeX that I could not believe I had complained about CSS. What would take a few lines of clear code in CSS would take dozens of undecipherable sequence of commands in LaTeX. For instance, just changing the font size of section headings in LaTeX is not a trivial matter. Eventually I ended up with this: \renewcommand\section{\@startsection {section}{1}{\z@}% {-3.5ex \@plus -1ex \@minus -.2ex}% {2.3ex \@plus.2ex}% {\normalfont\normalsize\bfseries}} It would take just h1{font-size:1em;} in CSS. The problem of TeX is that it has no abstraction that is easy to work with. In CSS, you have elements -- actually, a tree of them -- and they have their own attributes, and in addition, they can be easily modified. You can even give elements a class to have them have common properties. All things that do not exist in TeX. I did not know how the concept of a heretical structure of elements and their attributes give you an intuitive interface to a layout. Certainly, CSS might not provide you with full control over how things are rendered. There is little doubt that TeX excels in that regard. But how many people need to be able to easily create a new math operator? Is it worth making it difficult to change the font size of headings?
历次讨论
同类还值得读
贝塞尔曲线入门
A Primer on Bézier Curves
Pomax 编写的贝塞尔曲线在线教程，从基础概念一路讲到曲线求交、投影、曲率等进阶内容，并配有可交互的示例和配套的 bezier.js 库。
设计与产品上首页 7 次 · 2014–2022pomax.github.io编辑精选WebGL 水面模拟
WebGL Water
Evan Wallace 制作的 WebGL Water 演示：在浏览器里实时渲染一片水面，展示折射、反射和焦散等 GPU 图形效果。
设计与产品上首页 6 次 · 2011–2025madebyevan.com设计建议：永远不要使用黑色
Design Tip: Never Use Black
设计随笔提出“永远不要用纯黑”的建议，主张在界面和绘画中改用深灰或带色相的暗色，并借阴影与色彩关系来论证。
设计与产品上首页 5 次 · 2012–2021ianstormtaylor.com用于思考不可想象之物的媒介
Media for Thinking the Unthinkable
Bret Victor 的这个页面围绕《Media for Thinking the Unthinkable》展开，探讨我们用来思考和表达复杂问题的媒介，以及以文字/符号为主的传…
设计与产品上首页 5 次 · 2013–2020worrydream.com编辑精选页面重量很重要
Page Weight Matters
博文讲 YouTube 工程师 Chris Zacharias 的一次页面瘦身实验：团队做了一个更轻量的页面版本，起初从整体平均加载时间看反而更慢；按地理区域分层后才发现，轻量版…
设计与产品上首页 4 次 · 2012–2022blog.chriszacharias.com