现在的 CSS 是否太多了?

Avatar of Sacha Greif
Sacha Greif 发表于

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用,获得 200 美元的免费赠金!

作为前端开发人员,多年来我们一直期待着很多东西——在 CSS 中居中元素的方法、封装样式、设置元素的纵横比、对颜色进行更精细的控制、根据子元素的属性选择元素、管理特异性层级、允许元素响应其父元素的宽度……这样的例子不胜枚举。

现在我们已经拥有了所有我们想要的东西,甚至更多,我们中的一些人开始问——我们现在是否拥有*太多*的 CSS 了?

黑暗时代

如果你像我一样,在 CSS 发展的初期就开始了网络开发工作,那么拥有太多 CSS 的想法似乎很荒谬。

在过去,前端开发人员的几乎全部工作内容就是处理 CSS 的局限性。使用 clearfix hack 来清除浮动,使用 100% padding hack 来制作方形 div,更不用说半随机地应用不相关的属性来诱使 Internet Explorer 按你的意愿行事。

那时,浏览器是一个狡猾的敌人,只能通过绝对的狡黠和神秘的咒语才能战胜它。如今,完美的属性就在那里,只需在 MDN 上复制粘贴即可。

CSS 的新时代

但今天的情况已经大不相同:不仅事情发展得更快,而且浏览器供应商*真的关心*开发人员的感受!我知道,我也不敢相信。但我负责进行年度 CSS 现状 开发人员调查(顺便说一句,该调查 现在开放——快去参加吧!),我知道浏览器开发团队确实使用调查结果(以及许多其他数据点)来指导他们的路线图。

除此之外,谷歌还资助了我在这项调查上的工作,甚至聘请了 Lea Verou 来领导今年调查问题的选择。

这不仅仅是谷歌。抨击 Safari 和苹果公司已经成为一种潮流(有时是理所当然的),但你不能否认像 Jen Simmons 这样的人是多么热衷于倾听开发人员的意见并改进网络。

浏览器供应商不仅在自行改进 CSS;他们甚至还通过 Interop 2023 等倡议跨越竞争界限进行合作,以帮助减少浏览器之间的不一致和不兼容性。

过犹不及?

所有这一切的结果是,我们现在面临着 CSS 资源过剩的尴尬局面,而且可能很难赶上。 CSS 网格布局 在大约五年前就开始在主流浏览器中得到支持,但我每次使用它时仍然会查阅参考资料。尽管 subgrid 看起来很酷,但我还没有尝试过。

在选择 在 CSS 现状中包含或不包含哪些 CSS 功能 的过程中,Lea 和我考虑了许多功能,但我们也拒绝了不少功能。我们*没有*包含的一些功能示例包括:

这些都可能非常有用,而且在过去几年 CSS 匮乏的时期,这些都将是重大新闻。但在今天的背景下,它们必须与更大的公告争夺注意力,比如 has() 选择器或 CSS 嵌套!

不兴奋

正如 Silvestar Bistrović 写道,他“对所有这些新的 CSS 功能并不那么兴奋”。这在 Twitter 上引起了共鸣,Sara Soueidan 表示,她关心的是“实用性,而不是一项功能目前看起来有多么光鲜亮丽”。

这似乎是一种消极的态度,但我认为这是可以理解的。没有人能够跟上这么多新功能的步伐!

另一个意外的(或者可能是故意的?)后果是,CSS 越复杂,任何想要开发浏览器引擎的新公司面临的门槛就越高——更不用说维护和记录所有这些新功能所增加的工作量了。

CSS 越界

还有一种非常合理的担忧,那就是 CSS 可能正在扩展到它不太适合处理的领域。这是 Sara Soueidan 在对新的 CSS Toggles 实验性实现(这里有一张讨论它的票)做出反应时指出的另一点。

许多人提出了非常合理的观点,即这种行为最好由新的 HTML 元素来处理,而不是完全通过 CSS 来管理切换状态,而且 CSS 可能不是确保正确解决可访问性问题的最佳媒介。

当 CSS 接管以前由 JavaScript 处理的事情时,这通常被认为是一件好事,因为它通常可以减少浏览器必须加载的代码量。因此,我对 CSS Toggles 持谨慎乐观的态度,并且相信 CSS 工作组会妥善解决社区的担忧。但也许有一天,我们会开始担心 CSS 可能超出其边界,侵占 HTML 和 JavaScript 的职责。

新的期望

也许这才是需要改变的地方:也许我们应该放弃 CSS 开发人员必须了解*所有* CSS 的期望?

https://twitter.com/housecor/status/1577668059652931586

这种期望源于 CSS 只是一个事后诸葛亮的时代,那时你必须学习这种烦人的语法,才能像客户要求的那样让你的按钮变成蓝色和粗体。但我认为我们需要接受,今天的 CSS 可能太庞大了,一个人无法掌握,尤其是在还要承担其他前端职责的情况下。

正如 Michelle Barker 所说

这就是我最终的落脚点。我已经接受了这样一个事实,即我可能永远不会使用——甚至不知道——所有可能的 CSS 功能。而这番话出自一个*运营 CSS 调查*的人之口!

但这些新特性对*某些人*肯定是有用的。有些人会写博客文章,用它们创建很酷的 CodePen,并做关于它们的演讲。那个人将会是一位很酷、年轻、充满活力的开发者,而且头发还很浓密。换句话说,那个人不会是我——这很好。 

也许你会担心这位新的开发者会被他们必须同时学习的所有东西压垮。但请记住,所有他们*不必*学习的东西,正是因为它们已经被这些更新的替代方案所取代。我知道我随时都会接受这样的交易。

但是想一想:在过去的几年里,我们不仅看到了需要满足的设备数量的巨大增长,我们也开始认识到,我们都以略微不同的方式使用网络,无论是由于残疾、当前的环境,还是仅仅是个人喜好。CSS 不应该适应这个新的现实吗?

现在,我必须承认这一切都让我感到有点怀旧……所以请原谅我去清除一些浮动,只是为了怀旧一下。


正如我提到的,年度 CSS 状态调查 现已开放。无论你是否认为 CSS 太多了,这项调查都是让浏览器开发者了解你的感受的好方法,所以如果你有 10 分钟的时间, 去填写一下 吧。