CSS – BEM (Block__Element--Modifier)
前言
BEM 是一种 CSS class 命名规范. 目的是防止大家名字取太短, 不小撞名字后果很麻烦.
参考:
Youtube – You Probably Need BEM CSS in Your Life (Tutorial)
Battling BEM CSS: 10 Common Problems And How To Avoid Them
结构
<section class="service-section"> <h1 class="service-section__title">Service 1</h1> <p class="service-section__description"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae, omnis. </p> <button class="service-section__action service-section__action--focused"> click </button> </section>
Block
block 就是一个 namespace 概念, 算是全局命名了, 要确保与页面里其它 block 不能撞,
Element
element 就是元素的语义命名, 比如 title, description, call to action 对比 h1, p, button
有些人不喜欢拿 semantic HTML 来做 selector 所以就有了更语义化的 element.
要确保在整个 block 里面, element 名字不能撞哦.
Modifier
modifier 通常用来表达状态 state, 比如 focused, hovered, 变种 element 的意思.
Sass 结构
.service-section { &__title { color: red; } &__description { font-size: 1.5rem; } &__action { text-transform: uppercase; letter-spacing: 1px; padding: 0.5rem 1rem; &--focused { background-color: rgba($color: blue, $alpha: 0.3); } } }
利用嵌套和 & 语法, 虽然 class name 很长, 但 Sass 并没有重复的代码, 看上去还可以.
出来的效果
.service-section__title { color: red; } .service-section__description { font-size: 1.5rem; } .service-section__action { text-transform: uppercase; letter-spacing: 1px; padding: 0.5rem 1rem; } .service-section__action--focused { background-color: rgba(0, 0, 255, 0.3); }
注意, 它并不是 child selector, .service-section .service-section__title 哦, 而是 flat 的.
我个人是觉得是 ok 的, 毕竟都命名规范了嘛, flat 也不会撞. 但如果想让它变成 .service-section .service-section__title 也是很容易的
#{&}__title { color: red; }
加上 Sass 特定语法 #{} 就可以了. 效果:
.service-section .service-section__title { color: red; }
常见问题 FAQ:
问: 如果有很多层, 是不是要写成 block__element1_element2_modifier 还是 block1_block2_element_modifier?
答: no, BEM 的结构永远都是 block-name__element-name--modifier, block name, element name 可以用 kebab-case 写长长, 防止撞名字.
问: 不喜欢 class 名字长长, HTML 很丑, 用嵌套 + child selector 的方式可以吗?
答: 是可以的, 关键就是哪个 namespace 的概念要有, 所以 selector 都要有一个 root > child. root 就是 unique 的. 这样就可以保证不会撞了.
我不喜欢 html 写长长的 class. 所以我都是用 child selector 的 (但这样其实风水并没有比较好, 要 100% 顺风水的话还是用 BEM 吧)
替代方案
BEM 的目的是防止 class name 撞名字. 它的解决方式是通过 namespace
我们需要自己管理好 namespace, block 一定要是 unique. 而 block 里面的 element 命名是 block__element 所以防止了和 block 撞名.
有几个方式可以替代这个方案.
1. 用 Tailwind CSS, 因为它的 class 是功能的名字而不是 element 的名字, 自然就不会撞名字了
2. 用 Isolation 方案, 比如 Asp.net Core – CSS Isolation, Angular Component styles
它们的做法就是 compile CSS 和 HTML, 然后加上一些名字. 做法和 BEM 差不多, 只不过是自动的, 不需要人维护.
相关文章
- 网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正 wpf Listbox 实现按住ctrl键来取消选中 详解C#的协变和逆变 C#效率优化(1)-- 使用泛型时避免装箱
- 用CSS画*猪佩奇,你就是下一个社会人! js将“I am a coder”反转成 “coder a am I”,不许用split,join,subString,reverse;求解方法三
- Web优化 --利用css sprites降低图片请求
- CSS奇思妙想 -- 使用 CSS 创造艺术
- 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
- 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
- 谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型
- 【css】css中实现首行缩进效果(已解决)
- 【前端学习之HTML&CSS进阶篇】-- CSS第二篇 -- 块级格式化上下文与堆叠上下文
- 【前端学习之HTML&CSS】-- CSS第九篇 -- 多种多样的选择器
- 【前端学习之HTML&CSS】-- 视觉格式化模型之二 浮动 -- 练习
- 【前端学习之HTML&CSS】-- CSS第七篇 -- 视觉格式化模型之二 浮动
- 【前端学习之HTML&CSS】-- HTML第七篇 -- 图片元素与多媒体元素
- css动画库
- 《Web前端开发精品课 HTML与CSS进阶教程》——1.2 HTML、XHTML和HTML5
- 《Web前端开发精品课 HTML与CSS进阶教程》——2.3 图片语义化
- 618快到了送上自制前端小项目(html css js)
- CSS中的url()到底要不要加引号
- CSS魔法堂:说说Float那个被埋没的志向