有关 CSS 命名 - Githubissues

CSS模块

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

组件的css样式和html结构必定是息息相关，合理的css命名能方便理解html的结构也方便维护和复用。

BEM

Block Element Modifier

.block {}
.block__element {}
.block--modifier {}

block-name__element-name--modifier-name

Block: 一个完整的有意义的实体如 header,contaienr,menu,checkbox,input，通常使用一个短名词来命名。
Element: block的一个子部分，它依附于block，和其他element共同组成block 如 menu item,list item,checkboc caption,header title
Modifier: block或者element的一个标志（flag）,用于改变他们的表现效果如 disabled,highlighted,fixed,size big,color yellow

<form class="form form--theme-xmas form-simple">
    <input class="form__input" type="text" />
    <input class="form__submit form__submit--disabled" type="submit" />
</form>

.form {}
.form--theme-xmas {}
.form--simple {}
.form__input {}
.form__submit {}
.form__submit--disabled {}

COMCEPT

The idea behind it is to divide the user interface into independent blocks. This makes interface development easy and fast even with a complex UI, and it allows reuse of existing code without copying and pasting.

WHY

可复用，阅读css时很容易分清结构上的依赖，便于协作-- 很多时候不敢修改css是因为担心某处修改可能引发不期的副作用，而严格执行BEM则能回避掉这种问题。虽然情况很多不能一概而论，但是BEM确实是更好地书写和维护css代码的一种标准。
结构和表现都在class命名中体现，不书写嵌套的规则--使css尽可能的扁平和低权重

实际运用时

.nav .nav__listItem .btn--orange {}

<a class="btn" href="http://www.jd.com">
    <div class="nav__listItem">item one</div>
    <div class="nav__listItem">item two</div>
</a>

永远不要在不相关的块中覆盖样式
当元素个体能正确显示时，避免书写不必要的父级元素

使用Sass

不生成嵌套层级的写法

.block {
    @at-root #{&}__element {}
    @at-root #{&}--modifier {}
}

其他

除了BEM，还有其他的CSS命名规则，如SMACSS、OOCSS，并不是说BEM就一定优于它们，而是它们包括BEM都意图于形成一套帮助理解css和保持其可维护的规则。

SUIT

起源于BEM，使用驼峰命名和连字符区分后代元素和修饰符

.ComponentName {}
.ComponentName--modifierName {}
.ComponentName-descendantName {}
.ComponentName.is-someState {}

.ProductDetails {}
.ProductDetails-price {}
.ProductDetails-title--sale {}

OOCSS

完整名称： Object Oriented CSS，“面向对象CSS” 是比较早期的一种组织、编写、管理css的方案

两个主要的原则：

结构和皮肤分开（Separate structure and skin）
内容和容器分开（Separate container and content）
```
.mod {}
.inner {}
.talk {}
.talk .inner {}
```

SMACSS

完整名称：Scalable and Modular Architecture for CSS，“可扩展、模块化CSS架构” 样式被划分为5个部分：

Base: 页面元素的样式，如body input button ul ol 等
Layout: 全局布局元素的样式
Module: 可复用的模块样式
State: 模块不同状态下和默认状态的样式
Theme: 不同的设计样式

在Layout、State、Module这三种中使用不同的前缀来作区分如

layout-、grid-
is-
module-

模块相关的元素使用一个 base name 作为前缀，如.exm和.exm-caption

为模块编写样式时，避免使用id选择符和元素选择符

语义化命名

.example {}
.example-title {}
.example-contents {}

.example .is-important {} // 使用单独的状态
.example-important {} // 或者把模块和状态合并起来

Atomic CSS

.mt-1 { margin-top: 1px; }
.w-200 { width: 200px; }

AMCSS

Attribute Modules from CSS

<div button="large blue"></div>
<div am-button="large blue"></div>

如下样式：

.button {}
.button--large {}
.button--blue {}

可以被转换为

[am-button] {}
[am-button~='large'] {}
[am-button~='blue'] {}

如果觉得这么写太unusual了太激进了，你可以考虑如下写法

<div am-button am-button-large am-button-blue></div>

FUN

Flat hierarchy of selecters, Utility styles, Name-spaced components 层级扁平的选择器，通用样式，带有命名空间的组件

推荐使用class去选择元素，避免不需要的层级
鼓励使用原子式的样式处理常见的样式，如w100-width: 100%
为每个组件使用一个简单的命名空间，如.sc--shop cart

一些其他厂规

NEC（网易）

ALICEUI（支付宝）

一些其他组件库的样式命名

bootstrap(block-name-element-name-modifier-name)

antd

命名方式和bootstrap相似始终使用“-”中划线分割，不使用扁平的层级，带有命名空间的嵌套以alert组件为例

@alert-prefix-cls: ~"@{ant-prefix}-alert";
.@{alert-prefix-cls} {
    &&-no-icon {}
    &-icon {}
    &-description {}
    &-success {}
    ... ...
}

以button组件为例

@btn-prefix-cls: ~"@{ant-prefix}-btn";
.@{btn-prefix-cls} {
    &-primary {}
    &-ghost {}
    &-dashed {}
    &-danger {}
    ... ...
    &-background-ghost {}
    &-background-ghost&-primary {}
    &-background-ghost&-danger {}
}

MangiDu / blog

有关 CSS 命名 #9