CSS类命名约定

Question

在网页上，有两个控件块（主要和次要），大多数人会使用什么类名？

选择1：

<div class="primary controls">
 <button type="button">Create</button>
</div>

<div class="secondary controls">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

选择2：

<div class="primary-controls controls">
 <button type="button">Create</button>
</div>

<div class="secondary-controls controls">
 <button type="button">Edit</button>
 <button type="button">Remove</button>
</div>

Answer 1

直接问题的答案是正确的在这之下，由柯特。

如果您对CSS类命名约定感兴趣，我建议考虑一种非常有用的约定，即 BEM （ Block，Element，Modifier ）。

更新

请在此处详细了解-这是一个较新的版本，它使以下答案过时了。

主要原理：

• 一个页面是由独立的块构成的。块是HTML元素，其类名带有“ b-”前缀，例如“ b-page”或“ b-login-block”或“ b-controls”。

• 所有CSS选择器均基于块。不应有不以“ b-”开头的选择器。

好：

.b-controls .super-control { ... }

坏：

.super-control { ... }

• 如果您需要另一个块（可能在另一个页面上）类似于您已经拥有的块，则应在块中添加一个修饰符，而不是创建一个新的。

例：

<div class="b-controls">
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

使用修饰符：

<div class="b-controls mega"> <!-- this is the modifier -->
    <div class="super-control"></div>
    <div class="really-awesome-control"></div>
</div>

然后，您可以在CSS中指定任何修改：

.b-controls { font: 14px Tahoma; }
.b-controls .super-control { width: 100px; }

/* Modified block */
.b-controls.mega { font: 20px Supermegafont; }
.b-controls.mega .super-control { width: 300px; }

如果您有任何疑问，我们很乐意与您讨论。我已经使用 BEM 两年了，我声称这是我见过的最好的约定。