2022年了,CSS的终结解决方案是什么?

·  阅读 3446
2022年了,CSS的终结解决方案是什么?

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第 10 天,点击查看活动详情

这个问题的答案,不是 CSS-in-JS、不是 less/sass,也不是 CSS Modules。不是 Bootstrap、不是 Antd,也不是 Element-ui。
而是 TailwindCSS。
TailwindCSS 自诞生以来,一直褒贬不一。
有些人认为 TailwindCSS 名过其实了,它仅仅是简化版的内联 CSS 而已,它是一种技术的退化。
我并不认同这些观点,我认为他们并不是真的了解 TailwindCSS。
自 TailwindCSS 诞生以来,我就是 TailwindCSS 的用户,深度使用 TailwindCSS 长达 2 年左右,开发了十几款应用以及一个包含 80+ 组件的组件库。同时我还有在使用一些其他 CSS 方案,比如 SCSS、CSS-Modules、CSS-in-JS 库等。
在我的使用感受中,我认为 TailwindCSS 是目前最理想的样式解决方案。
而且 TailwindCSS 是目前最受关注和最受欢迎的 CSS 框架,这是不可否认的事实。
我不在本文中讲解 TailwindCSS 是怎么用的,因为它的上手成本真的非常低。
我会解释我喜欢 TailwindCSS 的理由,这些同时也是 TailwindCSS 的优点。请你认真看完,或许能够让你也成为 TailwindCSS 的用户。我相信通过使用 TailwindCSS,可以让你的下班时间提前。

不用再考虑为类命名

计算机的世界里有两大致命难题,其中一个就是命名。编写样式规则并不难,难的是为 class 命名。
在开发项目的过程中,你需要为 class 命名这件事考虑下面几个问题:

  • 我们团队该用什么命名规范?
  • 这个样式会多次使用吗?
  • 多次使用这个样式是否额外需要处理兼容问题?
  • 我会和其他样式组合使用它吗?会不会有冲突?
  • ......

如果你在开发一个小型项目,或许不需要为这些问题烦恼。但如果你在开发一个具有上百个页面的大型复杂应用,你必须考虑这些事情。因为项目中的样式代码并不是一个人在用,而是要和团队成员一起使用。这会形成很大的认知负担。
TailwindCSS 解决了这个问题,我们完全不需要为 class 命名。一切 class 都是直观的。

不需要在样式文件和 HTML 文件之间切换

如果你的样式文件和 HTML 文件是分离的,那么在开发过程中,你需要频繁地切换文件。这是一件很花费时间和容易分散注意力的事。
使用 TailwindCSS,因为我们的样式都是内嵌到 HTML 中的属性,所以不需要进行文件的切换,这会显著提高我们的开发效率。

不需要关注优先级

在传统的样式解决方案中,我们可能会碰到各种让人烦躁的样式冲突问题。特别是当我们的 DOM 结构非常复杂,那就难免会写出很多复杂的选择器。而选择器是有优先级的,复杂的选择器,很容易就会让样式发生意外。这时我们通常会选择使用 !important 来解决问题,但这样很容易让样式变得复杂。
TailwindCSS 在这一点上做得非常好,因为它只需要关注当前的元素,你想修改样式,只需要改它的样式,不会对其他元素造成任何影响,所以也就没有优先级问题。

以内联的方式使用媒体查询、伪类、子选择器

传统的内联样式有一个问题,就是不能使用媒体查询、伪类和子选择器。
如果你在开发响应式应用,你需要编写媒体查询,并在其中为某些结构创建不同的选择器,这很麻烦。
TailwindCSS 可以将这些全部用内联的方式使用,不需要单独编写选择器。

天然的 CSS 体积优化

如果你维护过非常大的样式表,你应该会碰到这个的问题:一堆乱七八糟的样式,但是你不敢删,因为你不知道到底有没有某个页面在用它。
在 TailwindCSS 中,它会在构建过程生成你项目中所用到的 CSS,不会有任何一条多余的样式出现。而且它会最大可能复用样式,让样式的体积始终处于最小的状态。

非常容易维护

和上面的所有理由相比,TailwindCSS 最大的优势在于非常好维护。
我们可以肆无忌惮的修改某个页面或者某个组件的样式,而不用担心会不会有什么额外的影响。
这和传统的样式解决方案是不同的。
在传统的样式解决方案中,我们修改某个样式,可能需要在一堆文件中查找,会不会破坏某些东西,或者引起样式冲突。而修改之后的测试和验证将会更难。
这就是传统样式解决方案的问题:会让样式的维护难度随着项目的复杂度增加而一同增加。
但 TailwindCSS 不会受项目的复杂度影响。无论是 1 个人开发 10 个页面的项目,还是 100 个人开发 1000 个页面的项目,样式的维护难度几乎都是一样的。

总结

现在我说了 Tailwind CSS 大部分优势。
在技术层面,它和一些传统的样式解决方案相比显得有些简单。但是它在开发效率、可维护性和性能上都有着非常明显的优势。这也是事实。
如果你认为我讲的有道理,可以在下一个项目中使用 TailwindCSS。
你会不会和我一样认为 TailwindCSS 是 2022 年最完美的样式解决方案呢?欢迎说出你的想法。

分类:
前端
收藏成功!
已添加到「」, 点击更改