CSS类命名约定

Question 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>

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

Question 2

这个问题的直接答案就在这个下面，由柯特。

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

更新

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

主要原理：

一个页面是由独立的块构成的。块是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两年了，我声称这是我见过的最好的约定。

Question 3

我会去：

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

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

.controls.primary {}

注意controls，由于这是您的主类，因此我也将primary/secondary放在了代码的前面。

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

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


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

Question 4

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

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

为什么：

在与不同类型的开发人员一起进行项目时，大型CSS曾经是一场噩梦。缺乏惯例和指导方针将导致无法维持的泥潭。

目标：

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

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

类：

命名级联样式表分为：

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

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

例子：

<!-- 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>

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

工具：

安装：

npm install ncss-linter

验证HTML字符串：

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

验证本地路径：

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

验证远程URL：

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

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

Question 5

Twitter使用SUIT CSS：

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

同一位作者还编写了惯用CSS：

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