为什么要使用Stylify CSS？

了解什么是Stylify的CSS功能，以及Stylify试图解决什么问题。了解它如何改善你的日常编码经验，以及它如何简化新的开发人员进入团队的过程。

Stylify可能看起来像内联样式。为什么不使用它们？因为它们不能被有效地优化。

Stylify CSS的特点

Stylify CSS允许你更快地编写CSS，并获得极小的CSS捆绑。它也很容易集成到任何工具中。

Stylify CSS试图解决的问题

Stylify CSS主要关注的是实用程序的语法和CSS捆绑的优化。但除此之外，Stylify还解决了很多问题。 其中有些是在编写CSS时出现的，有些是在新员工加入公司时出现的。

选择器的重复属性

无论我们写一个组件还是一个选择器，我们大多会重复附加在该选择器上的属性：值。Stylify通过内部算法来解决这个问题，将选择器、组件和实用工具连接起来。

重复的媒体查询

与上述问题相同的是媒体查询。Stylify将选择器附加到正确的媒体查询上，每个文件只生成一次。

在CSS和HTML文件之间不断切换

在手动编写CSS时，我们经常需要创建一个CSS文件，然后转到HTML，将该类附加到一些元素上，并为其添加CSS。有了Stylify CSS，这就没有必要了。

需要手动删除未使用的类

你可以用清除工具来做，但那只是修复已经产生的错误。Stylify CSS会根据需要生成所有的东西。没有未使用的CSS被生成。不需要清除。

复杂的CSS文件管理

如果CSS是手动编写的（无论是否有CSS预处理器），我们必须为它创建CSS文件或样式标签（例如在Vue模板内）。这使得CSS管理变得困难。我们必须手动创建、删除和重命名文件。在导入文件的情况下，当文件移到其他地方或被重新命名时，我们必须始终修复路径。当CSS文件的数量开始增加时，这简直是越来越困难了。而Stylify CSS却不是这样的。文件可以在.gitignore中。它们是根据每个bundle配置自动生成的。添加样式标签和导入也可以使用钩子自动完成。

错误的CSS拆分

分割和正确导入CSS需要大量的工作，以避免导入未使用的样式。由于CSS工具很小，好的方法是为布局/页面分割，或者根本不分割任何东西，所以导入很简单。

我们必须使用BEM或类似的方法来计算选择器的名称

这一点可以通过类似CSS的工具来消除。没有必要使用BEM或其他命名规则。

为简单的东西创建无用的选择器

实用工具解决了为更大的缩进而创建诸如 “sidebar—larger-margin “这样的选择器的问题。

CSS中不必要的高特异性

这又是通过实用工具来解决的，具体的覆盖可以用CSS变量来解决。因为你可以有条件地、原子地对元素进行样式设计，所以在使用实用工具时，你通常不需要有更高的特异性。

预处理程序中的反直觉嵌套

在SCSS和Stylus这样的预处理器中，我们往往会像下面的例子那样过多地使用嵌套。这使得选择器的发现更加困难，也更难维护。有了实用工具，你就干脆不使用这个了。

.section {
	&__homepage {
		// ...
		&-top-left { /* */ }
	}
	&--big
}

选择器从多个地方被修改

我们经常需要修改，例如一个按钮。为了让它在应用程序的某个地方变大/变小。所以我们做一个类来修改这个按钮（如果正确的话）或者直接覆盖这个按钮选择器（这是错误的）。

覆盖会导致在多个地方复制这样的选择器，这很难维护，有时，我们还需要覆盖已经覆盖的选择器。这是个更大的问题。

在修改器的情况下，问题是，你打算把它们放在一个CSS文件中，在页面上加载，在那里使用，还是放在组件文件中，把所有修改器放在一个地方。第一种方法会增加维护的难度，因为修改器分散在不同的文件中，第二种方法则会导致页面上的修改器无法使用。

Stylify允许你以两种方式定义修改器。在文件中，在使用的地方或在全局配置中。然而，修改器总是只生成在那些使用的包中。未使用的修改器（全局或局部）不会被生成。

新员工的问题更少

当一个新员工加入一个公司时，他不需要学习任何框架。如果他懂得CSS，他可以马上开始使用Stylify CSS。他不需要研究CSS-in-JS库、CSS框架的快捷方式以及如何使用该框架使输出得到优化。