CSS变量有哪些优缺点？

Question

我面临业务需求，我相信可以通过实现CSS变量来解决。

基本上，虽然这个项目的前端开发人员负责CSS实现，但设计师希望能够为网站引入不同的“主题”。

通过将一个主题换成另一个主题，可以进行一系列更改（例如字体大小，字体颜色，边框宽度等），而无需更改太多代码。

目前，我们正在尝试通过将组件的样式拆分为不同的CSS文件来满足此要求 - 例如一个用于布局，一个用于排版，一个用于颜色等。

但我不喜欢这种方法。它使CSS非常难以维护，并且很难将一个特定组件的所有CSS分离出来，这正成为一种常见的要求。

我希望改为引入一组标准的“变量”，这些变量可以与特定的主题联系起来。

CSS将被预处理，变量将根据使用的主题交换实际值。

这将使我们的开发人员能够最有效地组织我们的代码，同时仍然保持足够的灵活性，以便根据设计师的口味进行定制。

关于赞成/反对意见的任何想法？

Answer 1

我能想到的唯一缺点是必须增加使用或编写预处理器的复杂性，并适当地管理输出的缓存，以避免每个请求都通过预处理器。

当您使用新的变量语法时，编辑器中的语法突出显示也可能存在一些问题，但这可能可以解决。

除此之外，我想它应该是所有优点。

您可能有兴趣查看LESS：

@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}

Answer 2

预处理CSS似乎是一个好主意。我看到的缺点是，这种额外的抽象将带来其自身的问题 - 处理代码中的错误可能导致无效或错误的CSS。加班事情可能难以维持。

您可能希望拥有一个没有变量的完全可用的CSS，然后使用最少的必需变量填充另一个预处理的CSS，这将覆盖原始CSS。

Answer 3

一个很大的缺点当然是你不再编写CSS了。您使用专有语言编写，编译为CSS。发明您自己的编程语言是第一页，这是一本非常糟糕的创意书。如果您将此作为实验或个人项目，那么请继续，否则我会说您要求麻烦。

我可以预见的一个具体问题是，开发人员可能拥有知道如何处理CSS的编辑器/ IDE，但不知道如何处理您的CSS方言。这可能会限制所述开发人员。

但实际上 - 关键是没有列出利弊。关键是你正在进入一个未知的领域，这是 - 出于原则 - 一个坏主意，除非它是你的核心业务。

修改

我想稍微调整一下我的回答。从技术角度来看，这可能是一个好主意 - 取决于您控制环境的程度，您是否能够追溯您的步骤以及更多。这本质上是一种外部DSL，可以是一种非常强大的工具。我不认为我会在这里应用它，因为你是目标（前端）开发人员，我认为外部DSL更好地用于管理员/非开发人员。但可以成功使用。

我主要担心的是，您只是从技术角度来看待这一点，这对我们的开发人员来说是一个常见的谬误。从业务角度来看（假设你是一个企业），这可能是一个非常糟糕的主意。这就是我试图表达的意思。

Answer 4

我没有看到对主题有不同的css文件有任何改进：你说你只是添加一些变量来改变字体，颜色等。边界，对齐和许多其他东西怎么样？主题不仅仅是2-3个颜色变量。更大的网页的主题可以变得非常大，同一页面的不同主题可能不仅仅是几个颜色代码。我不认为这是个好主意。让前端设计人员为主题创建不同的css文件，并加载属于主题的css文件。