什么做网站的公司好,企业资源计划系统,免费收录软文网站,网站服务器重启BEM的意思就是块#xff08;block#xff09;、元素#xff08;element#xff09;、修饰符#xff08;modifier#xff09;,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格#xf…BEM的意思就是块block、元素element、修饰符modifier,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格而且包含更多的信息它们用于一个团队开发一个耗时的大项目。
重要的是要注意我使用的基于BEM的命名方式是经过Nicolas Gallagher修改过的。这篇文章中介绍的这种命名技术并不是原始的BEM但却是一个我更喜欢的改进版。无论实际使用了什么样的符号它们其实都是基于同样的BEM原则。
命名约定的模式如下
.block{} .block__element{} .block--modifier{}
.block 代表了更高级别的抽象或组件。.block__element 代表.block的后代用于形成一个完整的.block的整体。.block--modifier代表.block的不同状态或不同版本。
之所以使用两个连字符和下划线而不是一个是为了让你自己的块可以用单个连字符来界定如
.site-search{} /* 块 */ .site-search__field{} /* 元素 */ .site-search--full{} /* 修饰符 */
BEM的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。通过浏览HTML代码中的class属性你就能够明白模块之间是如何关联的有一些仅仅是组件有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。我们用一个类比/模型来思考一下下面的这些元素是怎么关联的
.person{} .person__hand{} .person--female{} .person--female__hand{} .person__hand--left{}
顶级块是‘person’它拥有一些元素如‘hand’。一个人也会有其他形态比如女性这种形态进而也会拥有它自己的元素。下面我们把他们写成‘常规’CSS:
.person{} .hand{} .female{} .female-hand{} .left-hand{}
这些‘常规’CSS都是有意义的但是它们之间却有些脱节。就拿.female来说是指女性人类还是某种雌性的动物还有.hand是在说一只钟表的指针译注英文中hand有指针的意思还是一只正在玩纸牌的手使用BEM我们可以获得更多的描述和更加清晰的结构单单通过我们代码中的命名就能知道元素之间的关联。BEM真是强大。
再来看一个之前用‘常规’方式命名的.site-search的例子
form classsite-search full input typetext classfield input typeSubmit value Search classbutton /form
这些CSS类名真是太不精确了并不能告诉我们足够的信息。尽管我们可以用它们来完成工作但它们确实非常含糊不清。用BEM记号法就会是下面这个样子
form classsite-search site-search--full input typetext classsite-search__field input typeSubmit value Search classsite-search__button /form
我们能清晰地看到有个叫
.site-search的块他内部是一个叫
.site-search__field的元素。并且
.site-search还有另外一种形态叫
.site-search--full。我们再来举个例子……
如果你熟悉OOCSS面向对象CSS那么你对media对象一定也不陌生。用BEM的方式media对象就会是下面这个样子
.media{} .media__img{} .media__img--rev{} .media__body{}
从这种CSS的写法上我们就已经知道
.media__img 和
.media__body一定是位于
.media内部的而且
.media__img--rev是
.media__img的另一种形态。仅仅通过CSS选择器的名字我们就能获取到以上全部信息。BEM的另外一个好处是针对下面这种情况
div classmedia img srclogo.png altFoo Corp logo classimg-rev div classbody h3 classalphaWelcome to Foo Corp/h3 p classledeFoo Corp is the best, seriously!/p /div /div
光从上面的代码来看我们根本不明白.media和.alpha两个class彼此之间是如何相互关联的同样我们也无从知晓.body和.lede之间或者.img-rev 和.media之间各是什么关系从这段HTML除非你对那个media对象非常了解中我们也不知道这个组件是由什么组成的和它还有什么其他的形态。如果我们用BEM方式重写这段代码
div classmedia img srclogo.png altFoo Corp logo classmedia__img--rev div classmedia__body h3 classalphaWelcome to Foo Corp/h3 p classledeFoo Corp is the best, seriously!/p /div /div
我们立马就能明白
.media是一个块
.media__img--rev是一个加了修饰符的
.media__img的变体它是属于
.media的元素。而
.media__body是一个尚未被改变过的也是属于
.media的元素。所有以上这些信息都通过它们的class名称就能明白由此看来BEM确实非常实用。丑极了
通常人们会认为BEM这种写法难看。我敢说如果你仅仅是因为这种代码看上去不怎么好看而羞于使用它那么你将错失最重要的东西。除非使用BEM让代码增加了不必要的维护困难或者这么做确实让代码更难读了那么你在使用它之前就要三思而行了。但是如果只是“看起来有点怪”而事实上是一种有效的手段那么我们在开发之前当然应该充分考虑它。
是BEM看上去确实怪怪的但是它的好处远远超过它外观上的那点瑕疵。
BEM可能看上去有点滑稽而且有可能导致我们输入更长的文本大部分编辑器都有自动补全功能而且gzip压缩将会让我们消除对文件体积的担忧但是它依旧强大。
用还是不用BEM?
我在我的所有项目中都使用了BEM记号法因为它的有效性已经被它自己一次又一次地证明。我也极力地建议别人使用BEM因为它让所有东西之间的联系变得更加紧密让团队甚至是你个人都能够更加容易地维护代码。
然而当你真正使用BEM的时候重要的是请记住你没必要真的在每个地方都用上它。比如
.caps{ text-transform:uppercase; }
这条CSS不属于任何一个BEM范畴它仅仅只是一条单独的样式。
另一个没有使用BEM的例子是
.site-logo{}
这是一个logo我们可以把它写成BEM格式像下面这样
.header{} .header__logo{}
但我们没必要这么做。使用BEM的诀窍是你要知道什么时候哪些东西是应该写成BEM格式的。因为某些东西确实是位于一个块的内部但这并不意味它就是BEM中所说的元素。这个例子中网站logo完全是恰巧在.header的内部它也有可能在侧边栏或是页脚里面。一个元素的范围可能开始于任何上下文因此你要确定只在你需要用到BEM的地方你才使用它。再看一个例子
div classcontent h1 classcontent__headlineLorem ipsum dolor.../h1 /div
在这个例子里我们也许仅仅只需要另一个class可以叫它.headline它的样式取决于它是如何被层叠的因为它在.content的内部或者它只是恰巧在.content的内部。如果它是后者即恰巧在.content的内部而不总是在我们就不需要使用BEM。
然而一切都有可能潜在地用到BEM。我们再来看一下.site-logo的例子想象一下我们想要给网站增加一点圣诞节的气氛所以我们想有一个圣诞版的logo。于是我们有了下面的代码
.site-logo{} .site-logo--xmas{}
我们可以通过使用--修饰符来快速地为我们的代码构建另一个版本。
BEM最难的部分之一是明确作用域是从哪开始和到哪结束的以及什么时候使用不使用它。随着接触的多了有了经验积累你慢慢就会知道怎么用这些问题也不再是问题。
结束语
所以BEM或BEM的变体是一个非常有用强大简单的命名约定以至于让你的前端代码更容易阅读和理解更容易协作更容易控制更加健壮和明确而且更加严密。
尽管BEM看上去多少有点奇怪但是无论什么项目它对前端开发者都是一个巨有价值的工具。 来自https://segmentfault.com/a/1190000000391762
