作为前端开发人员,多年来我们一直期待着很多东西——在 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 和我考虑了许多功能,但我们也拒绝了不少功能。我们*没有*包含的一些功能示例包括:
linear()
easing 函数,它允许你以更精细的方式定义缓动曲线。env()
函数,它允许你使用浏览器或设备定义的变量。scrollbar-width
属性,它有助于控制滚动条的外观。margin-trim
属性,它允许你控制容器子元素的外边距行为。
这些都可能非常有用,而且在过去几年 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 的期望?
这种期望源于 CSS 只是一个事后诸葛亮的时代,那时你必须学习这种烦人的语法,才能像客户要求的那样让你的按钮变成蓝色和粗体。但我认为我们需要接受,今天的 CSS 可能太庞大了,一个人无法掌握,尤其是在还要承担其他前端职责的情况下。
正如 Michelle Barker 所说
这就是我最终的落脚点。我已经接受了这样一个事实,即我可能永远不会使用——甚至不知道——所有可能的 CSS 功能。而这番话出自一个*运营 CSS 调查*的人之口!
但这些新特性对*某些人*肯定是有用的。有些人会写博客文章,用它们创建很酷的 CodePen,并做关于它们的演讲。那个人将会是一位很酷、年轻、充满活力的开发者,而且头发还很浓密。换句话说,那个人不会是我——这很好。
也许你会担心这位新的开发者会被他们必须同时学习的所有东西压垮。但请记住,所有他们*不必*学习的东西,正是因为它们已经被这些更新的替代方案所取代。我知道我随时都会接受这样的交易。
但是想一想:在过去的几年里,我们不仅看到了需要满足的设备数量的巨大增长,我们也开始认识到,我们都以略微不同的方式使用网络,无论是由于残疾、当前的环境,还是仅仅是个人喜好。CSS 不应该适应这个新的现实吗?
现在,我必须承认这一切都让我感到有点怀旧……所以请原谅我去清除一些浮动,只是为了怀旧一下。
正如我提到的,年度 CSS 状态调查 现已开放。无论你是否认为 CSS 太多了,这项调查都是让浏览器开发者了解你的感受的好方法,所以如果你有 10 分钟的时间, 去填写一下 吧。
也许将来需要有一个重新评估阶段:是时候退一步说“我们可以添加哪些功能来取代其他三个功能,同时使思维模型更简单?”或者,“哪些功能可以被移除,因为已经有更好的方法来实现旧方法的所有可能用法?”
我想知道 Houdini 和添加实际逻辑编程来定义布局和样式的系统是否会在很大程度上消除对 CSS 中如此多的特定声明性属性的需求。
谢谢你的文章,我也这么认为——控制网站外观和行为的最小细节的想法很令人兴奋——但它变得越来越多了——过去可以记住所有属性的名称并预测它们几乎所有的工作方式 :)
开发者是否曾经被期望将整个 CSS 规范都记在脑子里?
关心无障碍性的人会积极地添加使无障碍性更容易实现的功能。
那些为了无障碍性而要求网络冻结的人只是在停滞不前。
我是你所说的新开发者之一(大约 1 年的自学经验),我在这里证明,纯 CSS 从头开始学习非常容易,而且一点也不觉得难。我知道我经常使用的所有东西(包括网格/弹性布局),并在需要的时候在 MDN 或这里查阅其他的东西;所以这与使用大型 API 并没有什么不同,只是 CSS 的文档非常好 ;-)
如果我经营一个浏览器,我肯定会专注于开发者体验。与原生应用程序相比,网络应用程序越多,浏览器就可以收集越多的功能和信息。(我想如果他们开始插入广告,我们就麻烦了……)
我宁愿有 100 个人们不一定会感到兴奋的新功能,也不愿只有几个让人兴奋的功能。
只要这 100 个功能能让网站的外观和行为更符合我的要求。这应该关乎实用性,而不是兴奋程度。
想一想,英语中有超过一百万个单词,其中大约 170,000 个单词正在使用中,而每个人使用的单词数量在 20,000 到 30,000 个之间。
我们是停止添加与今天相关的的新词,还是抛弃目前没有使用的 830,000 个单词?
我认为这与你关于 CSS 过多的问题类似。
自然语言不是声明性语言。CSS 有可能变成 C++,你可以用 10 种方法做一件事,这很糟糕,而且在框架和库的生态系统中,这会进一步分裂社区。在自然语言方面,世界也被语言分割成了太多种说法,面包就是一个例子。
并非如此。所有额外的 CSS 功能(以及 JavaScript 中的那些功能)的惊人之处在于,它们增加了你可以制作的东西的数量,为你提供了更多制作有趣网站和应用程序的可能性。
因此,虽然我现在可能不会使用某些功能,但其他人很可能在将来找到它们的有趣用途。并且可能会因此创造出我从未想象过的各种东西。
我曾经是一名网络开发者,那时候我们必须使用 9 张图片和一个表格来制作一个带有圆角和背景纹理的盒子。是的,很多新功能都非常有用!
我真的感觉到,W3C、WHATWG 和浏览器厂商更加专注于设计和实现人们在日常工作中真正需要的功能。在过去,使用浮动来实现多列布局是可以的,但使用弹性盒和网格布局的感觉比必须理解清除浮动是什么要好得多。
如今,我们不再需要那么多奇怪的技巧来完成我们需要的功能,这应该会使代码更容易阅读。但是现在,我们手头有了这么多强大的功能,对设计的各个方面进行细粒度控制通常会导致一个按钮需要 100 行 CSS 代码,以及多层抽象的自定义属性。
除此之外,还有许多用途可疑的属性,比如
will-change
、contain
或contain-intrinsic-size
。当然,对于复杂的应用程序来说,这些都是受欢迎的补充,但许多开发者也感受到了在相当简单的项目中使用这些功能的压力,这增加了不必要的复杂性,但却没有什么好处。对我来说,现在要详细学习所有的 CSS 内容太多了,但另一方面:也许也不再需要学习所有的 CSS 内容了。
W3C 目前显示有 559 个不同的属性名称,所以显然自 10 月 5 日以来已经添加了 11 个属性!
对我来说,CSS 已经从简单易用变成了令人沮丧。我不是整天都在做 CSS 开发,它只是我有时必须使用的技术之一。在这一点上,它似乎不再是一种人类的语言。
应该有更好的可视化编辑器来开发屏幕(阅读器)元素、它们的定义、布局、过渡等,并生成将用于生产的实际 CSS。消除设计和开发之间的分离,我们都在同一个团队中。
CSS 功能的目的是为设计提供尽可能多的灵活性,以准确地设计出设计师想象的内容。它的发展方式很棒。
如果有人觉得 CSS 的功能太多,那就意味着它不适合他们。
也许工作岗位会再次细分,变得更加专业化。
所以人们都在抱怨 CSS 太多了,但难道不担心每天都会出现一个新的 JS 框架吗?
是否有任何机制可以弃用或移除过时的 CSS 功能?它们肯定不可能都是解决布局和样式问题的当前预期方法。
我们不得不转向“常青”浏览器来获取 HTML 更新。不妨利用这一点来简化 CSS。
即使要到几年后我们才能真正用 CSS 3000 来清理规范,而且我们只能将功能标记为“遗留”支持,但能够定义一个合理的、现代的、可用的子集将是向前迈出的一大步。
虽然我部分同意(标签轮播等功能*有点*太泛化了),但我不同意你关于 CSS 已经变得“过于复杂”的说法。
CSS 是程序员为网站设置样式的主要手段。由于人们可能希望为元素设置样式的方式多种多样,因此 CSS 功能的多样性可以说是必要的。
我喜欢 CSS 管理复杂性的方式:将属性(大致)分为两类。一方面,你有“通用 CSS”(这是我编造的术语)。这是一组数量可控的小功能集,每个人每天都在使用,比如
margin
和font-size
。如今,你还可以将border-radius
和box-shadow
包括在内,因为它们在现代审美风格中很流行。另一方面,你还有“高级 CSS”,这是一个*庞大*的专用功能集,很少使用,但当你需要做任何它所处理的事情时,它们都非常有价值(你提到的linear()
缓动函数就是一个很好的例子)。你不需要记住高级 CSS 的所有内容就能写出好的 CSS;你只需要了解通用 CSS,并且能够在 MDN 文档中搜索高级 CSS 功能。我们对 CSS 的了解越多,就越难跟上
@Moaz,你是对的,CSS 不仅越来越先进,而且许多网站都包含了大量的 CSS 代码。经过一些研究,你会发现 CSS 在开发过程中往往会发生偏移,样式和属性会变得无用并被废弃。我确实找到了一篇关于删除死代码的文章,还挺有意思的:https://appcode.app/how-to-remove-unused-css/
你是对的,应该在使 CSS 更容易使用方面做一些开发。
我曾经是一名专注于 HTML/CSS 的开发者,工作了很长时间。许多公司专门雇用我,就是因为我能够将 .PSD 文件转换为 HTML 代码,甚至在 CSS 出现之前也是如此。后来,我们经历了 CSS hack 的黑暗时代,不得不为各种浏览器(尤其是该死的 IE6、7、8、9)编写兼容代码。如今,公司不再需要专家了,他们希望全栈工程师精通所有技术,包括数据库管理。看着初级工程师使用最新、最强大的 CSS(却只在 Chrome 或 Edge 上受支持),然后在 Firefox、Safari 或任何一种移动版 Chrome 上无法正常工作时感到沮丧,真是令人啼笑皆非。
我很欣赏所有漂亮的新 CSS 特性,但天哪,它们的学习曲线真是太陡峭了。很多时候,一些不那么花哨的技术就足以胜任,而且简单易用。