临沂建网站哪家好,辽宁省造价信息网官网,wordpress 主题放在哪,全国物流网站本文是 关于Tailwind CSS 与 现代 CSS之间比较的文章。文章中作者详细比较了这两种CSS开发方法的优缺点。他指出#xff0c;Tailwind CSS是一种基于类的CSS框架#xff0c;提供了快速开发网站的便利性#xff0c;但可能导致HTML代码的臃肿。另一方面#xff0c;现代CSS方法… 本文是 关于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 至少有两种方式可以定义范围。 经过两个月后 在级联层中包裹你想要调整的新样式 在嵌套作用域中使用新类 这两种方法都使用原生 CSS并可以达到与 Tailwind 相同的效果尽管对于某些人来说可能需要进行一些范式转变才能习惯。 内联类的问题 关于内联类有一些问题。这些问题可能是微不足道的也可能是严重的这取决于你的项目或你如何解释它们。 内联类有时会变得很重在撰写本文时tailwindcss.com 的着陆 HTML只是一个方便的案例研究使用了 tailwind 的内联类其大小为 432.5KB。类属性及其值构成了 249KB 的数据这意味着页面大小的 57.6% 来自内联类。而使用现代本地 CSS 时这一比例约为 5%-15%。大量 HTML 会影响你的 PageSpeed Insights 分数FE 开发人员喜欢说 但它是经过 gzip 压缩的兄弟以此来为过大的有效负载辩解。但服务器的 gzip 大小有点误导。在这种情况下更重要的问题是 DOM Attr 节点的数据大小对内存的影响这是内联样式的结果。属性杂乱在属性杂乱问题上Tailwind 开发人员的立场各不相同。调试在生产和开发代码中都要进行。任何否认这一点的人要么是在撒谎要么就是从未参与过需求量大的大型项目。HTML 没有源映射因此尽管进行了缩减也不能太乱。高带宽我们生活在一个免费云服务的世界里因此这可能不会成为大多数项目的大问题但对于超过免费带宽的高带宽网站来说重型 HTML 可能会产生一些额外费用具体取决于你的云提供商。CSS 样式表是专门为在 HTTP 概念中进行缓存而设计的。Tailwind的内联类是HTML文档的一部分而HTML文档的变化通常更为频繁一般不会像CSS样式表那样被缓存。重复的样式方言Tailwind 将允许你定义内联类语法这是一种类似 CSS 的简化方言。这些类链接到框架 CSS 规则。这本身并不是直接的重复而是在框架代码的 CSS 中也体现了 CSS 的额外权重。 CSS 嵌套改变了一切 因为嵌套作用域是私有的 不必为每个元素都定义一个类只需合理判断即可。不再需要遵循 BEM、OOCSS 或其他传统的 CSS 方法。所有这些都已经过时了。 与 CSS 框架相比CSS 嵌套和相对选择器不仅意味着我们定义的内联类更少而且与传统 CSS 项目相比我们定义的内联类也更少。 总结 如果你还在使用老式的 CSS那就停下来吧。想办法与时俱进吧。也许下面的内容能帮到你但这已经超出了你的能力范围没有双关的意思 caniuse.comPostCSSNesting 筑巢 在过去 15 年多的时间里CSS 库和框架主要依赖于过多的内联类。Tailwind 也不例外。 在作者看来嵌套 CSS 和 Tailwind 这样的 CSS 框架似乎并无必要。建议根据自己的需求选择其中一种方法。 Tailwind 非常庞大作者相信从 CSS 到 Tailwind 的影响比从 JS/TS 到 React 还要大。所以不可避免地会有很多思想领袖和开发者来淡化这篇文章中提到的许多问题。 这里没有什么新鲜事。当 CSS-in-JS 出现时我们遇到了类似的情况在一开始开发者注意到它正在复制 CSS 足迹并在某种程度上违背了缓存和失效的概念。 希望这篇文章能为你解答有关 CSS 在现实世界中的问题和解决方案。 欢迎长按图片加刷碗智为好友定时分享 Vue React Ts 等。 最后 vue2与vue3技巧合集 VueUse源码解读
