[分享]css公共类好还是变量好

CSS中，有两种方式可以定义可重用的样式：公共类和变量。公共类是一组定义好的样式，可以在多个元素中重复使用。例如，如果想将文本颜色设置为红色，可以定义一个名为“red”的类：.red { color:...

CSS中，有两种方式可以定义可重用的样式：公共类和变量。

公共类是一组定义好的样式，可以在多个元素中重复使用。例如，如果想将文本颜色设置为红色，可以定义一个名为“red”的类：

.red {
  color: red;
} 

然后，在HTML中，可以将这个类应用于任意元素：

<p class="red">Some red text</p>
<h1 class="red">A red heading</h1>
<a class="red" href="#">A red link</a> 

变量则允许在多个规则中使用相同的值，从而可以更方便地管理复杂的样式。变量可以使用CSS自定义属性（CSS Custom Properties）实现。例如，想将背景颜色设置为蓝色，并将其用于多个元素，可以定义一个名为“--bg-color”的变量：

:root {
  --bg-color: blue;
}

div {
  background-color: var(--bg-color);
}

p {
  background-color: var(--bg-color);
}

a {
  background-color: var(--bg-color);
} 

这样，如果以后想修改背景颜色，只需要在根元素中修改变量的值即可。这种方式一旦定义好，多个元素可以共享变量，并且样式更容易维护。

总的来说，公共类和变量各有优缺点。公共类可读性好、直观，更适合简单的样式，并且与原生HTML语义相似。变量则更适合复杂的样式，可以更方便地管理样式，并且可以随时修改全局样式。