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

问题的直接答案是right below this one，由Curt。

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

更新

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

主要原则：

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

Answer 2

我会选择：

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

Answer 3

有一个很好的选择叫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

验证远程网址：

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

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

Answer 4

Twitter使用SUIT CSS：

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

同一作者也写过Idiomatic CSS：

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

CSS类命名约定

4 个答案:

更新