Question

这更像是一个RFC。我有自己分配规则的CSS类，比如 footer

.footer { border: 1px solid black; }

然后我的类只将规则指定为其他类的后代，例如 right

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

我希望能够在第一眼看上去区分它们，所以我知道我可以在新的上下文中使用 .right ，我不会碰到已经存在的CSS规则。

我想过将大写的上下文无关的类命名为（ Footer ），但这意味着大多数类都会大写。或者使用短划线为依赖于上下文的类添加前缀，例如 -right 。就我对标准的理解而言，这是合法的。浏览器可以处理这个吗？

您认为最好的是什么？这通常是个好主意吗？

更新关键在于区分两种类别。

第1类（例如foo）可能会将CSS规则应用于.foo { ... }。
第2类（例如bar）永远不会应用CSS规则，除了作为1类.foo .bar { ... } /* OK */的后代，而不是.bar { ... } /* WRONG */

那么问题是：你如何建议区分第1类和第2类。

Answer 1

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

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

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

当然，如果你有很多款式，这可能不适合你。你不想让你的stylesheet膨胀。但如果可读性是主要的......

此外，您应该尝试避免根据他们的行为命名您的样式（例如，.right），以防您以后想要更改他们的行为（例如，让他们离开）。

Answer 2

当然，这是一个好主意！

我会使用class="footer right"然后使用.footer.right，但是有些旧的浏览器不适用于此。

所有浏览器都能完美地处理破折号。我实际上使用了.footer和footer-right，因此您可以像这样使用：

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}

区分CSS中的上下文相关类

2 个答案: