BEM是基于组件的web开发方法。其思想是将用户界面分隔为独立的块,从而使开发复杂的UI界面变得更简单和快,且不需要粘贴复制便可复用现有代码。BEM由Block、Element、Modifier组成。选择器里用以下连接符扩展他们的关系:
示例:
block-name_modifier-name block-name__element-name--modifier-name block-name_modifier-name--modifier-value block-name__element-name--modifier-name--modifier-value
基本概念
Block(块)
代码片段可能被复用且这段代码不依赖其他组件即可用Block。块可以互相嵌套,可以嵌套任意多层。
特点:
Element(元素)
Element是Block的一部分,没有独立存在的意义。任何一个Element语义上是和Block绑定的。
特点:
Modifier(修饰符)
Modifier是Block或Element上的标记。使用它们来改变样式,行为或状态。与块或元素连接符为'--'。
应用
相对另外的Blocks定位Block
最好的方式是混合使用block和element。解决block上不能设置margin、position。
例:
<body class="page"> <!-- header and navigation--> <header class="header page__header">...</header> <!-- footer --> <footer class="footer page__footer">...</footer> </body> .page__header { padding: 20px; } .page__footer { padding: 50px; }
Block内定位Elements
通过额外创建Block的子Element来定位嵌套。
例:
<body class="page"> <div class="page__inner"> <!-- header and navigation--> <header class="header">...</header> <!-- footer --> <footer class="footer">...</footer> </div> </body> .page__inner { margin-right: auto; margin-left: auto; width: 960px; }
关于命名
选择器的命名必须完整且精确地描述它代表的BEM实体。
例:
.button {} .button__icon {} .button__text {} .button_theme_islands {}
我们可直接指导我们在处理一个块元素。在html使用如:
<button class="button button_theme_islands"> <span class="button__icon"></span> <span class="button__text">...</span> </button>
而下面的css就很难让我们做出相同的判断:
.button {} .icon {} .text {} .theme_islands {}
在我的git项目miniui中采用了BEM规范,使用sass实现了BEM。有兴趣可以查看:https://github.com/banyaner/miniui
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
先点赞再看,养成好习惯 前言 这两天在另一个社区看到了一个关于 Tomcat 的提问...
简介: 企业上云多账号架构中,如何做到从上到下管理的同时,处理好员工的权限边...
data URI scheme 允许我们使用内联(inline-code)的方式在网页中包含数据,可以...
解决方法如下: 第一种 使用iframe,但是目前使用iframe的人已经越来越少了,而...
John Au-Yeung 来源:medium 译者:前端小智 有梦想,有干货,微信搜索 【大迁世...
1.HTML5的内容类型 内容类型 描述 内嵌 向文档中添加其他类型的内容,例如audio...
Redis 官方在 2020 年 5 月正式推出 6.0 版本,提供很多振奋人心的新特性,所以...
content属性一般用于::before、::after伪元素中,用于呈现伪元素的内容。平时con...
复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
注释1:上图整个大背景是这个网页的全部尺寸,中间的小框才是浏览器中的可见尺寸...