Hacker News 中文摘要

RSS订阅

你不再需要JavaScript：现代CSS的卓越特性概览 -- You no longer need JavaScript: an overview of what makes modern CSS so awesome

原文链接 | HN讨论 | 2025-08-29 10:53:10

文章摘要

现代JavaScript框架导致网页加载缓慢、错误频发，且占用大量存储空间，但实际上许多网页并不需要这些框架。尽管作者对框架有个人偏见，但仍承认它们在特定场景下的价值，而真正的问题可能在于大量追踪脚本和低质量代码的混合使用。

文章总结

标题：你不再需要JavaScript

主要内容：

现代JavaScript框架的臃肿问题已经严重影响了网页的性能和用户体验。React应用加载缓慢，NextJS网站出现随机的水合错误，node_modules文件夹占用大量硬盘空间。然而，这些并不是必须的。

许多网站并不需要JavaScript。虽然复杂的电商网站可能需要它来处理购物车和数据可视化，但对于大多数网站来说，JavaScript并不是必需品。HTML和CSS已经能够实现许多功能，甚至在某些情况下比JavaScript更高效。

CSS的强大功能：

许多开发者对CSS的负面评价源于对其使用方式的不了解。CSS不仅仅是一个用于添加边框和阴影的工具，它是一种强大的领域特定编程语言。近年来，CSS增加了许多新特性，如嵌套、相对颜色、媒体查询范围语法等，使得编写CSS变得更加简洁和高效。

CSS的优势：

  1. 性能：CSS动画运行在单独的合成线程中，不受事件循环的影响，因此在低端设备上表现更好，即使在高性能设备上也能提供流畅的体验。
  2. 用户体验：许多用户出于安全或隐私考虑，会禁用JavaScript。使用CSS可以确保这些用户也能完全体验网站内容。
  3. 开发便捷性：许多常见的交互效果，如按钮悬停、输入验证等，都可以通过CSS轻松实现，无需引入额外的JavaScript代码。

CSS的新特性：

  • 嵌套：允许将相关的样式规则放在一起，使代码更易读和维护。
  • 相对颜色：可以基于现有颜色生成新的颜色，适用于按钮悬停效果等场景。
  • 媒体查询范围语法：使用(width <= 768px)代替(max-width: 768px)，使代码更简洁。

CSS的未来：

CSS的不断进化使得它比以往任何时候都更加强大和易用。通过使用Baseline，开发者可以确保特定功能在所有主流浏览器中都能正常工作。

结论：

虽然JavaScript在某些场景下仍然是必要的，但在许多情况下，CSS已经能够提供更好的解决方案。开发者应该根据具体需求选择最合适的工具，而不是盲目依赖JavaScript。CSS不仅是一种实用的工具，也是一种表达艺术的方式。

后续：

作者计划在未来发布更多关于CSS的文章，探讨其不实用但非常酷的功能。同时，作者也将在多个技术会议上进行相关演讲，分享更多关于CSS的见解。

讨论：

欢迎在Twitter、Mastodon和Lobsters上讨论这篇文章。

评论总结

评论内容总结：

  1. CSS的复杂性：多位评论者认为CSS语法复杂且难以理解，尤其是对于初学者或不常用的属性。

    • "CSS is really that hard. Unless you use the subset of CSS that you have decided to learn + use." (paulddraper)
    • "CSS is by far the hardest to read and understand. It’s easier to understand x86 assembly than CSS." (mannyv)

  2. 现代CSS的进步：部分评论者赞赏现代CSS的改进，认为它变得更加合理和强大。

    • "Modern CSS is indeed great. I’m using modern CSS, htmx, and Haskell to develop apps and am loving it." (lemonwaterlime)
    • "CSS is starting to feel a lot more sane these days." (awongh)

  3. JavaScript与CSS的关系：一些评论者讨论了JavaScript在网页开发中的作用，认为它不应完全取代CSS，但也指出CSS的局限性。

    • "JavaScript is for more than augmenting CSS." (wewewedxfgdf)
    • "If you want to use Javascript with this, it has to be inside a manually edited IFRAME or FRAME." (Animats)

  4. 工具与学习资源：有评论者询问如何学习现代CSS以及是否有最新的在线参考资料。

    • "How can one learn modern CSS and is there an online reference that is up to date?" (wpollock)

  5. CSS的未来与自动化：部分评论者希望CSS能够进一步自动化，甚至完全由设计工具或AI生成。

    • "Still waiting for 'you no longer need CSS'. Can we offload it entirely to figma, AI, or the designer?" (nsonha)

  6. 具体技术问题：一些评论者提到CSS中的具体技术问题或功能，如vw/vh的使用、颜色选择器的故障等。

    • "I don’t agree with his 'Do not the vw/vh'. I find vw very useful for a scaling pixel-perfect mobile portrait view." (dwd)
    • "Colour picker isn’t working for me on android Chrome stable 139.0.7258.158." (adithyassekhar)

  7. CSS示例的误导性：有评论者指出文章中的CSS示例在实际操作中无法正常工作，认为这可能会误导读者。

    • "I pasted it into a file and it doesn’t work. I honestly didn’t expect it to work." (socalgal2)

总结：评论者对CSS的看法存在分歧，一方面认为其复杂且难以掌握，另一方面赞赏现代CSS的进步。同时，JavaScript与CSS的关系、CSS的未来自动化以及具体技术问题也是讨论的焦点。