CSS的终结解决方案是什么?

简介: CSS的终结解决方案是什么?

这个问题的答案,不是 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 年最完美的样式解决方案呢?欢迎说出你的想法。



相关文章
|
11月前
|
Web App开发 前端开发 开发者
|
Web App开发 JavaScript 前端开发
CSS3动画卡顿性能优化解决方案
CSS3动画卡顿性能优化解决方案
CSS3动画卡顿性能优化解决方案
|
2月前
|
前端开发 容器
css 【详解】—— 图片底部留有间隙(含解决方案)
css 【详解】—— 图片底部留有间隙(含解决方案)
94 0
|
4月前
|
前端开发 UED 开发者
【专栏】探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施
【4月更文挑战第29天】本文探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施:简化动画路径、控制元素数量、优化代码结构、利用硬件加速及性能监测。通过实际案例展示了优化效果,强调了性能优化对提升用户体验的重要性。在开发中,应持续关注并优化动画性能,以适应网页应用的需求。
289 1
|
数据可视化 前端开发
漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案
漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案
121 1
|
前端开发 定位技术 容器
百度地图高级开发:上滑推拉菜单CSS解决方案
百度地图高级开发:上滑推拉菜单CSS解决方案
79 0
|
前端开发
layui使用table组件实现排序的CSS样式调整解决方案
layui使用table组件实现排序的CSS样式调整解决方案
242 0
|
前端开发
CSS按钮高亮的解决方案
CSS按钮高亮的解决方案
93 0
|
前端开发
Echarts实战案例代码(49):基于不支持立体漏斗图Funnel的HTML+CSS解决方案
Echarts实战案例代码(49):基于不支持立体漏斗图Funnel的HTML+CSS解决方案
171 0
|
前端开发 容器
Echarts实战案例代码(46):带渐变背景颜色的倾斜角度的图表的CSS样式表解决方案
Echarts实战案例代码(46):带渐变背景颜色的倾斜角度的图表的CSS样式表解决方案
117 0