css规则中区块block,CSS的命名方式:BEM(区块、元素、修饰符)
原标题:CSS的命名方式:BEM(区块、元素、修饰符)
本资源由 伯乐在线- 凝枫整理,您也想贡献一份力量?欢迎加入我们 »
重要概念
“Block”区块
区块的定义是:一个逻辑和功能兼备的独立页面组件,也可以称为web组件。一个区块包含有行为(JS)、模板、样式(CSS)以及其他实现方法。由于区块有独立性,所以允许被重用,也可以适当促进项目开发的进程。
区块属性
嵌套结构
区块之间可被嵌套使用,例如:head区块可以包含一个logo (logo) 、一个搜索表单 (search) 、以及一个认证模块 (auth) 。
随意处置
区块可以被放在页面的任何位置,也可以在页面或者项目之间相互移动。区块的实现靠的是独立的实体,所以允许开发着放在改变其位置,保证整体的功能和外观的效果。也就是说,不需要修改CSS或者任何JS代码,就可以让logo和认证表单两块交换位置。
重用
允许多个相同的区块实例同时存在于一个界面里。
“Element”元素
元素的定义是: 区块中无法被用在其他组件上的部分,例如:某个菜单子项是无法用于菜单区块以外的地方的,所以它属于元素。
区块还是元素,我到底该选哪个?
BEM方法不建议元素之间嵌套
“Modifier”修饰符
区块或者元素的外观样式和行为,称为BEM实体。
是否使用修饰符,你可以自由选择。修饰符本质上和HTML的属性类似,相同的区块因为其使用的修饰符不同而不尽相同。例如:菜单区块的外观可能会因为其所依赖的修饰符变化而发生改变。
BEM实体
区块、元素、以及修饰符统称为BEM实体,这个概念既可以用于一个单独的BEM实体,也可以作为区块、元素和修饰符的整体概念。
混合体
即不同的BEM实体实例寄主于一个DOM节点上。
它能帮我们
在不复制代码的情况下,组合多个BEM实体的行为和样式在已存在的BEM实体的基础上,创建有语义的新的界面组件
让我们来看看这样的情况:假设代码里的链接都是通过一个 link区块实现的,现在,我们需要把菜单项都转为链接,有几种方法可以实现:
新建一个修饰符,通过它把菜单项一个个转换为链接。不过这样实现起来,就不可避免地需要复制这个 link区块的行为和样式,代码就会重复;利用一个混合体,把一个一般 link区块和一个 menu区块里的 link元素结合起来,在不复制代码之余,组合了两者的混合体又能保留它们各自的基础功能( link的链接以及 menu的CSS规则)。
BEM树
BEM树是一种由区块、元素和修饰符组成的网页结构,相对于DOM树(能表示BEM实体及其状态、排序、嵌套、附加代码等)来说,BEM树更像一种抽象概念。在实际项目中,BEM树可能以任何形式出现在树状结构里。让我们看看这个DOM树的例子:
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
en
ru
对应的BEM树则是:
1
2
3
4
5
6
7
8
9
10
header
├──logo
└──search-form
├──input
└──button
└──lang-switcher
└──lang-switcher__item
└──lang-switcher__link
└──lang-switcher__item
└──lang-switcher__link
对于同一个BEM树,XML 和BEMJSON的表达方式略有不同:
XML
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
BEMJSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
block:'header',
content:[
{block:'logo'},
{
block:'search-form',
content:[
{block:'input'},
{block:'button'}
]
},
{
block:'lang-switcher',
content:[
{
elem:'item',
content:[
{elem:'link'}
]
},
{
elem:'item',
content:[
{elem:'link'}
]
}
]
}
]
}
区块实现
不同的技术方法都可以决定一个BEM实体:
行为外观测试模板文本依赖性描述附加数据(如图像)
实现技术
即用于实现区块的技术方法。
区块可以通过一种或多种方式实现,例如:
行为 — Java、Coffee外观 — CSS、Stylus、Sass模板 — BEMHTML、BH、Pug、Handlebars、XSL文本 — Markdown、Wiki、XML
比如,一个区块的外观由CSS控制,也就可以说这个区块是用CSS技术实现的。同理,这个区块的文档由Markdown编写,就可以说这个区块也是用Markdown技术实现的。
区块重定义
即通过在不同级别上添加新的功能来修改区块实现方式。
重定义等级
即一系列BEM实体及其部分实现方式。
区块的最终实现方式可分为不同的重定义等级,每个新的等级扩展或覆盖的原有的实现方式,最终结果就是——该区块由各自独立的实现技术集合而成,并且其重定义等级都以预先指定的顺序排列。
BEM实体的任一实现方式都可以被重定义。例如,有个第三方的库在一个单独的级别上链接到项目中,这个库包含了一些现成的区块实现,而项目特有的区块则被放置在另一个重定义等级里。假如现在我们需要修改库中某个区块的样式,那么,不必修改库代码或者副本中的CSS,只需要在项目级别编写新的CSS规则即可。在编译过程中,最终的实现将会结合库原本的代码以及项目中的新代码两者的效果。
如果你在文中发现了任何错误,或者有需要帮助的地方,不要犹豫,请在GitHub上联系我们,或者在prose.io.发表勘误文章也是可以的。
官方网站:https://en.bem.info/返回搜狐,查看更多
责任编辑:
css规则中区块block,CSS的命名方式:BEM(区块、元素、修饰符)相关推荐
- cordova 不安全 css,[译] CSS Flexbox 中安全/不安全的对齐方式
CSS Flexbox 中安全/不安全的对齐方式 我最近看了 Rachel Andrews 的演讲锦上添花:重新定义 CSS 的技术潜力.Rachel 的演讲总是能清晰而简洁地传达出满满的干货.这次演 ...
- bem css_CSS体系结构:块元素修饰符(BEM)和原子CSS
bem css The following is a short extract from Tiffany's new book, CSS Master, 2nd Edition. 以下是Tiffan ...
- css规则中区块block,css常用属性总结:背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
- css规则中区块block,CSS 定位详解
CSS 有两个最重要的基本属性,前端开发必须掌握:display 和 position position 属性的作用 position属性用来指定一个元素在网页上的位置,一共有5种定位方式,即posi ...
- css规则定义的分类,.css规则定义
文本样式的定义 定义文本样式.保存CSS规则后系统将行动打开"CSS规则定义"对话框. [字体]:选择所需要的字体. [大小]:定义字体大小. [样式]:可选择字体的特殊样式,即& ...
- css规则定义的分类,CSS规则定义英汉对照表
<CSS规则定义英汉对照表>由会员分享,可在线阅读,更多相关<CSS规则定义英汉对照表(4页珍藏版)>请在人人文库网上搜索. 1.CSS规则定义英汉对照表一.类型font-fa ...
- 网页css样式中英对照,css中文样式(含中英文对照表).doc
css中文样式(含中英文对照表) CSS学习网站: /css/css_reference.asp / /thread-265-1-1.html 1.[类型]主要针对网页中的文本 [背景]是在网页的元素 ...
- 在html中div水平垂直css,html中div使用CSS实现水平/垂直居中的多种方式
CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. git 查看源码 配合在线预览,效果更佳 以下例子中,涉及到的CSS属性值. .parent-frame ...
- 基本数据类型在传参中的自顶向下和自底向上;this;访问权限修饰符
数据类型传参变化 在重载方法中,如果传入的参数的数据类型的字节大小小于方法中声明的形式参数类型的字节大小,那么实际数据类型就会提升,char型略有不同,如果无法找到接受char参数的方法,就会直接升到 ...
最新文章
- Selenium支持高版本的FireFox
- boost::type_erasure模块convert相关的测试程序
- 链表快速排序python_Python一行代码实现快速排序的方法
- 《企业软件交付:敏捷与高效管理精要》——3.4 企业软件交付的软件工厂方法...
- Hive(四)——数据操作
- 知网搜索论文:如何在知网上查找期刊论文
- 《HTTP权威指南》读书笔记
- c语言令牌桶原理,令牌桶算法及实现(二)
- wps页眉怎么设置不同页码_WPS中怎么给单独一页设置页眉?
- 专升本英语——应试题型突破——翻译——固定搭配【学习笔记】
- 【面试题】 做了一份前端面试复习计划,保熟~
- Linux系统下安装redis
- 格物斯坦:机器人高手决战申城,IRM开启孩子新视界
- 洛杉矶湖人队的科比 - 布莱恩特,一个最大的
- 手机 CPU 架构类型了解
- 解决Ubuntu22.04wps打不开的问题
- vue实现表格列位置的拖拽
- JavaWeb基础核心技术-佟刚-专题视频课程
- Device overview
- 拍案叫绝的算法(二)
热门文章
- Vue.js说说组件
- 单元测试01:nunit 安装与代码测试
- c语言时钟报告,C语言图形时钟课程设计实验报告
- 【遥感物候】1983-2012年时间序列中国地区GIMMS 3g NDVI下载(已进行旋转、格式转换、投影变换和裁剪)
- C语言试题三十八之将s所指字符串中除了下标为偶数、同时ascii值也为偶数的字符外,其余的全都删除;串中剩余字符所形成的一个新串放在t所指的一个数组中。
- C语言试题二十之利用以下的简单迭代方法求方程cos(x)-x=0的一个实根。
- linux之mutex(互斥锁)
- char *a 与char a[] 的区别和char** argv与char *argv[]区别
- Android之6.0上的重要变化(二)
- Andorid之为何要用到NDK?