javascript Vue uni-app

前端领域的BEM到底是什么

2018-05-02  本文已影响649人  趁你还年轻233

在这篇【译】什么是CSS Modules ？我们为什么需要他们？的结尾处，明确指出CSS Modules不需要BEM，那么BEM到底是什么呢？

下面我将把BEM官网的教程翻译出来，带领大家搞清楚前端领域的BEM到底是什么。

BEM - Block Element Modfier（块元素编辑器）是一个很有用的方法，它可以帮助你创建出可以复用的前端组件和前端代码

它有如下3个特性：

下面将从3个方面来分析BEM到底是什么？

还要更多的疑惑，可以查看FAQ列表！

介绍

在小型手册网站上，如何组织你的风格通常不是一个大问题。你进入那里，写一些CSS，或者甚至是一些SASS。用SASS的生产设置将它编译成一个样式表，然后将它聚合到一起，将模块中的所有样式表都变成一个很好的整洁包。

但是，当涉及到更大，更复杂的项目时，组织代码的方式至少有以下三种方式是提高效率的关键：它影响编写代码需要多长时间，需要多少代码写和你的浏览器将不得不做多少加载。当你与团队合作并且高性能是必不可少的时候，这变得尤为重要。

这对于使用遗留代码的长期项目也是如此（请参阅“如何使用Sass和SMACSS来扩展和维护传统CSS” - 一些不错的SMACSS和BEM混合）。

方法
目前有很多方法可以减少CSS占用空间，组织程序员之间的合作以及维护大型CSS代码库。这在Twitter，Facebook和Github等大型项目中很明显，但其他项目通常会很快成长为“巨大的CSS文件”状态。

我选择BEM而不采用其他方法的原因归结为：它比其他方法（即SMACSS）更容易混淆，但仍为我们提供了我们想要的良好体系结构（即OOCSS）以及可识别的术语。
Mark McDonnell，BEM可维护的CSS

Blocks，Element和Modifier
听到BEM是方法论的关键元素 - Block，Element和Modifier的缩写，您一定不会感到惊讶。BEM严格的命名规则可以在这里找到。

深入理解
我们现在来看一个使用BEM的元素，是Github的button：


image

我们可以使用一个普通按钮应对普通情况 ，再使用两种不同的应对不同情况。因为我们使用BEM的方式为Block 绑定了class，我们可以用任何想使用的标签去实现。（button，a 甚至是div）。但是命名规则告诉我们需要使用block-modifier-value的语法。
HTML:

<button class="button">
    Normal button
</button>
<button class="button button--state-success">
    Success button
</button>
<button class="button button--state-danger">
    Danger button
</button>

CSS:

.button {
    display: inline-block;
    border-radius: 3px;
    padding: 7px 12px;
    border: 1px solid #D5D5D5;
    background-image: linear-gradient(#EEE, #DDD);
    font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
    color: #FFF;
    background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
    border-color: #4A993E;
}
.button--state-danger {
    color: #900;
}

优点：

拓展阅读
‘Why BEM?’ in a nutshell
MindBEMding — getting your head ’round BEM syntax
CSS guidelines
BEM methodology for small projects
BEM It! for Brandwatch
Used and Abused — CSS Inheritance and Our Misuse of the Cascade.
Objects in Space — A style-guide for modular SASS development using SMACSS and BEM
How to Scale and Maintain Legacy CSS with Sass and SMACSS
Building a modular My Health Skills with BEM and Sass
Building My Health Skills — Part 3

案例分析：
我们希望尽快撰写“如何将现有项目迁移到BEM”。与此同时，您可以观看Nicole Sullivan的精彩演讲 - “CSS预处理器性能”。她很好地概述了她在大多数网站遇到的问题，并提供了跟踪和处理这些问题的方法。

命名

在计算机科学领域，只有2个非常难解决的问题：一个是缓存失效，而另一个则是命名。-Phil Karlton

有一个好的样式指导手册将会显著提高开发的速度，debug的速度，以及在原有代码上完成新功能的效率。然而不幸的是，大多数的CSS 代码在开发过程中毫无任何结构和命名的规范。从长远角度来看，这会导致最后产生的CSS代码库很难维护。

BEM方法确保每一个参加了同一网站开发项目的人，基于一套代码规范去开发，这样非常有利于团队成员理解彼此的代码，而且对于后续接手项目的同学来说，也是一件好事。

Block

Element

<div class="block">
    <span class="block__name"></span>
</div>

.block__elem{color:#042};

Bad

.block .block__elem {color:#042;}
div.block__elem {color:#042;}

Modifier

<div class="block block--mod">...</div>
<div class="block block--size-big block--shadow-yes">...</div>

Bad

<div class="block--mod">...</div>

CSS

例子：
假设你的form Block由modifier：theme:"xmas" 以及simple:true 以及element:input 和submit，submit自己的modifier是disabled:true。
HTML:

<form class="form form--them-xmas form--simple"
    <input class="form__input" type="text" />
    <input class="form__submit form__submit--disabled" type="submit" />
</form>

CSS:

.form {}
.form--theme-xmas {}
.form--simple {}
.form__input {}
.form__submit {}
.form__submit--disabled {}

期待和大家交流，共同进步，欢迎大家加入我创建的与前端开发密切相关的技术讨论小组：

努力成为优秀前端工程师！

上一篇 下一篇

猜你喜欢

热点阅读