CSS类命名规范

Question

CSS类命名规范

78

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

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

- bobo

1

请参考以下链接：http://stackoverflow.com/questions/939909/html-naming-conventions-for-id-class-and-to-include-element-type-prefix/23658906#23658906。 - Adriano

4个回答

30

我会选择：

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

- Curtis

非常感谢您的回复。我实际上已将您的解决方案应用于我的项目中，但 Ivan 的答案提出了 BEM 命名约定，这对其他遇到同样问题的人可能非常有用。再次感谢您的回复。 - bobo

3

有一个很好的替代方案叫做[NCSS][1]。

引用：所谓命名级联样式表，是一种为语义化CSS提供命名约定和指导的规范。

为什么要使用它：在与不同类型的开发人员合作的项目中，大量的CSS曾经是一场噩梦。缺乏约定和指导将导致难以维护的混乱代码。

目标：为CSS提供可预测的语法，以提供关于HTML模板的语义信息。 - 哪些标签、组件和部分受到影响 - 一个类与另一个类之间的关系

类别：命名级联样式表分为以下几类： - 命名空间 - 结构类 - 组件类 - 类型类 - 修饰符类 - 功能类 - 异常类

进一步阅读：https://henryruhs.gitbook.io/ncss/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://henryruhs.gitbook.io/ncss/examples

- Henry Ruhs

看起来现在已经挂了。 - Evg

1

我把它更新到了GitBook上...网站确实已经过期了。 - Henry Ruhs

1

Twitter使用SUIT CSS：

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

同一位作者还写了《惯用的CSS》：

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

- turbophi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ivan Ivanov · Accepted Answer

问题的直接答案在这个链接下面，作者是Curt。

如果你对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两年了，并且我认为这是我遇到的最好的约定。