一篇关于BEM命名规范
一直以来自己对命名都是比较混乱的,并没有一个比较好的格式来命名,最近自己碰巧学习到了BEM命名规范,我想谈谈自己的理解以供自己来学习,同时也可以和各位大佬一起学习。
BEM是一个很有用的方法可以创建复用组件和前端代码
有三个特性.
- 易用性,使用BEM只需要使用BEM的命名规范就可以。
- 单元性,使用独立的块和CSS选择器,可以使你的代码可重用和单元化。
- 灵活性,使用BEM后,方法和工具可以按照自己喜欢的方式去组织和配置。
BEM的简介
BEM是一个强大而简单的命名规范,使得代码更容易让人理解,容易和他人协作,容易扩展,更加强壮和明确,最重要的是严谨性。
BEM的命名规范可以让参与网站开发的人都使用同一个代码库使用用一种方法。
BEM分别是块(Block),元素(Element),修饰符(Modifier)
块(Block)
是一个独立的页面组件跟其他的块区分开来,相当于网页中的组件Block封装了行为,模板,样式和其他技术。独立的Block可以复用,促进项目的开发。模块与模块之间可以嵌套,可以有任意级别的嵌
<div class="header">
<div class="logo"></div>
<div class="search"></div>
</div>
- 可以任意移动
>>
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>
<!--当模块weui-tabbar有一个focused的boolean类型的修饰符时-->
<div class="weui-tabbar weui-tabbar--focused">
当元素weui-tabbar__item有一个on类型的修饰符时
<div class="weui-tabbar__item weui-tabbar__item--on">
</div>
</div>
- key-value类型的修饰符
<font color=green>block-name--modifier-name--modifier-value</font>
<font color=green>block-name__element-name--modifier-name--modifier-value</font>
<!--当模块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>
>-一个修饰符不能单独的使用
>>一个修饰符不能脱离模块或元素单独的使用,一个修饰符应该改变一个实体的外观,行为或者状态,而不是替换它。
<!--正确的方法-->
<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命名规范的更多相关文章
- CSS BEM 命名规范简介
[前言] BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介(推荐)的相关资料 ...
- CSS — BEM 命名规范
推荐阅读: https://juejin.im/post/5b925e616fb9a05cdd2ce70d 1 什么是 BEM 命名规范 Bem 是块(block).元素(element).修饰符(m ...
- 使用BEM命名规范来组织CSS代码
BEM 是 Block(块) Element(元素) Modifier(修饰器)的简称 使用BEM规范来命名CSS,组织HTML中选择器的结构,利于CSS代码的维护,使得代码结构更清晰(弊端主要是名字 ...
- css命名规范: BEM 的命名法
整理自:前端早读课[第1183期]这些 CSS 命名规范,将省下你大把调试时间 试图解决 3 类问题: 仅从名字就能知道一个 CSS 选择器具体做什么 从名字能大致清楚一个选择器可以在哪里使用 从 C ...
- 前端css命名规范----BEM
一.什么是BEM BEM就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种前端命名方法论.这种巧妙的命名方法可以使css类对其他开发者来说更加透明 ...
- css 命名规范 BEM
在项目的开发过程当中, 我们往往因为日益复杂的css代码而感到力不从心. 如何合理的组织css代码成为了我们前端开发过程中必须考虑到的环节. 在读element源代码的时候, 了解到了BEM的命名风格 ...
- CSS 命名规范将省下调试时间
我听说很多开发者厌恶 CSS.而在我的经验中,这往往是由于他们并没有花时间来学习 CSS. CSS 算不上是最优美的『语言』,但迄今二十多年来,它都是美化 web 举足轻重的工具.从这点来说,也还算不 ...
- 这些 CSS 命名规范将省下你大把调试时间
我听说很多开发者厌恶 CSS.而在我的经验中,这往往是由于他们并没有花时间来学习 CSS. CSS 算不上是最优美的『语言』,但迄今二十多年来,它都是美化 web 举足轻重的工具.从这点来说,也还算不 ...
- 我认为最节省时间的CSS命名规范
CSS命名规范一 js中对变量的命名最好使用camel case驼峰式命名法,但CSS中更适用于red-box命名规范. CSS命名规范二 BEM命名规范 B=>block E=>elem ...
随机推荐
- struts2与struts1的比较
struts2相对于struts1来说简单了很多,并且功能强大了很多,我们可以从几个方面来看: 从体系结构来看:struts2大量使用拦截器来出来请求,从而允许与业务逻辑控制器 与 servlet-a ...
- UILabel和UIbutton(富文本)封装方法
/** 方法说明:设置label的富文本属性 参数说明:contentStr富文本内容 textColor字体颜色 rangeSet设置字体颜色及大小的位置 */ - (UILabel *)backf ...
- CF ECR59div2 D
题目本质:如果答案是i,那么从行和列两维都会满足:以i的倍数分块,矩阵值相同. 一种解决方法: 1.首先题目里说了要在n的约数里找orzorz…… 2.块中需要一整排都相同.用“与前一排相同否?”来判 ...
- Zip-line Codeforces - 650D || 风筝
https://codeforces.com/contest/650/problem/D 原题? http://210.33.19.103/contest/1024/problem/2 4s 520M ...
- C#项目中的bin目录和obj目录的区别
C#项目中的bin目录和obj目录的区别 1.关于bin目录和obj目录 Bin目录用来保存项目生成后程序集,它有Debug和Release两个版本,分别对应的文件夹为bin/Debug和bin/Re ...
- override和overload的小笔记
override是覆盖的意思,也就是我们的重写.可以重写覆盖父类的方法,然后实现接口的方法也可以叫做override. 几个要注意的点: 重写一定要用和被重写方法同样的方法名还有参数列表. 抛出的异常 ...
- dubbo-spring
一.需求 某个电商系统,订单服务需要调用用户服务获取某个用户的所有地址:创建两个服务模块进行测试 测试预期结果:订单服务web模块在A服务器,用户服务模块在B服务器,A可以远程调用B的功能. 二.工程 ...
- mysql查询某个数据库某个表的字段
1.查看字段详细信息 -- 查看详细信息 SELECT COLUMN_NAME "字段名称", COLUMN_TYPE "字段类型长度", IF(EXTRA=& ...
- slf4j介绍以及与Log4j、Log4j2、LogBack整合方法
翻了一下百度和官网.这么介绍slf4j. slf4j 全称 Simple Logging Facade for Java,是日志框架的一种抽象,那么也就是说 slf4j 是不能单独使用的必须要有其他实 ...
- bootstrap 滚动监听 标签页 和 工具提示
标签 <div class="container"> <h4>Tabs</h4> <ul id="myTab ...