应该避免直接描述附加风格的css类名称如'floatleft'吗？

Question

许多网站使用类的名称,如floatleft,clearfloat,alignright,small,center等描述附加到的类风格.这似乎是有道理的所以写新的内容,你可以很容易地包装(例如)当<div class="clearfloat">...</div>你的元素周围使其行为您想要的方式.

我的问题是,这种命名类的风格是否违背了将内容与表示分离的想法？放置class="floatleft"元素显然是将表示信息放入HTML文档中.

应该避免像这样直接描述附加风格的类名,如果有的话,还有什么替代方案？

---

为了澄清,这不仅仅是一个如何命名类的问题.例如,语义准确的文档可能类似于:

<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看起来像:

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

随着这些清算元素数量的增加,这开始变得丑陋 - 而单一的清算元素class="clearfloat"将起到同样的作用.是否建议根据附加的样式对元素进行分组以避免在CSS中重复,即使这意味着表示信息会蔓延到HTML中？

---

更新:感谢您的所有答案.普遍的共识似乎是避免这些类名称支持语义名称,或者至少在不妨碍维护的情况下谨慎使用它们.我认为重要的是布局的变化不应该要求对标记进行过多的更改(尽管有些人说如果使整体维护更容易,那么微小的改变是可以的).感谢那些建议其他方法来保持CSS代码更小的人.

Answer 1

这是伟大的,直到你重新设计,并narrow以黄色高亮显示,center转化效果更好,左对齐,并且调用图像floatleft右侧现在属于.

我承认使用floatleft和clear作为CSS类名称的罪恶,但如果您选择与内容的语义含义相关的名称,如feedback和,则更容易维护您的CSS heroimage.

Answer 2

表现阶级名称

在HTML规范是非常明确的:

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

是否clearleft描述了内容的性质？并不是的.Eric Meyer 不久前开了个玩笑.

试着找出看似无关的元素之间的结构关系

假设您有关于鸭子的段落,关于猴子的段落和关于青蛙的段落.你想要他们有蓝色背景.

<p class="duck"></p>
<p class="monkey"></p>
<p class="frog"></p>

您可以添加此CSS规则:

p.duck, p.monkey, p.frog {
    background-color: blue;
}

但他们不是所有的动物吗？只需添加另一个animal令牌:

<p class="animal duck"></p>
<p class="animal monkey"></p>
<p class="animal frog"></p>

并将CSS规则更改为:

p.animal {
    background-color: blue;
}

它很难并且可能并不总是可能,但重要的是不要迅速放弃.

如果你不能怎么办？

如果你有很多元素,它们之间绝对没有结构关系,则表明文档存在结构性问题.尽量减少这些元素.也就是说,在一个规则上分组n个 CSS选择器仍然比在HTML文档中添加n个表示类标记更好.

Answer 3

样式类应该是语义的.这是一篇关于语义网页设计的精彩文章(好吧,我发现它真的很有帮助).

编辑:我刚才读的另一篇文章,使一些好点的使用像display: inline-block,display: table等等,而不是浮动.这应该有助于避免那些讨厌floatleft和clearfix阶级.让它们成为语义总是取决于你.

Answer 4

与主要的问题已经命名的班级floatleft,clear或类似的是,在设计上的变化意味着在HTML标记改变的事实.这不应该发生,只有当您可以在多个设计甚至媒体中重复使用相同的标记时,才能实现内容和演示之间的真正分离(想想在您的站点的桌面和移动版本之间共享相同的HTML并且只切换系统表).

现在,举个实例:).要添加Fredrik的答案,LESSCSS允许您隐藏开发人员的样式声明/ mixins.这样,您可以保护样式表中的可重用组件,而不会有在HTML中弹出它们的危险.

样本标记:

<div class="branding">Company Name</div>

示例less代码:

// example of reusable functions
.noText() {
    color: transparent;
    text-indent: -9999px;
}
.clear-after() {
    &:after {
        content: ".";
        display: block;
        visibility: hidden;
        height: 0;
        clear: both;
    }
}

.branding {
    .clear-after();
    .noText();
    background-image: ...;
}

当然,对于移动设备,您可能只想以粗体显示公司名称,而不需要任何其他样式:

.branding {
    color: pink;
    font-weight: bold;
}

Answer 5

安德鲁; 为一个易于理解的课程和ID提供合理的名称是很好的,这对您和您的同事正在进行该项目.对我来说类small,center,floatleft等什么定义我,因为当你给类中心这表明,在中央的元素,但也有其他的属性也是该类like color, background etc

例如

<div class="wrap">
 <div class="center">lorem</div>
</div>

css:
.center{margin:0 auto;}

在这个例子中center,我不清楚.但我们可以将它们用作帮助类.

例如

<div class="wrap">
 <div class="panel center narrow">lorem</div>
</div>

css:
.center{margin:0 auto;}

从上面的例子中我现在清楚地知道了阶级center在这方面的作用panel div

更多检查这些链接:

在CSS和HTML中命名ID和类的最佳方法是什么？

http://www.ronniesan.com/blog/entry.php?title=organizing-your-dom-elements-with-the-proper-ids

http://cssglobe.com/post/3745/my-top-10-most-used-css-class-names

Answer 6

我认为这取决于你如何使用这些风格.

内容应相应地命名,因为样式可能会更改,但内容可能会保持不变.

例如,如果你有一个div包含股票信息的div东西,你应该命名类似的东西div class="stockInfo",这样无论演示文稿是什么,你都可以改变样式,名称不会与那些样式相矛盾(而不是命名div div class="yellow"然后更改background-color红色).

但是,您将拥有"帮助器样式",这些样式应该以它们的名称命名.

例如,您可能希望使用a <br />来清除一些浮点数.在这种情况下,命名它<br class="clear" />并给它一种风格是完全合理的br {clear:both;}.

同样,大多数网站float的图像都是左右.为了帮助这一点,你可以设置<img class="right" src="" />和<img class="left" src="" />然后有风格相匹配,img.right {float:right;}等等.

所以这取决于用法.

Answer 7

描述函数的类名和id比使用描述元素样式的名称更好.

我通常最终不会虔诚地这样做,因为在我看来,通过使用着名的clearfix hack清除浮动元素更方便,而不是添加clear:both整个样式表.

但我认为LESS和SASS创造了有趣的机会来充分利用这两个世界,因为你可以拥有描述某些风格的 mixins和函数,并且通过包含你想要的任何"风格"仍然具有语义正确的名称.

而不是拥有这个HTML和CSS

<div class="navigation roundedcorners">...</div>
.roundedcorners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

你可以使用SASS来创建这个mixin:

=rounded-corners
  -moz-border-radius: 5px
  -webkit-border-radius: 5px
  border-radius: 5px

并将它包含在您的.navigation类中,如下所示:

.navigation
  +rounded-corners-5px

这会将你的HTML缩小到这个:

<div class="navigation">...</div>

因此,仍然可以获得具有语义正确名称的优势,同时具有在不同元素之间共享样式的便捷方式.