使用类样式作为内联样式？-Useclassstylesasinlinestyles?

2  

Its the exact opposite of what you are supposed to do. CSS selector names should nor represent selector content but rather the nature of the object they are supposed to describe (style). In other words selector names should be as abstract as possible in regards to how much they depend on the selector content itself.

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

Here is a practical problem which you will run into if you decide to use your system. What if you decide to change the value of your margin-right attribute for the .margin-right-1 class? Following your logic you would now have to change its name to lets say margin-right-10 and not only that but you would also be forced to update your complete HTML code in order to replace references to the margin-right-1 with margin-right-10 class.

如果您决定使用系统,这将是一个实际问题。如果您决定更改.margin-right-1类的margin-right属性值,该怎么办?按照你的逻辑,你现在必须改变它的名字,让我们说margin-right-10,不仅如此,你还将被迫更新你的完整HTML代码,以便用margin-替换margin-right-1的引用。右10班。

However if you define a class selector named, lets say, .wrapper you could redefine its attributes later however you like.

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

Not only that but what will you do if your selector also has a margin-left attribute? Which one would become dominant in order to give name to that particular selector?

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

1  

I suggest you to use LESS.

我建议你用LESS。

You can then create so called "mixins" and use them in your styles. E.g.

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

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

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

1  

There has been a lot of discussion about what constitutes a good class name. Community consensus and the HTML spec itself suggest that your class names describe what the element is, not how it should look.

关于什么构成一个好的班级名称已经有很多讨论。社区共识和HTML规范本身表明您的类名称描述了元素是什么,而不是它应该是什么样子。

There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

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

Also see the Semantic HTML page on Wikipedia.

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

1  

Imagine that you then decide to use the same HTML for your mobile website, but a different stylesheet. Let's say you have an article container that you've set to 800px wide. Rather than having .article {width: 800px} you'll have .width-800 {width: 400px}. How confused will you be when trying to write and debug your new layout?

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

Also, maybe you don't want all elements that were 800px wide to now be 400px, just articles. So using your method, to target your article container, you'd have to chain together all the different classes that are used by it, e.g:

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

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

This much longer selector means that:

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

• It takes up more room (file-weight) in the CSS file, so slower page loads

它在CSS文件中占用更多空间(文件权重),因此页面加载速度较慢

• It's slower to parse nodes via XPath or Javascript

通过XPath或Javascript解析节点的速度较慢

• It's more brittle to changes, as you don't know if any other divs may be affected (if they happen to also have the same classes applied)

它更易于更改,因为您不知道是否有任何其他div可能会受到影响(如果它们碰巧也应用了相同的类)

• It's much harder to debug and isolate bug-fixes (not negatively impact other areas on the page by mistake)

调试和隔离错误修复更加困难(不会对页面上的其他区域产生负面影响)

0  

Generally you want to use classes to say what your text is, and then use CSS to say how such things should be displayed. This way if you decide you want your headings to have 0.5em of space beneath them instead of 0.3em of space, it's an easy thing (especially with a tool like FireBug).

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

Using them the way you've indicated isn't taking advantage of this separation. It's brittle and has no additional functionality beyond just putting inline styles all over the place.

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

That said, you will usually have a few utility classes like this (e.g. .collapsed { display: none }) for toggling and such.

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