区分CSS中的上下文相关类

问题描述

| 这更像是RFC。我有自己指定规则的CSS类，例如页脚

.footer { border: 1px solid black; }

然后我有一些只将规则分配为其他类后代的类，例如right

.footer .right { position: absolute; right: 0}
.menu .right { float: right }

而且我希望能够一眼就将它们区分开，因此我知道我可以在新的上下文中使用.right，并且不会与现有的CSS规则冲突。 我想到了将上下文无关的类命名为大写（Footer），但这意味着大多数类都将大写。或在上下文相关的类前面加上破折号，例如-right。就我对标准的理解而言，这是合法的。浏览器可以处理吗？ 您认为最好的是什么？这通常是个好主意吗？ 更新： 关键是要区分两种类型。 种类1（例如foo）可能会将CSS规则套用到「ѭ2」。 种类2（例如bar）永远不会应用CSS规则，除非是种类1类

.foo .bar { ... } /* OK */

的后代，也决不是

.bar { ... } /* WRONG */

然后的问题是：您如何建议区分种类1和种类2的类。     

解决方法

在代码中添加一些注释和缩进可能会更容易。例如

/* Main FOOTER style */
.footer { border: 1px solid black; }

    /* sub FOOTER styles */
    .footer .right { position: absolute; right: 0}
    .menu .right { float: right }

当然，如果您有很多样式，这可能对您不起作用。您不想to6。但是如果可读性是主要的事情... 此外，如果您以后想更改样式（例如，保留样式），则应尽量避免根据样式来命名样式（例如

.right

）。     ,当然，这是个好主意！ 我会先使用

class=\"footer right\"

，然后再使用ѭ9but，但是某些旧的浏览器将无法使用。 所有浏览器都能完美地处理破折号。我实际上使用

.footer

和

footer-right

，因此您可以像这样使用then： 的HTML

<div class=\"footer footer-right\">...</div>

的CSS

.footer { border : 1px solid #000}
.footer-right { position : absolute; right : 0}
.footer a { ... }
.footer-right a { ... }
.menu { ... }
.menu-right { float : right}