免费体验 Gpt4 plus 与 AI作图神器,我们出的钱 体验地址:体验
本文是 关于Tailwind CSS 与 现代 CSS之间比较的文章。文章中作者详细比较了这两种CSS开发方法的优缺点。他指出,Tailwind CSS是一种基于类的CSS框架,提供了快速开发网站的便利性,但可能导致HTML代码的臃肿。另一方面,现代CSS方法更加模块化和可维护,但编写速度可能较慢。
下面是正文~~
Tailwind 是一个深受喜爱的 CSS 框架,它拥有许多受欢迎的功能,用于创建用户界面。在本文中,我们不会深入探讨 Tailwind,而是要探讨 Tailwind 中使用内联类的问题,以及触及一些改变我们处理这些问题的新的原生 CSS 功能。
内联类是 Tailwind 的一个备受赞誉的特性。在寻求关于 Tailwind 的反馈时,作者收到了各种各样的意见,但其中一个观点引起了作者的关注。这个问题并不是特指 Tailwind,而是更多地关于开发者修改代码的态度:
有些开发者表示,他们喜欢 Tailwind,因为他们可以不切换屏幕就管理他们的 CSS 和 HTML。因此,作者对此持有坚定的立场:
作者强烈建议,管理多个文件或语法应该是工具,如 IDE、文本编辑器、终端或甚至多显示器的责任,而不应该在代码库中解决。
以上并不是特指 Tailwind,而是关于对软件开发有一个专业的认识。作者不希望这个立场受到反驳,作者相信这是一个成熟的看法。
一个内联类定义了一个范围。Rohan 很好地描述了 Tailwind 的这个优势:
这可能是与传统 CSS 项目中的不可预测的做事方式相比,Tailwind 最引人注目的优势。
幸运的是,现代 CSS 可以与传统的 CSS 不同地进行作用域化。原生 CSS 至少有两种方式可以定义范围。
经过两个月后:
在级联层中包裹你想要调整的新样式
在嵌套作用域中使用新类
这两种方法都使用原生 CSS,并可以达到与 Tailwind 相同的效果,尽管对于某些人来说,可能需要进行一些范式转变才能习惯。
关于内联类,有一些问题。这些问题可能是微不足道的,也可能是严重的,这取决于你的项目或你如何解释它们。
因为嵌套作用域是私有的:
与 CSS 框架相比,CSS 嵌套和相对选择器不仅意味着我们定义的内联类更少,而且与传统 CSS 项目相比,我们定义的内联类也更少。
如果你还在使用老式的 CSS,那就停下来吧。想办法与时俱进吧。也许下面的内容能帮到你,但这已经超出了你的能力范围(没有双关的意思):
在过去 15 年多的时间里,CSS 库和框架主要依赖于过多的内联类。Tailwind 也不例外。
在作者看来,嵌套 CSS 和 Tailwind 这样的 CSS 框架似乎并无必要。建议根据自己的需求选择其中一种方法。
Tailwind 非常庞大,作者相信从 CSS 到 Tailwind 的影响比从 JS/TS 到 React 还要大。所以不可避免地,会有很多思想领袖和开发者来淡化这篇文章中提到的许多问题。
这里没有什么新鲜事。当 CSS-in-JS 出现时,我们遇到了类似的情况,在一开始,开发者注意到它正在复制 CSS 足迹,并在某种程度上违背了缓存和失效的概念。
希望这篇文章能为你解答有关 CSS 在现实世界中的问题和解决方案。