CSS 类命名约定

CSS class naming convention

提问by bobo

On a web page, there are two blocks of controls (primary and secondary), what class names would most people use?

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

Choice 1:

选择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>

Choice 2:

选择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>

回答by Ivan Ivanov

The direct answer to the question is right below this one, by Curt.

这个问题的直接答案就在这个问题的下面，由 Curt 撰写。

If you're interested in CSS class naming conventions I suggest to consider one very useful convention named BEM(Block, Element, Modifier).

如果您对 CSS 类命名约定感兴趣，我建议考虑一种非常有用的约定，名为BEM（块、元素、修饰符）。

UPDATE

更新

Please read more about it here - http://getbem.com/naming/- that's a newer version that renders the following answer obsolete.

请在此处阅读更多相关信息 - http://getbem.com/naming/- 这是一个较新的版本，使以下答案过时。

---

---

Main principles:

主要原则：

• A page is constructed from independent Blocks. Block is an HTML element which class name has a "b-" prefix, such as "b-page" or "b-login-block" or "b-controls".

• All CSS selectors are based on blocks. There shouldn't be any selectors that aren't started with "b-".

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

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

Good:

好的：

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

Bad:

坏的：

.super-control { ... }

• If you need another block (on the another page maybe) that is similar to block you already have, you should add a modifier to your block instead of creating a new one.

• 如果您需要另一个与您已有的块类似的块（可能在另一页上），您应该向您的块添加一个修改器，而不是创建一个新的。

Example:

例子：

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

With modifier:

带修饰符：

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

Then you can specify any modifications in CSS:

然后你可以在 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; }

If you have any questions I'd be pleased to discuss it with you. I've been using BEMfor two years and I claim that this is the best convention I've ever met.

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

回答by Curt

I would go with:

我会去：

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

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

As long as your CSS is structured correctly, primaryand secondaryshouldn't clash with anything else on your application:

只要您的 CSS 结构正确，primary并且secondary不应与应用程序中的其他任何内容发生冲突：

.controls.primary {}

Notice I've also put controlsahead of primary/secondaryin the code as this is your main class.

请注意，我还在代码中放置controls了primary/ secondary，因为这是您的主类。

I think the first set beneath is a lot more readable than the second:

我认为下面的第一组比第二组更具可读性：

.controls.primary {}
.controls.secondary {}


.primary.controls {}
.secondary.controls {}

回答by redaxmedia

There is an great alternative called NCSS.

有一个很好的替代方案，称为NCSS。

Named Cascading Style Sheets is a naming convention and guideline for semantic CSS.

命名级联样式表是语义 CSS 的命名约定和指南。

Why:

为什么：

Massive CSS used to be a nightmare while working on projects with different kinds of developers. The lack of conventions and guidelines are going to lead to a unmaintainable ball of mud.

在与不同类型的开发人员一起工作时，大量 CSS 曾经是一场噩梦。缺乏惯例和指导方针将导致无法维护的泥球。

Goal:

目标：

A predictable grammar for CSS that provides semantic information about the HTML template.

一种可预测的 CSS 语法，提供有关 HTML 模板的语义信息。

• What tags, components and sections are affected
• What is the relation of one class to another

• 哪些标签、组件和部分受到影响
• 一类与另一类的关系是什么

Classes:

课程：

Named Cascading Style Sheets are divided into:

命名级联样式表分为：

• Namespaces
• Structural Classes
• Component Classes
• Type Classes
• Modifier Classes
• Functional Classes
• Exceptions

• 命名空间
• 结构类
• 组件类
• 类型类
• 修饰符类
• 功能类
• 例外

Further reading: https://ncss.io/documentation/classes

进一步阅读：https: //ncss.io/documentation/classes

Examples:

例子：

<!-- header -->

<header id="header" class="foo-header"> 
    <h1 class="foo-title-header">Website</h1>
</header>

<!-- main -->

<main class="foo-main foo-wrapper">

    <!-- content -->

    <article id="content" class="foo-content">
        <h2 class="foo-title-content">Headline</h2>
        <div class="foo-box-content">Box</div>
    </article>

    <!-- sidebar -->

    <aside id="sidebar" class="foo-sidebar">
        <h3 class="foo-title-sidebar">Headline</h3>
        <p class="foo-text-sidebar">Text</p>
    </aside>

</main>

<!-- footer -->

<footer id="footer" class="foo-footer">
    <div class="foo-box-footer">Powered by NCSS</div>
</footer>

Further reading: https://ncss.io/documentation/examples

进一步阅读：https: //ncss.io/documentation/examples

Tools:

工具：

Installation:

安装：

npm install ncss-linter

Validate a HTML string:

验证 HTML 字符串：

bin/ncss-linter --html='<div class="box-content"></div>'

Validate a local path:

验证本地路径：

bin/ncss-linter --path=templates/**/*.html --namespace=foo

Validate a remote URL:

验证远程 URL：

bin/ncss-linter --url=https://redaxmedia.com --namespace=rs --log-level=info

Further reading: https://ncss.io/documentation/tools

进一步阅读：https: //ncss.io/documentation/tools

回答by turbophi

Twitter uses SUIT CSS:

Twitter 使用 SUIT CSS：

https://github.com/suitcss/suit/blob/master/doc/README.md

https://github.com/suitcss/suit/blob/master/doc/README.md

The same author also wrote Idiomatic CSS:

同一作者还编写了 Idiomatic CSS：

https://github.com/necolas/idiomatic-css

https://github.com/necolas/idiomatic-css