2022年1月5日

Stylify CSS - 动态实用优先的CSS生成器

Stylify会根据你所写的内容动态生成优化的实用优先的CSS。写HTML。获取CSS。🚀



让我告诉你一个故事

最近,我一直在做多个项目。一个项目使用Bootstrap,第二个项目使用Tailwind,还有一些使用自己的工具和组件类的vanilla CSS。

尽管这些工具很好,而且方法也不 “坏”,但学习和记住所有的类、配置、选择器简直是令人厌烦和耗时。窃窃私语类的IDE插件有时会让我感到纯粹的绝望。

我多次问自己,为什么没有一个框架或库,使用自然的CSS属性和它们的值作为选择器,而开发者已经知道。是的,选择器可能会长一点,但为了使用它,没有什么可研究的。

因为我找不到任何东西,所以我创建了我自己的。

从想法到项目

经过一年的开发,我终于发布了第一个版本🎉。 Stylify是一个带有Native Preset的库,可以匹配678个(可能是全部)来自Chrome, Mozilla, Opera, Safari 和 Edge的CSS属性。其大小小于28 kB

语法很简单:cssProperty:value,如果你需要屏幕和伪类screen:pseudoClass:property:value

在实践中,Stylify CSS的用法是这样的:

<div class="font-size:24px hover:color:red md:font-size:48px" >
	你好,世界!
</div>
<script src="https://cdn.jsdelivr.net/npm/@stylify/stylify@latest/dist/stylify.min.js"></script>

因为有些值可以包含空格和引号,我决定增加一个特殊的语法。当写一个选择器时,它的值应该包含一个空格,你可以使用_(下划线),对于引号^(帽子)。

这使得你可以写出这样的选择器:

<div class="
 border:12px_solid_steelblue
 font-family:^Arial^,_sans-serif
">
	你好,世界!
</div>

经过编译和处理后,它生成了以下CSS:

.a{
 border:12px solid steelblue
}
.b{
 font-family:'Arial', sans-serif
}

另一个特点

  • 动态选择器: 定义一个宏,并随意使用它 width:240px, width:10%, width:30rem.
  • [动态屏幕](/zh/docs/stylify/compiler#logical-operands in-screens): 你可以使用逻辑操作数如||&&来组合屏幕=> sm&&tolg:font-size:48px xl&&dark:color:rgba(200,200,200,0.5)并使用任何你想要的值 minw123px:font-size:24px
  • 选择器的混用: Stylify CSS可以将长选择符transition:color_0.3s_ease-in-out转换成_abc123
  • 拆分CSS: CSS可以为每个文件单独生成。由于这个原因,你可以为一个页面和布局分割CSS,例如。
  • 组件: 例如,定义一个 “按钮 “的依赖性,如 “background:#000 color:#fff padding:24px “并在整个项目中使用它。
  • 变量: 为重复的值定义变量。它们可以作为CSS变量被注入到代码中。
  • 普通选择器: 允许你对选择器进行风格化处理,如 “article > h1”。
  • 帮助器: 可以在生成CSS的时候使用,例如重新计算单位等。

无缝集成

Stylify可以很容易地集成到框架中,如Next.js, Nuxt.js, Vite. js, Symfony Framework, Nette Framework, Laravel 等等。此外,它与WebpackRollup.js一起工作也很好。

为了更容易集成,有一个@stylify/nuxt-module用于Nuxt.js和一个@stylify/bundler,可以与已经提到的Rollup.js和Webpack或任何其他工具一起使用。

当集成到一个现有的项目中时,有可能为每个页面单独生成CSS(即使是小的组件),并慢慢重写网站而不增加其大小或破坏任何东西。

给予反馈!
你喜欢Stylify CSS吗?让我们知道,请在我们的repo上签名