Question

假设我有这样的清洁

.cleaner:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;                
}

所以我可以将类清洁添加到我要清除浮动的所有内容中。这比添加

更好

<div style="clear:both;"></div>

相反，因为它并没有真正将设计与标记分开。

虽然这种方法可以减少一些代码重复，但它也有点打破分离设计的想法，因为我必须直接更改html。

是否可以使用这样的类并在需要的地方添加它们？或者我应该明确地将:after { ...添加到我想要清除浮点数的所有内容上（例如#header：after ...，＃menu：after {....`）这导致代码重复，但也很多更加独立的设计，我不必直接触摸HTML。

通用类可能对javascript很有用，它可以更容易地改变样式，但是代码重复是否值得纯HTML / CSS中分离设计的效果？

Answer 1

是否可以使用这样的类并在需要的地方添加它们？

是。我长时间使用它有很多不同的设计，没有发现任何麻烦; - ）

Answer 2

是。

class属性用于指示共享同一个类的元素属于一个组。然后，您可以使用CSS或Javascript对这些组执行操作。元素可能是许多组的一部分，因此可能有许多类。

在你的例子中，div属于“我希望清除浮动的元素”组，因此该组中的每个元素都应该有“clean”类来向CSS指示。

在"Modular CSS"上阅读本文，讨论构建CSS和类的好方法

Answer 3

在完全独立于内容的解决方案中，确实没有很好的方法来清除布局。这是因为CSS是一种样式语言，并且已经过载以处理布局（就像HTML表格在当天“”一样）。实际上没有可用的纯粹布局语言，因此我们必须使用我们所拥有的。

我喜欢你的方法，因为它将额外的标记元素保持在最低限度，这更加便携。但是我不确定IE6是否支持：after伪元素，所以谨慎行事。

Answer 4

我在这种情况下尝试做的是弄清楚是否存在一些我缺少的潜在抽象。这些元素在结构方面有什么共同之处吗？你能想到一个将所有这些名称联系在一起并且没有CSS的类名吗？

如果没有，请不要为作弊感到难过。完美是善的敌人。

Answer 5

问题在于，从避免重复的角度来看，CSS的设计很差。如果我们可以定义规则和值组并将其应用于某些选择器，那将是非常棒的。这样，您可以避免重复，而无需在HTML中添加表示性标记。不幸的是，CSS很难做到这一点。

您的方法相当合理，但有一个主要缺点：如果相同的HTML意味着要与多个样式表一起使用，并且其中一些样式表需要在不同的位置清除，那么您可能会遇到这种方法的问题。如果您的HTML代码已经与文档的表示相关联，那么这个缺点就不适用了。

编辑：忘记提及如果以编程方式生成CSS，则无法重复自己。然后它可以像CSS一样冗长和复杂，同时在概念上简单易维护。这里的缺点是增加下载大小。这可以通过压缩来缓解。