是否将类样式用作内联样式？

Question

所以有一个非常基本的问题:使用像内联样式这样的类是“可以的”吗？

基本上，我所做的是构建一个"bootstrap"；但我不是按元素来做，而是按属性来做。所以基本上，CSS只是一组预定义的样式。

例如：

.margin-left-1 {margin-left:1px;}
.margin-right-1 {margin-right:1px;}
.bg-blue {background-color:blue;}
.padding-5 {padding: 5px;}
.radius-10 {border-radius:10px;}
.width-10 {width:10%;}
.width-10px {width:10px;}
.font-arial {font-family: 'Arial';}

等。

这使得您可以快速轻松地在HTML中构建网站及其样式。然而，这是一种糟糕的做法吗？我是否应该简单地为边框半径、颜色、按钮等设置样式，而让填充、边距等(一般的框布局属性)在classes/id中定义？

Answer 1

这与你应该做的事情完全相反。CSS选择器名称不应该代表选择器内容，而应该代表它们应该描述的对象的性质(样式)。换句话说，关于选择器名称对选择器内容本身的依赖程度，选择器名称应该尽可能抽象。

这是一个实际的问题，如果你决定使用你的系统，你将会遇到这个问题。如果您决定更改.margin-right-1类的margin-right属性值，该怎么办？按照您的逻辑，您现在必须将其名称更改为margin-right-10，不仅如此，您还必须更新完整的HTML代码，以便用margin-right-10类替换对margin-right-1的引用。

但是，如果您定义了一个名为.wrapper的类选择器，您可以稍后随心所欲地重新定义它的属性。

不仅如此，如果您的选择器也有一个margin-left属性，您会怎么做？为了给那个特定的选择器命名，哪一个会成为主导？

Answer 2

我建议你使用LESS。

然后，您可以创建所谓的“混合”，并在您的样式中使用它们。例如。

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Answer 3

关于什么构成一个好的类名，已经有很多讨论。社区共识和HTML spec本身建议您的类名描述元素是什么，而不是它应该是什么样子。

对于作者可以在

属性中使用的标记，没有额外的限制，但鼓励作者使用描述内容性质的值，而不是描述内容所需表示形式的值。

另请参阅维基百科上的Semantic HTML页面。