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

2022/9/7 14:23:13

本文主要是介绍Stylify:实用程序优先的 CSS 库来替换 Tailwind,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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



这篇关于Stylify:实用程序优先的 CSS 库来替换 Tailwind的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程