CSS BEM 命名简介

  1. BEM是一种CSS命名规范,旨在使用严格的命名约定,使得CSS类的命名更加透明,能直接了解上下文含义。BEM分别代表块(Block)、元素(Element)、修饰符(Modifier)。

    • 页面由多个[ 块 ]构成
    • [ 元素 ]是[ 块 ]的组成部分,他们是上下层级的关系
    • [ 修饰符 ]表示[ 块 ]或[ 元素 ]某一种状态或修饰
    • [ 元素 ]用双下划线表示,如.block__element {...}
    • [ 修饰符 ]用双中划线表示,如.block--modifier {...}
    • 可以用中划线链接前缀与块,如js-block {...}
      • 关于前缀,通常有这些:l-表示布局相关的元素、c-表示组件、u-表示工具类、js-表示JS需要获取的元素,不会出现在CSS样式文件中
  2. 命名的基本原则

    • CSS中只能使用类名

    • 每一个块名应该有一个命名空间(前缀)

    • 每一天CSS规则必须属于一个块

    • 一个块中元素的类名必须用父级块的名称作为前缀

      // 普通CSS
      .list{}
      .list .item{}
      
      // BEM
      .list {}
      .list__item{}
      
  3. 书写原则

    • 原则上不会出现两层以上选择器嵌套,用命名代替CSS嵌套的复杂性

    • 两层选择器嵌套出现在出现子元素的情况,示例

      • 第一项
        我是名称
        看类名 我是link
      • 第二项 且 当前选择项
        我是名称
        我是link
      • 第三项 且 特殊高亮
        我是名称
        我是link
      .xxx{}
      .xxx__item{}
      .xxx__item_hightlight{}
      .xxx__product-name{}
      .xxx__link{}
      .xxx__ming-zi-ke-yi-hen-chang{}
      
      // 嵌套写法
      .xxx__item_current{
          .xxx__link{}
      }
      

参考:

  • [规范] CSS BEM 书写规范
  • BEM —— 一种 CSS 命名方式

你可能感兴趣的:(CSS BEM 命名简介)