css - 区分 CSS 中的上下文相关类

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 { ... }。

• Kind 2(例如 bar)永远不会应用 CSS 规则，除非是 Kind 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 }

当然，如果您有大量样式，这可能不适合您。您不会想让您的样式表膨胀。但是如果可读性是主要的……

此外，您应该尽量避免根据它们的作用来命名您的样式(例如，.right)，以防将来您想要更改它们的作用(例如，让它们离开) .