There are only two hard things in Computer Science: cache invalidation and naming things.
– Phil Karlton



使用 BEM 命名规范,理论上讲,每行 css 代码都只有一个选择器。

BEM代表 “块(block),元素(element),修饰符(modifier)”,我们常用这三个实体开发组件。


-   中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。
__  双下划线:双下划线用来连接块和块的子元素
_   单下划线:单下划线用来描述一个块或者块的子元素的一种状态



一个块是设计或布局的一部分,它有具体且唯一地意义 ,要么是语义上的要么是视觉上的。


针对块的CSS类名会加一些前缀(ui-),这些前缀在CSS中有类似 命名空间 的作用。


  1. CSS中只能使用类名(不能是ID)。
  2. 每一个块名应该有一个命名空间(前缀)
  3. 每一条CSS规则必须属于一个块。

例如:一个自定义列表 .list 是一个块,通常自定义列表是算在 mod 类别的,在这种情况下,一个 list 列表的block写法应该为:



块中的子元素是块的子元素,并且子元素的子元素在 bem 里也被认为是块的直接子元素。一个块中元素的类名必须用父级块的名称作为前缀。

如上面的例子,li.item 是列表的一个子元素,

.list .item{}




用一个例子来解释最好不过了。一个表示按钮的块默认有三个大小:小,中,大。为了避免创建三个不同的块,最好是在块上加修饰符。这个修饰符应该有个名字(比如:size )和值( smallnormal 或者 big )。


.list .item{}
.list .item.active{}







atomic 理论框架


atomic design 的 [a,m,o]


classic BEM + atomic prefix

classic BEM + atomic prefix

camelCase BEM + atomic prefix

camelCase BEM + atomic prefix

atomic 设计理论的前缀+BEM 推荐使用


BEM 优化

Type Prefix Examples Description
Component c- c-card c-checklist Form the backbone of an application and contain all of the cosmetics for a standalone component.
Layout module l- l-grid l-container These modules have no cosmetics and are purely used to position c- components and structure an application’s layout.
Helpers h- h-show h-hide These utility classes have a single function, often using !important to boost their specificity. (Commonly used for positioning or visibility.)
States is- has- is-visible has-loaded Indicate different states that a c- component can have. More detail on this concept can be found inside problem 6 below, but


type prefix Description
Object o- Signify that something is an Object, and that it may be used in any number of unrelated contexts to the one you can currently see it in. Making modifications to these types of class could potentially have knock-on effects in a lot of other unrelated places. Tread carefully.
Component c- Signify that something is a Component. This is a concrete, implementation-specific piece of UI. All of the changes you make to its styles should be detectable in the context you’re currently looking at. Modifying these styles should be safe and have no side effects.
utility u- Signify that this class is a Utility class. It has a very specific role (often providing only one declaration) and should not be bound onto or changed. It can be reused and is not tied to any specific piece of UI. You will probably recognise this namespace from libraries and methodologies like SUIT.
theme t- Signify that a class is responsible for adding a Theme to a view. It lets us know that UI Components’ current cosmetic appearance may be due to the presence of a theme.
states is-, has- Signify that the piece of UI in question is currently styled a certain way because of a state or condition. This stateful namespace is gorgeous, and comes from SMACSS. It tells us that the DOM currently has a temporary, optional, or short-lived style applied to it due to a certain state being invoked.
hack _ Signify that this class is the worst of the worst—a hack! Sometimes, although incredibly rarely, we need to add a class in our markup in order to force something to work. If we do this, we need to let others know that this class is less than ideal, and hopefully temporary (i.e. do not bind onto this).
javascript js- Signify that this piece of the DOM has some behaviour acting upon it, and that JavaScript binds onto it to provide that behaviour. If you’re not a developer working with JavaScript, leave these well alone.
QA qa- Signify that a QA or Test Engineering team is running an automated UI test which needs to find or bind onto these parts of the DOM. Like the JavaScript namespace, this basically just reserves hooks in the DOM for non-CSS purposes.


a designer's way of keeping files organized

a designer's way of keeping files organized2

File naming convertion

sketch art board naming


  • sortme
  • renameit
  • replace2

详见 sketch plugin


※ 使用 Semantic Versioning 2.0.0 语义化版本规范。