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

在读element源代码的时候, 了解到了BEM的命名风格.

使用 BEM 命名规范,理论上讲,每行 css 代码都只有一个选择器。
BEM代表 “块(block),元素(element),修饰符(modifier)”,我们常用这三个实体开发组件。
在选择器中,由以下三种符号来表示扩展的关系:

-   中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。
-- 双中划线线:用来描述一个块或者块的子元素的一种状态
__ 双下划线:双下划线用来连接块和块的子元素 type-block__element--modifier

块(block)

一个块是设计或布局的一部分,它有具体且唯一地意义 ,要么是语义上的要么是视觉上的。

在大多数情况下,任何独立的页面元素(或复杂或简单)都可以被视作一个块。它的HTML容器会有一个唯一的CSS类名,也就是这个块的名字。

针对块的CSS类名会加一些前缀( ui-),这些前缀在CSS中有类似 命名空间 的作用。

一个块的正式(实际上是半正式的)定义有下面三个基本原则:

CSS中只能使用类名(不能是ID)。
每一个块名应该有一个命名空间(前缀)
每一条CSS规则必须属于一个块。

元素(element)

块中的子元素是块的子元素,并且子元素的子元素在 bem 里也被认为是块的直接子元素。一个块中元素的类名必须用父级块的名称作为前缀。

修饰符(modifier)

一个“修饰符”可以理解为一个块的特定状态,标识着它持有一个特定的属性。

用一个例子来解释最好不过了。一个表示按钮的块默认有三个大小:小,中,大。为了避免创建三个不同的块,最好是在块上加修饰符。这个修饰符应该有个名字(比如:size )和值( small,normal 或者 big )。

element 的源码当中充分实现了这种命名方式, 在使用scss的情况下

/* BEM
-------------------------- */
@mixin b($block) {
$B: $namespace+'-'+$block !global; .#{$B} {
@content;
}
} @mixin e($element) {
$E: $element !global;
$selector: &;
$currentSelector: "";
@each $unit in $element {
$currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
} @if hitAllSpecialNestRule($selector) {
@at-root {
#{$selector} {
#{$currentSelector} {
@content;
}
}
}
} @else {
@at-root {
#{$currentSelector} {
@content;
}
}
}
} @mixin m($modifier) {
$selector: &;
$currentSelector: "";
@each $unit in $modifier {
$currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
} @at-root {
#{$currentSelector} {
@content;
}
}
}

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

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

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

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

    人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符( ...

  3. CSS命名规范 BEM

    良好的代码结构,HTML和css元素之间的关系,对于项目交付是很重要的! BEM解释: (1).block 是BEM的区块(B),包含内容和风格.如bootstrap框架的.container. (2 ...

  4. CSS 命名规范 BEM 思想

    Part.1 何为 BEM? BEM :Block ( 块 ) 丶Element ( 元素 ) 丶Modifier ( 修饰符 ) 出 处:是由 Yandex 团队提出的一种前端命名方法论 优 点:命 ...

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

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

  6. CSS 命名规范总结

    CSS 命名规范总结 BEM 命名给 CSS 以及 html 提供清晰结构,命名空间提供更多信息,模块化提高代码的重用,以达到 CSS 命名语义化.可重用性高.后期维护容易.加载渲染快的要求. 首先, ...

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

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

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

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

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

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

随机推荐

  1. elasticsearch 常用查询 + 删除索引 + 集群状态诊断

    1.多条件查询 curl -X POST \ http://10.0.0.42:9200/addressbook_user/_search \ -H 'cache-control: no-cache' ...

  2. Shortest Distance from All Buildings

    You want to build a house on an empty land which reaches all buildings in the shortest amount of dis ...

  3. # Clion中编译多个cpp(实现单文件编译)

    Clion中编译多个cpp(实现单文件编译) 在不做任何配置情况下,Clion工程下只能有一个main()函数,新建多个cpp会导致报main()函数重复定义的错误,所以默认情况下无法在一个工程下编译 ...

  4. 虚拟机(Vmware)安装ubuntu18.04和配置调整(一)

    一.虚拟机(Vmware)安装ubuntu18.04 1.下载ubuntu18.04桌面版镜像文件< ubuntu-18.04.3-desktop-amd64.iso> 2.使用VMwar ...

  5. 嵌套泛型参数IList<IList<Object>>如何传参

    在调用第三方库的时候,有这么一个泛型参数,如下图: 按照经验,使用两个List嵌套声明变量即可: IList<IList<AnnotatedPoint2D>>  outImag ...

  6. T100-----汇出EXCEL表格

    例子:cxmp541 #excel匯出功能 ON ACTION exporttoexcel LET g_action_choice="exporttoexcel" IF cl_au ...

  7. ASP.NET使用AJAX应注意IIS有没有.ashx扩展

    项目添加引用AJAX.DLL了:今天将本地做好的一个web程序放到服务器上,居然报告错误了.web程序使用了ajax来往返数据. 检查生成的html语句,有这么两句代码<script type= ...

  8. ES6新特性总结

    一.let const var有缺陷:有块级作用域.能重复定义.无法限制修改.所以出来了let和const. 有块级作用域,不能重复定义 const不能修改,必须定义的时候赋值 二.解构赋值 1.左右 ...

  9. Advanced Installer 不弹出预安装的软件的窗口

    需求:当他电脑上没有sql server client 的时候,或没有localdb的时候,那么安装包会弹出窗口,让他选择 一个组件 一个组件的安装 太麻烦. 有没有办法,打开安装包就安装 安装的过程 ...

  10. VS2019 快捷键

    工欲善其事,必先利其器,整理了下VS最常用的快捷键,查看了不少资料,汇总了下,没有的自己补充,可以打印,用Excel编辑的. 可编辑版本下载:Excel文件下载 你可能需要查询其他的快捷键,MSDN介 ...