Stylify：实用程序优先的 CSS 库来替换 Tailwind
为什么创建 Stylify 的作者会引起你的共鸣
一个项目使用 Bootstrap，第二个项目使用 Tailwind 和另一个带有自己的实用程序和组件类的 vanilla CSS。
虽然这些工具很棒，而且方法也不“差”，但再次学习和记住类、配置和选择器只是很麻烦而且很耗时。
IDE 插件对类的窃窃私语有时很烦人。我问过自己很多次，为什么没有框架或库使用开发人员已经知道的纯 CSS 属性及其值作为选择器。
风格化
Stylify 根据您编写的内容动态生成优化的实用程序优先 CSS。
受到专注于实用程序类的 Tailwind 和 Tachynos 的启发，他说他进一步推进了这个想法。
与 Bootstrap、Foundation 或 Bulma 不同，它没有预生成的 CSS。
可以在主页上找到一个示例： https://stylifycss.com/
为什么要使用 css 类型属性：值类型？
- 这是因为不使用随机命名的缩短类名就无需学习。
- 不每天使用 Tailwind 的开发人员应该去文档或开发工具看看它做了什么。
- 在风格化，CSS
可见性：隐藏写下来。任何对 CSS 有一点了解的人都知道这是做什么的。在顺风隐你可能认为显示：无；没看到。 (可见性：隐藏为了无形的使用类） - 可维护性：如果浏览器提供了像 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
标签：Tailwind,Stylify,使用,实用程序,选择器,CSS From： https://www.cnblogs.com/amboke/p/16663840.html