通用CSS类是错误的吗？

Let's say I have cleaner like this

假设我有这样的清洁剂

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

so I can add class cleaner to everything I want to clear floats. This is imho much better way than adding

所以我可以添加类清洁剂到我要清除浮子的所有东西。这比添加更好

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

instead, because it doesn't really separate design from markup.

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

But while this approach can reduce some code duplicates, it also kinda breaks the idea of separated design, because I have to change html directly.

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

Is it ok to have classes like this and add them wherever needed? Or should I add the :after { ... explicitely to everything I wan't to clear floats (like #header:after ..., #menu:after { ....`) which results in code duplicites, but also much more separated design where I don't have to touch the HTML directly.

是否可以使用这样的类并在需要的地方添加它们?或者我应该添加:... {明确地表示我要清除浮动的所有内容(例如#header:after ...,#menu:after {....`)这导致代码重复,但也更加分离的设计,我不必直接触摸HTML。

Probably the general purpose class would be useful for javascript, where it would be easier to change styles, but are the code duplicates worth the effect of separated design in pure HTML/CSS?

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

5 个解决方案

#1

Is it ok to have classes like this and add them wherever needed?

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

Yes. I'm using it long time with many different designs and not found any trouble ;-)

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

#2

Yes.

The class attribute is used to indicate that the elements that share the same class belong to a group. You can then do things to these groups using CSS or Javascript. An element may be part of many groups so could have many classes.

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

In your example the div belongs to the groups "elements after which I want to clear floats" so each element in that group should have the class "cleaner" to indicate this to the CSS.

在你的例子中,div属于组“我想要清除浮点数的元素”,因此该组中的每个元素都应该有“clean”类来向CSS指示。

Have a read of this article on "Modular CSS" that talks about a nice way to structure your CSS and classes

阅读本文关于“模块化CSS”的文章,该文章讨论了构建CSS和类的好方法

#3

There is really no good way to clear layout in a completely content-independent solution. This is because CSS is a styling language and has been overloaded to handle layout as well (much as HTML tables were back "in the day"). There is really no purely layout language available (yet) and as such we have to make do with what we have.

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

I like your approach since it keeps extra markup elements to a minimum, which is much more portable. However I'm not sure IE6 supports the :after pseudo-element, so tread carefully.

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

#4

What I try to do in situations like this is figure out if there's some underlying abstraction that I'm missing. Do these elements have anything in common in terms of the structure? Can you think of a class name that would tie all of them together and make sense absent the CSS?

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

If not, don't feel bad about cheating. Perfect is the enemy of good.

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

#5

The problem is that CSS is poorly designed from the standpoint of avoiding duplication. It would be awesome if we could define groups of rules and values and apply those to certain selectors. This way you could avoid duplication without putting presentational markup in your HTML. Unfortunately CSS makes this very hard to do properly.

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

Your approach is fairly sound but suffers from one major drawback: if the same HTML is meant to be used with multiple stylesheets, and some of those stylesheets need clearing in different places than others, then you may have problems with this approach. If your HTML code is already tied to the presentation of the document then this drawback doesn't apply as much.

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

Edit: Forgot to mention that you can void repeating yourself if your CSS is generated programmatically. Then it can be as verbose and complex as CSS requires while being conceptually simple and easy to maintain. The downside here would be increased download size. This could be mitigated by compression.

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

#1