一直以来自己对命名都是比较混乱的,并没有一个比较好的格式来命名,最近自己碰巧学习到了BEM命名规范,我想谈谈自己的理解以供自己来学习,同时也可以和各位大佬一起学习。
BEM是一个很有用的方法可以创建复用组件和前端代码
有三个特性.

  1. 易用性,使用BEM只需要使用BEM的命名规范就可以。
  2. 单元性,使用独立的块和CSS选择器,可以使你的代码可重用和单元化。
  3. 灵活性,使用BEM后,方法和工具可以按照自己喜欢的方式去组织和配置。

    BEM的简介
    BEM是一个强大而简单的命名规范,使得代码更容易让人理解,容易和他人协作,容易扩展,更加强壮和明确,最重要的是严谨性。
    BEM的命名规范可以让参与网站开发的人都使用同一个代码库使用用一种方法。

BEM分别是块(Block),元素(Element),修饰符(Modifier)

  • 块(Block)
    是一个独立的页面组件跟其他的块区分开来,相当于网页中的组件Block封装了行为,模板,样式和其他技术。独立的Block可以复用,促进项目的开发。

    1. 模块与模块之间可以嵌套,可以有任意级别的嵌


      <div class="header">
      <div class="logo"></div>
      <div class="search"></div>
      </div>
    2. 可以任意移动

>>
Block可以在页面内任意的移动,也可以在页面之间或项目之间移动。
Block作为独立的实体来实现,使得在页面上改变Block改变位置并让其位置和外观不改变的简单。
3. 可复用
一个界面可以同一个Block的几个实例
  • 元素(Element)
    元素是模块Block的重要组成部分,且不能脱离模块单独的使用


    元素的名称用来描述它的目的
    一个完整的元素结构block-name__element-name,块名和元素名使用(__)双下划线分割。
    • 元素之间是可以嵌套的
    • 可以拥有任意级别的嵌套
    • 一个元素总是模块Block的一部分这意味着元素名称不能为block__element__element这种结构,而block__element这种结构才是正确的。

    <div class="weui-tabbar">
    <div class="weui-tabbar__item">
    <span>
    <img src=" " alt="" class="weui-tabbar__icon">
    </span>
    <p class="weui-tabbar__label"></p>
    </div>
    </div>

-可以在不改变元素的情况下改变DOM结构

<div class="weui-tabbar">

<div href="#" class="weui-tabbar__item">

<span>

<img src=" " alt="" class="weui-tabbar__icon">

</span>

</div>

<p class="weui-tabbar__label"></p>

</div>

-一个元素总是模块的一部分,不能单独的使用。如下weui-tabbar模块里面的p标签元素放在模块外,这是不正确的。

<div class="weui-tabbar">

<div class="weui-tabbar__item">

<span>

<img src=" " alt="" class="weui-tabbar__icon">

</span>

</div>

</div>

<p class="weui-tabbar__label"></p>

-元素是可选择的,不是所有模块都必须拥有元素
  • 修饰符(Modifier)
    Modifier是BEM的一个实体,它定义了block或element的行为或外观
    Modifier可用可不用
    Modifier本质和html的属性很相似,同一个block会因为使用Modifier而与之前看起来不一样。
    -修饰符的名字与模块和元素的名字使用(_)单下划线
    命名模式遵循如下格式:

    • Boolean类型的修饰符
      <font color=green>block-name_modifier--name</font>
      <font color=green>block-name__element-name--modifier-name</font>


      &lt;!--当模块weui-tabbar有一个focused的boolean类型的修饰符时--&gt;
      &lt;div class="weui-tabbar weui-tabbar--focused"&gt;
      当元素weui-tabbar__item有一个on类型的修饰符时
      &lt;div class="weui-tabbar__item weui-tabbar__item--on"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      • key-value类型的修饰符

&lt;font color=green&gt;block-name--modifier-name--modifier-value&lt;/font&gt;
&lt;font color=green&gt;block-name__element-name--modifier-name--modifier-value&lt;/font&gt;

<!--当模块weui-tabbar有一个值为yes的test的修饰符时-->

<div class="weui-tabbar weui-tabbar--test--yes">

当元素weui-tabbar__item有一个yes的test的修饰符时

<div class="weui-tabbar__item weui-tabbar__item--test--yes">

</div>

</div>

&gt;-一个修饰符不能单独的使用
&gt;&gt;一个修饰符不能脱离模块或元素单独的使用,一个修饰符应该改变一个实体的外观,行为或者状态,而不是替换它。

<!--正确的方法-->

<div class="weui-tabbar">

<div class="weui-tabbar__item weui-tabbar__item--on">

</div>

<!--错误的使用-->

<div class="weui-tabbar">

<div class="weui-tabbar__item--on">

</div>


以上是我经过对BEM规范学习的一些理解,大家互相学习,有很多的不足之处希望大家指出。还有很多没有学习到的东西,自己也会在未来的时间里不断学习来提高自己。

原文地址:https://segmentfault.com/a/1190000017052031

一篇关于BEM命名规范的更多相关文章

  1. CSS BEM 命名规范简介

    [前言] BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介(推荐)的相关资料 ...

  2. CSS — BEM 命名规范

    推荐阅读: https://juejin.im/post/5b925e616fb9a05cdd2ce70d 1 什么是 BEM 命名规范 Bem 是块(block).元素(element).修饰符(m ...

  3. 使用BEM命名规范来组织CSS代码

    BEM 是 Block(块) Element(元素) Modifier(修饰器)的简称 使用BEM规范来命名CSS,组织HTML中选择器的结构,利于CSS代码的维护,使得代码结构更清晰(弊端主要是名字 ...

  4. css命名规范: BEM 的命名法

    整理自:前端早读课[第1183期]这些 CSS 命名规范,将省下你大把调试时间 试图解决 3 类问题: 仅从名字就能知道一个 CSS 选择器具体做什么 从名字能大致清楚一个选择器可以在哪里使用 从 C ...

  5. 前端css命名规范----BEM

    一.什么是BEM BEM就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种前端命名方法论.这种巧妙的命名方法可以使css类对其他开发者来说更加透明 ...

  6. css 命名规范 BEM

    在项目的开发过程当中, 我们往往因为日益复杂的css代码而感到力不从心. 如何合理的组织css代码成为了我们前端开发过程中必须考虑到的环节. 在读element源代码的时候, 了解到了BEM的命名风格 ...

  7. CSS 命名规范将省下调试时间

    我听说很多开发者厌恶 CSS.而在我的经验中,这往往是由于他们并没有花时间来学习 CSS. CSS 算不上是最优美的『语言』,但迄今二十多年来,它都是美化 web 举足轻重的工具.从这点来说,也还算不 ...

  8. 这些 CSS 命名规范将省下你大把调试时间

    我听说很多开发者厌恶 CSS.而在我的经验中,这往往是由于他们并没有花时间来学习 CSS. CSS 算不上是最优美的『语言』,但迄今二十多年来,它都是美化 web 举足轻重的工具.从这点来说,也还算不 ...

  9. 我认为最节省时间的CSS命名规范

    CSS命名规范一 js中对变量的命名最好使用camel case驼峰式命名法,但CSS中更适用于red-box命名规范. CSS命名规范二 BEM命名规范 B=>block E=>elem ...

随机推荐

  1. 下载devc++和codeblocks记录

    dev的安装包自己百度网盘里有 codeblocks官网  下载好后再解压即可,如果不是默认路径安装的话,还会出现检测不到编译器路径问题,解决办法在这.

  2. java transient关键字作用,使用场景

    transient的作用及使用方法,官方解释为: Variables may be marked transient to indicate that they are not part of the ...

  3. asp.net中通过form表单submit提交到后台的实例

    前台<body>中的代码: <body> <div id="top"> </div> <form id="login ...

  4. laravel 错误总结

    1.ReflectionException (-1) Class PhotosController does not exist 原因: 资源路由的问题 ,命名空间要区分大小写,admin首字母要大写 ...

  5. python第一模块基础语法

    一·python和各大高级语言的优缺点比较 1.c语言开发效率低 2.c++开发效率高于c语言,低于java,python. 3.java代码臃肿,设计复杂,库繁杂量多. 4.PHP应用领域单一,且运 ...

  6. CF747D Winter Is Coming

     题目链接: http://codeforces.com/problemset/problem/747/D 题目大意: 接下来的n天内每天都有一个气温,如果某天的温度为负数,则必须使用冬季轮胎:而温度 ...

  7. codeforces736D. Permutations(线性代数)

    题意 $m \leqslant 500000$,题目打错了 Sol 神仙题Orz 构造矩阵$B$,使得$B[b[i]][a[i]] = 1$ 那么他的行列式的奇偶性也就对应了生成排列数列数量的奇偶性( ...

  8. sql 使用汇总(PQSQL)

    --sql structured query language --DML--Data Manipulation Language--数据操作语言 query information (SELECT) ...

  9. uvm_scoreboard——得分

    scoreboard 是验证平台很重要的一部分,因为,验证就是给激励,然后,检查结果.而scoreboard 就是肩负这检查结果的重任.测试用例能不能过,全由scoreboard说了算. A scor ...

  10. IOS之TextView属性设置

    UIFontDescriptor *bodyFontDescriptor = [UIFontDescriptor preferredFontDescriptorWithTextStyle:UIFont ...