Stylify：实用程序优先的 CSS 库来替换 Tailwind

https://stylifycss.com/

为什么创建 Stylify 的作者会引起你的共鸣

一个项目使用 Bootstrap，第二个项目使用 Tailwind 和另一个带有自己的实用程序和组件类的 vanilla CSS。

虽然这些工具很棒，而且方法也不“差”，但再次学习和记住类、配置和选择器只是很麻烦而且很耗时。

IDE 插件对类的窃窃私语有时很烦人。我问过自己很多次，为什么没有框架或库使用开发人员已经知道的纯 CSS 属性及其值作为选择器。

风格化

Stylify 根据您编写的内容动态生成优化的实用程序优先 CSS。

受到专注于实用程序类的 Tailwind 和 Tachynos 的启发，他说他进一步推进了这个想法。

与 Bootstrap、Foundation 或 Bulma 不同，它没有预生成的 CSS。

可以在主页上找到一个示例： https://stylifycss.com/

为什么要使用 css 类型属性：值类型？

1. 这是因为不使用随机命名的缩短类名就无需学习。
2. 不每天使用 Tailwind 的开发人员应该去文档或开发工具看看它做了什么。
3. 在风格化，CSS 可见性：隐藏 写下来。任何对 CSS 有一点了解的人都知道这是做什么的。在顺风 隐 你可能认为 显示：无； 没看到。 ( 可见性：隐藏 为了 无形的 使用类）
4. 可维护性：如果浏览器提供了像 Tailwind 这样的属性已经缩短的属性怎么办？ CSS 标准在不断变化。即使是现在，Tailwind 仍在继续更新。

相对于纯 CSS 的优势

因为选择器是动态创建的，所以不需要擦除或维护相关代码。

选择器被重用（ .color\\:red,.button{color:red} ）在生产中缩小（ 文本对齐：从左到短 _zx ）这是可能的。

您无需在编辑器中切换文件即可查看样式文件。

重复 CSS 属性值的存在不会以指数方式增加 CSS 大小。 Facebook 上有关 CSS 大小的文章 有。

动态生成的 CSS 通过在项目中保留更少的文件来减少更改。因此，这意味着优化创建缓存、迁移、js 包等。

如何使用

像 CSS 适当的价值 利用

使用 __（两个下划线）表示空格，使用 ^（帽子）表示引号

基本语法模式是 <screen>?:<pseudo classes> ?:<property> ：<value>

 红色  
 边框：1px__solid__red => 边框：1px 纯红色  
 宽度：计算（100%__-__8px）=> 宽度：计算（100% - 8px）  
 font-family:^Open__Sans^ => font-family:'Open Sans'  
 悬停：颜色：红色  
 sm：悬停：颜色：红色

而已。

预定义的宏和助手

屏幕

Tailwind 或 Bootstrap 知道预定义的快捷方式，如 sm、md、lg，以及 minw、maxw、rng 等动态屏幕。

通过逻辑运算符 逻辑与 && 和一个 逻辑或 ||

 sm&&dark:color:red  
 minw740px||风景：颜色：蓝色

变量声明

组件定义

自定义选择器

配置

可以预先定义变量声明、组件定义和自定义选择器。

模板变得臃肿且难以维护

零件 可以定义并写为

但是，如果开发人员以自动组件的形式创建可重用组件，则维护起来并不困难。

补充/扩展：宏

您可以为想要使用预定义速记类（如 ml-2 或 py-3）的用户定义自定义宏。

结论

Tailwind 还创建了一个实用程序优先类来创建优化的样式文件，并使用它在生产中生成优化的 css。但是，这需要记住或查找预定义的内容。

说“调音终归纯”的理由是什么？

• 上面这篇文章的内容是一个汽车改装的采访，但是我理解的有些奇怪。
• 调优成本，高于预期，维护成本不算太高
• 如果你尝试修复它，修复成本也是爆炸性的。
• “它不同于改变和变得更好。”一辆你最终会找到的真正的汽车

我们常常忘记标准的重要性。 W3C标准 你甚至可以拯救这个世界。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/20676/23310700