CSS 在现代世界






4.38/5 (4投票s)
鉴于多年来发生了很多变化,我认为有必要从开发者的角度对 CSS 的现状进行一次“快照”,并探讨如何拥抱未来。
最近,W3C 发布了一个层叠样式表 (CSS) 的快照——该文档“将所有构成 2015 年 CSS 当前状态的规范收集在一个定义中。主要受众是 CSS 实现者,而不是 CSS 作者,因为此定义包含按规范稳定性而不是浏览器采用率划分的模块。” 这促使我思考 CSS 在当今现代 Web 开发者社区中的相关性,以及如何最好地进行实施。
鉴于多年来发生了很多变化,我认为有必要从开发者的角度对 CSS 的现状进行一次“快照”,并探讨如何拥抱未来。我个人的经验不足以提供答案,因此我进行了大量研究,并采访了行业专家,了解他们的观点。凭借我获得的所有数据,我知道我已有了足够多的发现来支持撰写一本书!我决定通过一系列在线文章来介绍 CSS,这样可以更快地推向市场,因此我很自豪地推出《精通 CSS 系列》的第一篇文章。
CSS 今天还有用吗?
对于许多 Web 开发者来说,质疑 CSS 的相关性可能显得很奇怪。然而,Web 开发中的新趋势引发了对 CSS 使用的疑问。我强烈建议阅读Louis Lazaris的文章,他提出了CSS 依然充满活力且运行良好的观点。尽管他的大部分文章都深入探讨了 CSS 仍然非常活跃的原因,但他还提到了React的流行,React 通过 JavaScript 使用内联样式。他还引用了一篇关于“我们还需要 CSS 吗?”的争论的文章,该文章很好地解释了开发者在实施 CSS 时遇到的一些痛点。我引用这些文章是因为它们为 CSS 开发者面临的挑战提供了背景,以及为什么有些人考虑其他替代方案。那么,这是否意味着 CSS 的趋势在下降?
正如本文的开篇词清楚表明的,CSS 领域充满了动力。主要的浏览器仍在努力实现 CSS 功能,充满热情的开发者社区也在努力继续使用 CSS 创建出色的网站。想想那些使用WordPress的无数博客网站,它们当然使用CSS 来辅助主题。凭借坚实的基础和活跃的社区,CSS 在今天仍然非常相关。
那么,反对 CSS 的有效论点是什么呢?虽然我在这里不打算一一阐述,但我很高兴看到这种“喧嚣”和一些人转向替代方案。为什么?因为挑战固有做法有助于社区改进,这是健康的。我个人认为,未来的 CSS 将由当今针对它的抱怨塑造而成。
简单的 CSS 真理
在我们现代世界里,我认为停下来思考我们所做事情的意义是很好的。本着质疑我个人持续使用 CSS 的精神,我想找到证据来证明我为什么仍然关心这样做。下面是我(在他人帮助下)得出的声明列表,这些声明增加了 CSS 持续成为我使用 Web 技术进行样式设计的首选的原因:
CSS 允许关注点分离。 CSS 是 HTML 的补充语言,它允许将样式定义与标记分开维护。更干净的标记更容易阅读和维护,并且通常更容易被搜索引擎爬取。
CSS 速度快。 它在很多方面都很快。可以更快地进行样式更改,HTML 页面加载速度更快,因为它们没有重复的内联样式,并且在过渡和动画等情况下,其处理速度通常比 JavaScript 快。
CSS 具有响应性。 CSS 可以根据查看尺寸或打印时的渲染方式,提供最佳的内容显示效果,这仅仅是几个例子。
CSS 拥有忠实的受众。 关于 CSS 的书籍、视频、文章和网站比比皆是。而且,致力于使 CSS 实现更轻松、更高效的库/工具/框架列表也在不断增长。
CSS 无处不在。 现代浏览器都支持 CSS,并且每个浏览器支持的功能列表都可以在 CanIUse.com 等网站上找到(请参阅下面的评论)。当使用 ManifoldJS 或 Cordova 等服务打包时,CSS 也用于为跨多个平台的移动应用设置样式。
关于 CSS 在不同浏览器中的状态,可以通过直接咨询每个特定供应商来更准确地衡量当前支持或正在开发的功能。例如,请查看 Microsoft Edge 的 CSS 路线图的相关dev.modern.ie 上的平台状态部分
当今 CSS 的使用
如今有多种方法可以实现 CSS。没有一种方法适用于所有场景,因为不同的项目有不同的需求和限制。有助于确定方法的问��包括:项目需要哪些 CSS 功能?我的项目需要支持哪些浏览器/平台?有多少开发人员将参与项目,他们的技能水平如何?最快的响应时间是否是高优先级?
在考虑了以上问题之后,现在是时候看看有哪些可用的方法了。可能性很高,因此我将将其分解为以下两个通用术语:
手动实现和维护 CSS。简而言之,开发人员负责 CSS 的所有方面。
通过扩展/框架辅助的 CSS。开发人员依赖扩展或框架来帮助编写高效的 CSS 和/或发布压缩文件。扩展/框架的类型多种多样,其中许多依赖于其他一个或多个扩展/框架。
虽然第二种方法在采用率方面明显呈上升趋势,但这并不意味着它总是最佳选择。例如,对于浏览器/设备可预测的小型内部网站点,实施多个 CSS 框架可能显得过度设计——尤其是如果该站点只有少量页面。在这种情况下,压缩文件是否至关重要?开发人员设置框架和学习框架的时间是否会比直接编写站点的时间更长?手动实现单个 CSS 页面可能就足够了。
实际上,许多站点会程度不同地采用第二种方法。例如,精通 CSS 的开发人员可能拥有出色的技能,但依赖工具进行文件压缩。另一个例子是使用像Bootstrap这样的完整框架,并购买主题以快速启动并运行一个网站。另一个例子可能是使用W3.CSS进行简单的响应式样式设计。在任何有助于(而不是损害)整体项目的程度上,都应大力考虑使用依赖项。
摘要
CSS 拥有悠久的历史,活跃的现状,并在 Web 开发中持续拥有未来。虽然在实现 CSS 方面存在挑战,但也有许多原因说明它为何仍是样式化 Web 的主流技术。本文侧重于 CSS 在我们现代世界中的作用。即将发布的《精通 CSS 系列》文章将涵盖最佳实践、顶级技巧,并深入探讨扩展和框架!
更多 Web 开发实践
本文是微软技术传播者和工程师的 Web 开发系列文章的一部分,涵盖了实用 JavaScript 学习、开源项目和互操作性最佳实践,包括 Microsoft Edge 浏览器和新的 EdgeHTML 渲染引擎。
我们鼓励您使用 Windows 10 的默认浏览器 Microsoft Edge 进行跨浏览器和跨设备测试——可使用 dev.microsoftedge.com 上的免费工具。
- 扫描您的网站是否存在过时库、布局问题和可访问性问题
- 下载适用于 Mac、Linux 和 Windows 的免费虚拟机
- 查看包括 Microsoft Edge 路线图在内的各浏览器 Web 平台状态
- 在您自己的设备上远程测试 Microsoft Edge
我们工程师和布道者的更深入的学习
- GitHub 上的编程实验室:跨浏览器测试和最佳实践
- 2015 年 Microsoft Edge Web 峰会(来自我们的工程团队和 JS 社区)
- 哇,我可以在 Mac 和 Linux 上测试 Edge 和 IE!(作者:Rey Bango)
- 在不破坏 Web 的情况下推进 JavaScript(作者:Christian Heilmann)
- 使 Web 正常工作的 Edge 渲染引擎(作者:Jacob Rossi)
- 利用 WebGL 和 Microsoft Edge 释放 3D 渲染功能(作者:David Catuhe)
- 托管 Web 应用和 Web 平台创新(作者:Kevin Hill 和 Kiril Seksenov)
我们的社区开源项目
- vorlon.JS(跨设备远程 JavaScript 测试)
- manifoldJS(部署跨平台托管 Web 应用)
- babylonJS(轻松实现 3D 图形)
更多免费工具和后端 Web 开发内容
- 适用于 Linux、MacOS 和 Windows 的 Visual Studio Code
- 使用 Azure Cloud 免费试用版 在 Azure Cloud 免费试用,使用 Node.JS 进行编码。