Question

我正在尝试整理我网站上的所有css代码，我希望能够具体说明该类型。假设类型为20px，粗体和蓝色，例如

<h1 bold blue>Hello world</h1 blue bold>

所以css文件将包含：

h1 {
font-size:20px;
}

bold {
font-weight:bold:
}

blue {
color:blue;
}

然后，当我完成设计过程时，我可以混合搭配颜色和尺寸等。这样的事情可能吗？

Answer 1

这不可能像你想要的那样，但你能做的就是：

<h1 bold blue>Hello world</h1 blue bold> // your idea
<h1 class="bold blue">Hello world</h1>   // correct html, even slightly shorter

和

h1 {
  font-size:20px;
}

.bold {                                  // added . for being a class
  font-weight:bold:
}

.blue {                                  // added . for being a class
  color:blue;
}

变量本身在使用lesscss之类的东西时是可行的，但这种方式与你提到的方式不同，你的html标记仍然必须有效。

修改
请注意，作为edem (and others) said，在实际项目中使用blue和bold作为类名不是一个好主意。我假设你刚刚给出了这个简短的例子来询问如何组合不同的“css规则集”（阅读：类）。如果不是这样的话：坚持edems或tims explanation并查看“语义标记”指南。

Answer 2

颜色很少能成为好的标识符。假设“蓝色”不再是蓝色？也许你希望它变成红色？

字体权重（在您的示例中为“粗体”）也不是好的标识符。也许在将来你可能更喜欢使用普通字体权重看起来更好的字体。

确定样式的目的（例如文章署名或图片标题）和/或应用它的元素的语义目的，并相应地命名样式。

然后，您可以使用类的组合（正如其他人提到的那样）来实现您期望的目标。

Answer 3

这违反了良好做法。假设您有一个文章标题类型，可以在任何文章页面和每个页面上的主标题中找到：

.mainHeader {
   font-size:20px;
   font-weight:bold:
   color:blue;
}

.articleHeader {
   font-size:15px;
   font-weight:bold:
   color:red;
}

如果有一天你决定你的文章标题不再是蓝色怎么办？如果你改变了

.blue {
  color:blue;
}

到

.blue {
    color:red;
}

那不会好的。您应该根据其语义目的命名您的类/ ID。

重点是CSS应该是succint，因此您可以通过1-2行修改整个页面的外观。你在这里提出的想法并不是简单的，因此不被认为是一种好的做法。

我认为您应该使用less css作为上面建议的答案。顺便说一下，如果你在你的网页上使用一些脚本语言，如python或php，你可以使用支持继承的模板引擎，你可以生成自己的css代码，你可以在那里使用变量。这根本不适合CSS。

Answer 4

是。使用类。

<h1 class"bold blue">Hello world</h1>

h1 {font-size:20px;}

.bold {
    font-weight:bold:
}

.blue {
    color:blue;
}

我可以使用一种css变量吗？

4 个答案: