随着CSS的发展,使用CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理。著作权归作者所有。

BEM本质应该是一个css命名方案,最流行的命名规则之一就是BEM,(block:块,Element:元素,Modifier:修饰符),通过给每个元素添加它的父级block模块作为前缀,使得目标的安全性变得更加简单了;BEM还有助于消除页面和body类对嵌套或者附加样式依赖;BEM是一个非常有用,强大和简单的命名规范,使您的前端代码更容易阅读和理解,更容易使用,更容易扩展,更强大和更明确,更严格。

BEM特点:

  1. 复杂甚至稍显冗长的类名极大减少了类名重复的可能性
  2. 每个块里的一类元素的样式对应一个类名。如此,一类元素对应一个类名,减少了子选择器或后代选择器的使用,提升了css的性能。
  3. css类名的命名更加语义化,更容易读懂
  4. 可复用性高,例如我们可以把主题类名form--theme-xmas替换,即可对应替换为别的主题样式
.block {}
.block__element {}
.block--modifier {}

上面的例子展示了BEM项目的类结构,下划线(__)被用来区分元素,而用连字符(--)是用来修饰元素的。

BEM规范详解

1.Element

一个模块独立的实体。

命名规范:

字母+数字或者下划线组成,例:.block

2.Element

一个元素是块的一部分,具有某种功能。元素是依赖上下文的:它们只有处于他们应该属于的块的上下文中时才是有意义的。

命名规范:

元素名称可以包含拉丁字母,数字,破折号和下划线。 CSS类名写成块名称加上两个下划线加上元素名称:.block__elem

3.Modifier

修饰符是块或元素上的标志。这些标志用来形容元素或块的外观、行为或状态。例如button、a标签上的active状态。

命名规范:

修饰符名称可以包含拉丁字母,数字,破折号和下划线。 CSS类名写成块或元素的名称加上两个破折号:.block--mod或.block__elem--mod和.block--color-black。

例如:

html

<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input class="form__submit form__submit--disabled" type="submit"/>
</form>

css

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

正确的使用BEM命名规范:

使用less可以简化代码,提高开发效率:

.list {
width: 12rem;
height: 6rem; &__button{
font-size: 16px;
}
&__input{
background: blue;
&--disabled{
background: gray;
}
}
}

会编译成如下:

.list{
width: 12rem;
height: 6rem;
}
.list__botton {
font-size: 16px;
}
.list__input {
background: blue;
}
.list__input--disabled {
background: gray;
}

还在为css命名犯愁吗?还在为css命名会发生冲突吗?使用BEM规范会让你的代码简介明了,清晰可见,更加容易阅读理解,更好的维护代码,提高开发效率,小伙伴们快行动起来吧!!

css 命名规则 BEM!的更多相关文章

  1. 常用的css命名规则:

    关于团队合作的css命名规范 常用的css命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制 ...

  2. 【转】常用css命名规则

    常用的css命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左 ...

  3. CSS 命名规则

    CSS书写顺序: 位置属性(position, top, right, z-index,display, float等) 大小(width, height, padding, margin) 文字系列 ...

  4. 一些CSS命名规则

    一些CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中 ...

  5. CSS命名规则常用的css命名规则

    CSS命名规则常用的css命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wr ...

  6. [转] 常用的CSS命名规则

    (一)常用的CSS命名规则  头:header  内容:content/container  尾:footer  导航:nav  侧栏:sidebar  栏目:column  页面外围控制整体布局宽度 ...

  7. CSS命名规范(规则)常用的CSS命名规则

    CSS命名规范(规则)常用的CSS命名规则   CSS命名规范(规则)常用的CSS命名规则   头:header   内容:content/container   尾:footer ...

  8. CSS命名规则和如何命名

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  9. BEM(一种 CSS 命名规则)

    一. 什么是 BEM BEM的意思就是块(block).元素(element).修饰符(modifier),是由 Yandex 团队提出的一种前端命名方法论. 这种巧妙的命名方法让你的 CSS 类对其 ...

随机推荐

  1. js获取url并截取相应的字段,js解决url获取中文字段乱码问题

    相信url截取信息是一个很常用的小功能页面跳转传参的时候可以在A页面的url挂一些参数到B页面获取正常的页面传参都是以数字和英文为主正常情况下中文获取的时候是有乱码的所谓上有政策下有对策一个正常的ur ...

  2. Ethical Hacking - Web Penetration Testing(9)

    SQL INJECTION Discovering SQLi in GET Inject by browser URL. Selecting Data From Database Change the ...

  3. Ethical Hacking - NETWORK PENETRATION TESTING(23)

    Detecting ARP Posionning Attacks ARP main security issues: 1. Each ARP requests/response is trusted. ...

  4. QQ音乐Android客户端Web页面通用性能优化实践

    QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级,然而页面的打开耗时与 Native 页面相距甚远,需要系统性优化.本文将介绍 QQ 音乐 Android 客户端在进行 Web ...

  5. layui 数据表格自带的导出Excel,身份证等E+/000问题解决

    layui数据表格的工具栏自带导出Excel 会将身份证等 长整数的 自动变成E+并且 后面有000.从而导致数据不能完整导出. 解决方案: 1.先下载Excel的插件包.将压缩包内的两个js放到 l ...

  6. [redis] -- 过期策略篇

    过期处理 定期删除 redis默认是每隔 100ms 就随机抽取一些设置了过期时间的key,检查其是否过期,如果过期就删除 惰性删除 定期删除可能会导致很多过期 key 到了时间并没有被删除掉.所以就 ...

  7. php三元运算符?:和??

    1.(expr1) ? (expr2) : (expr3) 在 expr1 求值为 TRUE 时的值为 expr2,在 expr1 求值为 FALSE 时的值为 expr3. $a = (expr1) ...

  8. HTTP Keep-Alive的作用

    作用: Keep-Alive:使客户端到服务器端的连接持续有效,当出现对服务器的后继请求时,Keep-Alive功能避免了建立或者重新建立连接.Web服务器,基本上都支持HTTP Keep-Alive ...

  9. Zookeeper集群部署及报错分析

    安装 下载压缩包 解压 修改zoo.cfg文件 创建myid文件 启动 自启动配置 有时间再补hhh 报错处理 很荣幸的遇到了大部分报错,日志再zookeeper目录的bin下的zookeeper.o ...

  10. 【JMicro】微服务开发及使用

    JMicro是一个用Java语言实现的开源微服务全家桶, 源码地址:https://github.com/mynewworldyyl/jmicro, Demo地址:http://124.70.152. ...