css BEM书写规范
[规范]css BEM书写规范
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 代码里能出现的样式组合只能是B B__E B--M B__E--M B__E--M--M,
基本概念
Block(块)
代码片段可能被复用且这段代码不依赖其他组件即可用Block。块可以互相嵌套,可以嵌套任意多层。
特点:
- 块的名称用于描述它的目的。如 menu、button(而不是它的状态,如:red、big)
- 块不能影响所在环境。这意味着不能为块设置margin或position
- 只能使用class命名选择器,而不能使用标签或id选择器
- 不依赖于页面内其他块或元素
Element(元素)
Element是Block的一部分,没有独立存在的意义。任何一个Element语义上是和Block绑定的。
特点:
- 与块使用'__'连接。 如: block__item
- 用于描述它的目的。如:item、text
- 元素可以彼此嵌套,可以嵌套任意多层
- 元素总是属于块的一部分。所以类似于block__item1__item2的命名是不合法的
Modifier(修饰符)
定义Block或Element的外观、状态、或行为的标记。
特点:
- 与块或元素连接符为'--'
- Modifier描述的是它的外观(如”什么尺寸“或”什么主题“等,如size_s或theme——islands),状态(”它与其他的哪里不同“,如disabled,focused等)以及它的行为(”它有怎么样的行为“或”它是怎么对用户响应“,如directions_left-top)
Modifiers分类
Modifiers可以看成是2种类型,key:true;key:value;即某个状态,或某个状态是什么值。
Boolean:
- 只有当Modifiers的存在与否很重要时使用,这里它的值默认是true。例如,disabled、active、clickable。
- 这种类型下样式的结构是:
- block-name--modifier-name
- block-name__element-name--modifier-name
例如:
<form class="search-form search-form--focused"><input class="search-form__input"><!-- The `button` element has the `disabled` Boolean modifier --><button class="search-form__button search-formbutton__button--disabled">Search</button>
</form>
复制代码
key-value:
- 当Modifiers的value才能描述完整一个状态时,需要使用key-value.例如: ”一个以islands为主题的菜单“,menu--theme--islands。
- 这种类型下样式的结构是:
- block-name_modifier-name--modifier-value
- block-name__element-name--modifier-name--modifier-value 例如:
<!-- The `search-form` block has the `theme` modifier with the value `islands` -->
<form class="search-form search-form--theme--islands"><input class="search-form__input"><!-- The `button` element has the `size` modifier with the value `m` --><button class="search-form__button search-form__button--size--m">Search</button>
</form>
</form>
复制代码
Mix
一种在一个DOM节点上使用不同BEM的方法。 Mixes能够做到:
- 组合不同实体的行为和样式,而不需要复制代码
- 基于现有的组件组合创造出新的组件 例如:
<!-- `header` block -->
<div class="header"><!--The `search-form` block is mixed with the `search-form` elementfrom the `header` block--><div class="search-form header__search-form"></div>
</div>
复制代码
通过在search-form Block本身是不能设置position或margin,放在header里后,可以作为header的元素,我们在header__search-form上可以设置它的位置信息。所以写组件的时候,可以为组件预留一个className props。
应用
相对另外的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 {}
复制代码
一些问题
- 最小化选择器的嵌套(建议不超过2级)。嵌套的场景可以出现在有modifier时,Block或Element需要修改样式
- BEM本身是可以写成B__E__E的格式,但如果出现这种嵌套很深的情况,说明组件化设计有问题,所以代码开发中,要求不能写这种格式代码
- 不要使用id选择器或tag选择器
- 不要在Block中设置position、margin等位置布局相关设置。把可能发生变化的css属性放到Modifiers上
- 从使用角度,小图标使用
icon-
做前缀,不需使用BEM - 命名空间问题。目前我们要求页面以
page-
作为Block,组件以组名名作为Block。css-guidelines中提出类似BEM命名的方式,以一些前缀作为标识。
注意: 1、BEM中的命名嵌套和DOM不是严格绑定的,命名上不要使用B__E__E,但是写DOM时和样式没有关系。B__E下的DOM里仍然可以有B__E样式的DOM.命名规范是用于识别顶层块组件之间的关系。 例如:
<div class="menu"><div class="menu__header"><h2 class="menu__title">Title text here</h2></div><div class="menu__body"><img class="menu__img" src="img.png" alt="description" /><p class="menu__text">text</p><p class="menu__text"><a href="test.html" class="menu__link">link</a></p></div>
</div>
复制代码
参考: en.bem.info
转载于:https://juejin.im/post/5c16096b6fb9a049e41299b4
css BEM书写规范相关推荐
- CSS这些书写规范你知道吗?
前言 对于项目,那就是我们的亲儿子啊,作为一个前端菜鸟,面向用户就是将自己的儿子介绍给别人认识,肯定要让他白白净净,漂漂亮亮的啦,给别人一眼就喜欢上的感觉咯,哈哈哈~ 常在河边走,哪有不湿鞋,在我们编 ...
- CSS 样式书写规范,css样式书写规范
在工作当中css样式是非常重要的,但是咋样书写css样式更重要. 一.css书写规范 1.定位属性:position display float left top right bottom ...
- CSS 样式书写规范
可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束. 我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要. 本 ...
- html css js书写规范
无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...
- html页面css代码写在哪里,HTML、CSS代码书写规范
HTML语义化语义化标签优先 基于功能.内容命名,尽量不使用表现命名 简略.明了.无后患1.所有命名都使用英文小写 推荐:` 不推荐: ` 2.命名用引号包裹 推荐:` 不推荐: ` 3.用中横线连接 ...
- 【前端开发】CSS BEM命名规范
目录 1.BEM 2.实战 Block Element Modifier 3.总结 1.BEM BEM其实是块(block).元素(element).修饰符(modifier)的缩写,利用不同的区块, ...
- css 空格数字 宽度,CSS代码书写规范究极指南
1.格式化代码 1.1文件[建议]:CSS文件使用无BOM的UTF-8编码 1.2缩进[强制]:使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符. CSS Code复制内容到 ...
- CSS书写规范和顺序
前言 对于项目,那就是我们的亲儿子啊,作为一个前端菜鸟,面向用户就是将自己的儿子介绍给别人认识,肯定要让他白白净净,漂漂亮亮的啦,给别人一眼就喜欢上的感觉咯,哈哈哈~ 常在河边走,哪有不湿鞋,在我们编 ...
- BEM 命名规范简介
1.什么是 BEM 命名 BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介. ...
最新文章
- React官方文档学习笔记(二)
- 如何实现CSS居中?–CSS居中常用方法
- 【Android】Camera 使用浅析
- .NET中使用Memcached的相关资源整理 转载之DUDU 程序员打杂的站长
- 有温度的技术,改善上亿人的生活
- [渝粤教育] 中国地质大学 高层建筑施工 复习题
- vue请求封装,Store-状态管理部分(文档笔记)
- 怎样在photoshop中快速批量,修改图片
- python对象保存在哪_Python – 在本地保存请求或BeautifulSoup对象
- linux----文件权限管理
- 在乌班图系统上安装yum
- android6.0原生brower_Android原生下载组件DownloadManager
- 清华OS前置知识:80386处理器
- OpenAI公开Dota 2论文:胜率99.4%,「手术」工具连续迁移训练
- torchvision学习笔记之transforms
- Python爬取豆瓣电影top250(附全部源码)
- 只有你想不到的 看看这些另类的可穿戴设备
- Leetcode 2261. K Divisible Elements Subarrays
- 在2.5亿个整数中找出不重复的整数,注,内存不足以容纳这2.5亿个整数
- matlab rloess,比较ggplot loess拟合和loess拟合函数
热门文章
- php option如何循环每一个值,Js 在option ={ data:[]}中怎么使用循环;
- javascript 之 push
- python sys.path.append(),sys.path.insert()用法
- LeetCode 75. Sort Colors--Python解法
- 计算项目中的代码行数:Count the Lines of Code (LOC)
- 图片去噪:python,线性回归
- 联想一体计算机排行,2019最具性价比一体机推荐 电脑一体机十大最新排名
- matlab实现周期阶跃函数,连续时间信号傅利叶变换与MATLAB实现.doc
- yabailv 运放_运放的压摆率
- ssm配置socket_ssm框架中集成websocket实现服务端主动向客户端发送消息