CSS是一种声明性的、全局性的网页样式设计语言。当它依赖于HTML时，每当HTML发生变化时，它就需要改变，这使得它难以大规模地维护。
这个问题在很久以前就被面向对象的CSS概念所解决了，这就诞生了组件式CSS与许多库，如Bootstrap和Bulma，同时还引入了可重用性。
基于组件的框架所带来的那种可重用性是有限的，并由此产生了实用性优先的框架，如Tailwind CSS。
在这篇文章中，我们将比较两个实用优先的CSS库--Stylify和Mater Styles；通过它们，你可以建立独特的、响应式的UI，同时编写更少的代码。
前提条件
- 能熟练掌握基本的CSS
- 对效用优先的框架有基本了解
什么是效用优先的CSS？
基于组件的库有一套预置的组件和语义类，它们不告诉你HTML元素应该是什么样子，而是告诉你它是什么。
基于组件的库的问题是，只要改变HTML，CSS就会中断。这个问题可以用实用优先的库来解决。
实用至上的库为你提供了帮助类，以便在HTML标签中建立自定义的复杂样式。这些类的目的是单一的，容易定制，并以风格为导向，对HTML元素进行深入了解。
什么是Stylify？
Stylify是一个轻量级（20KB）的CSS库，可以根据你写的HTML动态生成实用优先的CSS。
它带有一个本地预设，使用本地的CSS属性值作为选择器，可以匹配多个浏览器的几乎所有CSS属性。使用Stylify，可以为每个文件、组件、页面或布局单独生成CSS。
语法
Stylify为您提供了使用逻辑运算符，如&&（和）和||（或），以及一种特殊的语法，即__（双下划线）代表空格，^（carret）代表引号，来组合屏幕。
这使你可以写选择器，如
<p class="
margin:0__auto
font-family:^Roboto__Mono^,__monospace
">
Hello World!
</p>
上面的代码将被最小化并生成以下的CSS：
._nmed{
margin:0 auto
}
._l4hja{
font-family:'Roboto Mono', sans-serif
}
安装Sylify
要使用通过CDN构建的默认配置，请复制以下代码并将其放在你的HTML文件中：
<script src="https://unpkg.com/@stylify/stylify@0.0.2/dist/stylify.native.min.js"></script>
你也可以通过CLI使用npm或Yarn等软件包管理器来安装Stylify：
// for npm
npm i -D @stylify/stylify
// for yarn
yarn add -D @stylify/stylify
什么是Master Styles？
Master Styles不仅仅是一个框架或库，它也是一个生态系统，包括构建用户界面的工具。
它的概念是基于设计的可重用性、具有增强语法的虚拟CSS和动态赋值。它提供了超过172种开箱即用的样式，不需要任何配置。
语法
Master的语法与其他实用优先的CSS库完全不同，非常接近原生CSS。
Master Styles提供了一种系统的CSS语法，并提供了速记、缩写和符号语法，以加快和减少代码行数。
下面是在Master Styles中编写一个简单段落的三种方法，该段落在页面中央对齐，字体大小为32px（像素），背景颜色为绿色：
<p class="text-align:center font-size:2rem background-color:green-50"></p>
使用属性速记法会减少代码行数：
<p class="text:center font:32 background:green-50"></p>
使用缩略语会减少更多的代码：
<p class="t:center f:32 bg:green-50"></p>
安装Master Styles
你可以使用软件包管理器来安装Master Styles。要安装Master Styles，请复制你喜欢的软件包管理器的代码：
// using npm
npm install @master/styles @master/normal.css
// using yarn
yarn add @master/styles @master/style @master/normal.css
// using pnpm
pnpm install @master/styles @master/style @master/normal.css
下一步是将**@master/styles**从node_modules中导入到你的JavaScript入口文件。
import '@master/styles';
然后继续从node_modules中导入**@master/normal.css**到你的CSS入口文件。
import '@master/normal.css.'
请参考本指南，了解如何将Master Styles整合到不同的框架中。
使用的方便性
这两个框架都很容易设置和使用，它们都有一个小的学习曲线，很容易上手--特别是如果你已经熟悉了像Tailwind这样的效用优先的CSS框架。
一个库的易用性主要是基于其文档的直观性和信息量。
在这一点上，Stylify的文档描述性更强，在向新用户介绍该库方面做得更好。另一方面，Master Styles的文档比Stylify的文档要复杂一些，对于第一次使用的人来说需要更多的时间才能开始使用。
性能
性能和速度是挑选框架的关键因素。然而，尺寸是影响框架性能的一个重要因素，因为尺寸越小，框架就越快。
虽然两个库都是轻量级的，但Master Styles（13KB）比Stylify（28KB）要小一点；而且比Stylify快。
此外，Master Styles提供了一个混合架构，允许你在服务器端从HTML预生成CSS，然后在客户端通过反向解析使用JIT，这给你带来了运行时的灵活性，提高了页面加载速度。
它们都提供了很好的语法来减少代码行数，并提供了实用类来帮助定制UI。
开发者经验
开发者经验是选择框架的另一个关键因素--这两个库都是与框架无关的。
Stylify提供了与Next.js, Nuxt.js, Laravel, Symfony等框架的无缝集成。它也可以与Webpack和Rollup.js很好的配合。将Stylify集成到一个现有的项目中是很简单的。
Master Styles还提供与React、Next.js、Angular、Nuxt.js和Laravel等框架的集成。与大多数CSS库不同，Master在浏览器中实时运行。
组件
Stylify为您提供了创建组件的选项，并在需要的地方重新使用它们。这遵循了DRY原则（不要重复自己），以帮助减少重写相同的代码行的麻烦。它还允许你将组件与实用选择器混合。
在撰写本文时，Master Styles不支持使用组件。只要有需要，你就必须重复重写同几行代码。
不过，它提供了直观的速记方法，允许你通过使用缩写来减少代码行数。
创建一个示例按钮
下面是如何在Stylify中创建一个简单的红色按钮：
<button class="font-weight:bold font-size:24px border-radius:4px padding:15px width:400px margin:50px__auto__0__auto text-align:center background:red color:white">Red Button</button>
下面是如何在Master Styles中创建一个蓝色按钮的例子：
<button class="font-size:24px border-radius:4px padding:15px width:400px margin:50px;auto;0;50px text-align:center color:white bg:blue-60 ">Blue Button</button>
这两个框架都遵循类似的模式来创建一个优秀的用户界面，但有一些基本的区别。它们都有一些共同点，比如：
- 它们允许使用原生的CSS属性，如padding、margin等。
- 它们都允许使用变量
- 它们都是框架无关的
- 它们都是轻量级的
- 它们都是实用至上的CSS库
什么时候应该使用哪个库？
选择相对容易--在大型项目中使用Sylify，而在图像较多的网站和需要多个或多个动画的网页中使用Master Styles。
在大型项目中，更多的组件会被重复使用，这意味着CSS的增长速度会很慢，这将导致页面加载速度加快。这使得Stylify成为大型项目的最佳选择。
另一方面，Master Styles提供了"@"（动画）和"~"（过渡）等符号，提供了完整的功能，使元素的动画化更容易。
它还提供了一套常用的关键帧（用于精神），使功能变得生动，并允许你创建自定义关键帧。这使得Master Styles成为紧张的动画网页的更好选择。
总结
本文比较了两个被称为下一代类似Tailwind的CSS工具库的劣势CSS框架--Stylify和Master Styles。我们根据性能、学习曲线、相似性和其他因素对两个框架进行了比较。
虽然这两个框架都很相似，但Stylify提供了组件的使用，这使得它比大多数实用至上的CSS库更有活力。它很适合大型项目，而另一方面，Master Styles是动画网页的最佳选择。
Sylify或Master Styles是一个更好的CSS库，这取决于开发者的使用情况。虽然这两个库都是新的，但使用这两个框架的经验都很好，我鼓励你去看看他们的文档，以便开始使用。
