1

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

基本上我所做的是建立一个“引导程序”；但不是按元素这样做，而是按属性完成。所以基本上，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 中构建网站及其样式。但是，这是一种不好的做法吗？我是否应该简单地为边框半径、颜色、按钮等设置样式，并在类/id 中定义填充、边距等（一般框布局属性）？

4

5 回答 5

3

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

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

但是，如果您定义了一个名为的类选择器，可以说，.wrapper您可以稍后重新定义它的属性，但是您喜欢。

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

于 2012-07-11T20:25:44.893 回答
1

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

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

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

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

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

我建议你使用LESS。

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

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

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}
于 2012-07-11T20:19:05.827 回答
1

关于什么是好的类名已经有很多讨论。社区共识和HTML 规范本身建议你的类名描述元素是什么，而不是它的外观。

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

另请参阅 Wikipedia 上的语义 HTML页面。

于 2012-07-11T20:23:12.043 回答
0

通常你想用类来说明你的文本是什么，然后用 CSS 来说明这些东西应该如何显示。这样，如果您决定希望标题下方有 0.5em 的空间而不是 0.3em 的空间，这很容易（尤其是使用 FireBug 之类的工具）。

以您指示的方式使用它们并没有利用这种分离。它很脆弱，除了在各处放置内联样式外没有其他功能。

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

于 2012-07-11T20:22:46.553 回答