BEM + Emmet = 根本停不下来

很久很久之前。
不知是什么时候,也忘记是什么网站,只记得当时打开后习惯性的右键点击查看源代码。

印象中大概是这个样子的……

<form class="search-form">
    <input type="text" class="search-form__username">
    <input type="password" class="search-form__password">
    <button id="J_Submit" class="search-form__submit--active"></button>
<form>

『噗——』
这是什么鸟命名方式,又是下划线又是连接符,还一次搞两个,作为一只多年专注于只切图不交互的前端汪,对这种命名当然是嗤之以鼻的

『逗逼』
然后就关掉了,也没看内容是什么。

『卧槽这个应该怎么命名』
随后几次切图的时候,又遇到了这个困扰了很多年的问题,也是项目开发阶段中占用了99%时间的一个问题,而且不能去建国医院解决的。

『保持优雅』
如何优雅的命名。作为前端汪,每一次敲下字母的时候,心里都在想着这个页面会被全世界的人们可以看到,也许那里没有公路,也许那里没有办法烤茄子、撸串子,但是却可以看到我的代码。想到这里眼角湿润了。

『诶,那个是什么来着』
突然想起那天的——逗逼命名法,兴趣一下高涨起来,想去了解一下。但是总不能搜索逗逼命名法吧。后来的后来,在和仰慕已久的某美女前端交流后,知道了一个词。

BEM
什么是BEM呢,引用站内的一段话

BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包...

是的站内就写到了『包...』 然后结束了。
(文章末尾会指向几篇介绍大漠的关于BEM很棒的文章)

咱们来看页首部分的那段代码

<form class="search-form">
    <input type="text" class="search-form__username">
    <input type="password" class="search-form__password">
    <button id="J_Submit" class="search-form__submit--active"></button> <form>

这里的B,指的是Block,也就是"search-form"
这里的E,指的是Element,也就是跟随在search-form后的"username", "password"和"submit",并且用两个下划线(__)表示承接关系
这里的M,指的是Modifier,也就是submit后面的"active",用两个连接符表示承接关系(--

就酱!
就酱!!
是不是很简单易懂!
困扰了许多年的问题终于解决了。

图片描述
并且,根本停不下来了。

当然,故事名没有到高潮。
还有,『One more thing...』呢

Emmet,也就是之前的Zen Coding
(文章末尾会有指向相关的文章)
(等我说完再看)

还是刚刚的那段代码,当你使用了Emmet时候,可以省略掉block的字段,直接用一个连接符(-),然后在末尾加上标识符 |bem 来让Emmet按照BEM解析。

就像酱

form.search-form>input.-username+input.-password[type=password]+button.-submit--active|bem

然后按下caps lock上面的tab键,或者Q旁边的tab键就可以了。
是不是很酷炫。

这篇文章只是搬砖引玉,下面是几个说好的连接,很适合深入研究。

大漠的:BEM思想之彻底弄清BEM语法,深入浅出,很适合研究阅读。
Emmet中使用BEM的:Yandex BEM/OOCSS
还有男神的:About HTML semantics and front-end architecture,翻译过来就是如何写出和我一样帅的代码

页面右边的也有『相似文章』,推荐阅读。


切图汪
做一只安静的切图汪,这样就好。

PHP Parse error: syntax error, unexpected T_STRING in www\segmentfault.com\module\user\setting.ph...

1.7k 声望
70 粉丝
0 条评论
推荐阅读
文字垂直居中
今天看到一个解决文字垂直居中的demo,无论从扩展性还是周围影响性,都很巧妙且不牵强: {代码...} 真是一举解决了困扰多年的难性问题。 [链接]

狗屌阅读 2.8k评论 3

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -&gt; Preference-&gt; Settings(如果装了中文插件包应该是 文件 -&gt; 选项 -&gt; 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco21阅读 2.1k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan22阅读 1.6k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
【代码鉴赏】简单优雅的JavaScript代码片段(一):异步控制
Promise.race不满足需求,因为如果有一个Promise率先reject,结果Promise也会立即reject;Promise.all也不满足需求,因为它会等待所有Promise,并且要求所有Promise都成功resolve。

csRyan26阅读 3.3k评论 1

「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图

PHP Parse error: syntax error, unexpected T_STRING in www\segmentfault.com\module\user\setting.ph...

1.7k 声望
70 粉丝
宣传栏