bem命名

转载 2017年08月30日 13:20:14

引用官网


CSS selector naming convention

  • Names of BEM entities are written using numbers and lowercase Latin characters.
  • Individual words within names are separated by a hyphen (-).
  • Information about the names of blocks, elements, and modifiers is stored using CSS classes.

Naming rules for:

Block name

A block name follows the block-name scheme and defines a namespace for elements and modifiers.

Various prefixes are sometimes added to block names.

Our experience of using prefixes is covered in detail in the article The History of BEM.

Example

menu

lang-switcher

HTML

<div class="menu">...</div>

CSS

.menu { color: red; }

Element name

The namespace defined by the name of a block identifies an element as belonging to the block. The element name is separated from the block name with a double underscore (__).

The full name of an element is created using this scheme:

block-name__elem-name

If a block has several identical elements, such as in the case of menu items, all of them will have the same name menu__item.

Important! The BEM methodology does not allow for elements of elements.

Example

menu__item

lang-switcher__lang-icon

HTML

<div class="menu">
  ...
  <span class="menu__item"></span>
</div>

CSS

.menu__item { color: red; }

Modifier name

The namespace defined by the name of a block identifies a modifier as belonging to that block or its element. The modifier name is separated from the block or element name by a single underscore (_).

The full name of a modifier is created using the scheme:

  • For boolean modifiers — owner-name_mod-name.
  • For key-value modifiers — owner-name_mod-name_mod-val.

Important! In the BEM methodology, a modifier cannot be used outside of the context of its owner.

Block modifier

  • Boolean modifier.

    The value is not specified for this type of modifier. The full name is created using the scheme:block-name_mod-name.

    Example

    menu_hidden

  • Key-value modifier.

    The value of the modifier is separated from its name by a single underscore (_) The full name is created using the scheme: block-name_mod-name_mod-val.

    Example

    menu_theme_islands

    HTML

    <div class="menu menu_hidden">...</div>
    <div class="menu menu_theme_islands">...</div>
    
    

    Incorrect notation

    <div class="menu_hidden">...</div>
    

    Here the notation is missing the block that is affected by the modifier.

    CSS

    .menu_hidden { display: none }
    .menu_theme_islands { color: green; }
    
    

Element modifier

  • Boolean modifier.

    The value is not specified for this type of modifier. The full name is created using the scheme:block-name__elem-name_mod-name.

    Example

    menu__item_visible

  • Key-value modifier.

    The value of the modifier is separated from its name by a single underscore (_). The full name is created using the scheme: block-name__elem-name_mod-name_mod-val.

    Example

    menu__item_type_radio

    HTML

    <div class="menu">
      ...
      <span class="menu__item menu__item_visible menu__item_type_radio">...</span>
    </div>
    
    

    CSS

    .menu__item_type_radio { color: blue; }

总结

For boolean modifiers — block-name__elem-name_mod-name

For key-value modifiers — block-name__elem-name_mod-name_mod-val


相关文章推荐

提升CSS文件的可维护性--采用BEM进行CSS类进行命名

BEM(Block–Element-Modifier)是什么?BEM是由Yandex公司推出的一套CSS命名规范,官方是这么描述它的:BEM — Block Element Modifier is a...

CSS命名规范——BEM思想(非常赞的规范)

CSS命名规范--BEM思想 个人非常喜欢的一篇文章。之前在写CSS各种选择器的时候就一直有这样一个困惑,我到底要如何来给他们命名,才会显得统一又美感。而这篇文章给我了一个明确的答案,如果你也同笔者有...

问答:如何规划CSS 中 的命名方式 如何看待 CSS 中 BEM 的命名方式?

好多盆友 很纠结 css命名规则 怎么弄,还没起步就被绊住了,那么今天蝈蝈就针对这个问题来讨论一下 没什么技术 含量,但却对效率开发至关重要的 “问题”。 下文是一些知乎大神的个人经验总结,如...

边界元法BEM边界元法

  • 2011-03-04 09:02
  • 2.16MB
  • 下载

Bempp bem++ 所使用的AHMED

  • 2014-12-13 00:21
  • 1.24MB
  • 下载

Css设计模式-理论篇之OOCSS、SMACSS与BEM

CSS(Cascading Style Sheet,可译为“层叠样式表”或“级联样式表”)是一组格式设置规则,用于控制Web页面的外观。作为每个前端工程师入门第一门学习的语言来说,它简单易学的特点让许...

BEM的定义

特别声明:此篇文章由David根据《Block, Element, Modifier》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文...

前端规范(ES6\BEM\OOCSS\SMACSS)

前端规范在实际开发中,由于团队成员编码习惯不一,技术层次不同,开发前定制并遵循一种代码规范能提高代码质量,增加开发效率。主要内容包括ES6、BEM、 OOCSS、SMACSS。

BEM的定义

特别声明:此篇文章由David根据《Block, Element, Modifier》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处...

批量重命名工具

内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)