应该避免css类名称，如“floatleft”，直接描述附加的风格？ [英] Should css class names like 'floatleft' that directly describe the attached style be avoided?

问题描述

许多网站使用类名称，例如 floatleft ， clearfloat ， alignright ， small ， center 等。这似乎是有意义的，所以当写新的内容，你可以轻松包装（例如）< div class =clearfloat> ...< / div>

Lots of websites use class names like floatleft, clearfloat, alignright, small, center etc that describe the style that is attached to the class. This seems to make sense so when writing new content you can easily wrap (for example) <div class="clearfloat">...</div> around your element to make it behave the way you want.

我的问题是，这种命名类型不会违反将内容与表示分离的想法吗？将 class =floatleft放在一个元素上显然是将演示文稿信息放入HTML文档中。

My question is, doesn't this style of naming classes go against the idea of separating content from presentation? Putting class="floatleft" on an element is clearly putting presentation information into the HTML document.

像这样直接描述附加的风格应该避免，如果是这样，有什么替代方案吗？

Should class names like this that directly describe the attached style be avoided, and if so what alternative is there?

只是一个问题的什么命名类。例如，语义准确的文档可能看起来像：

To clarify, this isn't just a question of what to name classes. For example a semantically accurate document might look something like:

<div class="foo">Some info about foo</div>
...
<div class="bar">Info about unrelated topic bar</div>
...
<div class="foobar">Another unrelated topic</div>

说所有这些div需要清除浮动，css看起来像：

Say all these divs need to clear floats, the css would look something like:

div.foo, div.bar, div.foobar {
    clear:both;
}

随着这些清算元素的数量增加，这开始变得丑陋单个 class =clearfloat将用于相同的目的。建议根据附加的样式对元素进行分组，以避免在CSS中出现重复，即使这意味着演示信息会嵌入到HTML中。

This starts to get ugly as the number of these clearing elements increases - whereas a single class="clearfloat" would serve the same purpose. Is it recommended to group elements based on the attached styles to avoid repetition in the CSS, even if this means presentational information creeps into the HTML?

更新：感谢您的所有答案。普遍的共识似乎是避免这些类名有利于语义名，或者至少谨慎地使用它们，只要它们不妨碍维护。我认为重要的是，布局的变化不应该要求对标记进行过多的更改（虽然有几个人说，如果使整体维护更容易，小改动是好的）。感谢那些建议其他方法来保持CSS代码更小的用户。

Update: Thanks for all the answers. The general consensus seems to be to avoid these class names in favour of semantic names, or at least use them sparingly provided they don't hinder maintenance. I think the important thing is that changes in the layout should not require excessive changes to the markup (although a few people said minor changes are okay if it makes overall maintenance easier). Thanks to those who suggested other methods to keep CSS code smaller as well.

推荐答案

code> narrow 以黄色突出显示， center 转换更好的左对齐，以及您调用的图片 floatleft 现在属于右侧。

It's great until you re-design, and narrow is highlighted yellow, center converts better left-justified, and the image you called floatleft now belongs on the right.

我承认使用 floatleft 和 clear 作为CSS类名称，但如果您选择与内容的语义相关的名称，则更容易维护CSS，例如反馈和 heroimage 。

I'll admit to the sin of using floatleft and clear as CSS class names, but it is much easier to maintain your CSS if you choose names that relate to the semantic meaning of the content, like feedback and heroimage.

这篇关于应该避免css类名称，如“floatleft”，直接描述附加的风格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！