Question

这是一个非常基本的问题：使用类似内联样式的类是否“没问题”？

基本上我所做的就是建立一个“引导程序”;但是我没有按照元素这样做，而是通过属性完成的。基本上，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中构建网站及其样式。但是，这是一种不好的做法吗？我应该简单地为border-radius，colors，buttons等等设置样式，并保留在classes / id中定义的填充，边距等（一般框布局属性）？

Answer 1

它与你应该做的完全相反。 CSS选择器名称也应该代表选择器内容，而不是它们应该描述的对象（样式）的性质。换句话说，选择器名称应尽可能抽象，因为它们依赖于选择器内容本身。

如果您决定使用系统，这是一个实际问题。如果您决定更改margin-right课程的.margin-right-1属性值，该怎么办？按照你的逻辑，你现在必须改变它的名字，比如说margin-right-10，不仅如此，你也会被迫更新你的完整HTML代码，以便用{{margin-right-1替换对margin-right-10的引用。 1}} class。

但是，如果你定义一个名为的类选择器，比如说.wrapper你可以随后重新定义它的属性。

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

Answer 2

我建议您使用LESS。

然后，您可以创建所谓的“mixins”并在您的样式中使用它们。 E.g。

.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本身表明您的类名描述元素是什么，而不是它应该如何看待。

作者可以在class属性中使用的标记没有其他限制，但鼓励作者使用描述内容性质的值，而不是描述内容所需表示的值

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

Answer 4

想象一下，您决定为移动网站使用相同的HTML，但使用不同的样式表。假设您有一个文章容器，您已将其设置为800px宽。而不是.article {width: 800px}你将拥有.width-800 {width: 400px}。在尝试编写和调试新布局时，您会感到困惑吗？

另外，也许您不希望800px宽的所有元素现在都是400px，只是文章。因此，使用您的方法来定位您的文章容器，您必须将它使用的所有不同类链接在一起，例如：

.float-left.border-solid-black.padding-10.bg-blue.font-arial.width-800 {
    width: 400px;
}

这个更长的选择器意味着：

在CSS文件中占用更多空间（文件权重），因此页面加载速度较慢
通过XPath或JavaScript解析节点的速度较慢
更改脆弱，因为您不知道是否有任何其他div可能会受到影响（如果它们碰巧也应用了相同的类）
调试和隔离错误修复要困难得多（不会对页面上的其他区域产生负面影响）

Answer 5

通常，您希望使用类来说出文本是什么，然后使用CSS来说明应该如何显示这些内容。这样一来，如果你想让你的标题下面有0.5em的空间而不是0.3em的空间，这很容易（特别是像FireBug这样的工具）。

按照你指示的方式使用它们并没有利用这种分离。它很脆弱，除了在整个地方放置内联样式之外没有其它功能。

那就是说，你通常会有一些像这样的实用程序类（例如.collapsed { display: none }）用于切换等等。

使用类样式作为内联样式？

5 个答案: