前端CSS命名规范-BEM的学习

此篇文章是在这篇文章的基础上的一个学习~https://www.w3cplus.com/css/bem-definitions.html

BEM的学习

1.基础概念

BEM - Block Element Modfier（块元素编辑器）是一个很有用的方法，它可以帮助你创建出可以复用的前端组件和前端代码。
其中，B代表block(块)，E代表element(元素)，M代表modifier(修饰符)

命名规则为

例：human__hair–red

2.块(Block)

那我们应该如何去划分一个块呢？

以上图为例子，我们来思考一下如何划分块？
块是一个独立的组件，像应用的一块积木。块可以是简单的，也可以是复合的(块可以包含块)。
我们将上图划分成以下模块：

即Head块(其中包含Menu块 Logo块 Search块 Auth块)、MainLayout块、Foot块。

3.元素(Element)

那我们再来试一试划分元素

一个元素是块的一部分，具有某种功能。元素只有处于他们应该属于的块的上下文中时才是有意义的。

我们来尝试着写一下他的html结构，并且使用BEM为其命名：

<form class="search">
    <input type="text" class="search__input">
    <button class="search__button">button>
 form>

其对应的CSS样式可以表示如下

.search__input
{
	some style
}

而我们平时用的命名可能是这样的

<form class="search">
    <input type="text" class="input">
    <button class="button">button>
 form>

其对应的CSS样式为

.input
{
	some style
}

我们仔细对比一下两种命名方式就会发现，使用BEM命名的有如下的优点
1.层级关系明显，可以立即知道这个样式在哪一块，会和哪些样式冲突。
2.独一无二的命名方式，可以比较有效的防止CSS的优先级竞争。

4.修饰符(Modifier)

我们经常需要创建一个和已存在的块/元素非常相似的块/元素，只是外观或行为有些许改变。这时候需要使用修饰符来表示。
比如下面的两个按钮，他们的宽度，大小字体颜色等都是一样的。我们可以只多添加一个修饰符来写不同的样式。

代码如下所示。

<form class="search">
    确定button>
    取消button>
form>

/*为button设置统一的样式*/
        .search__button{
            width:60px;
            cursor: pointer;
            border-radius: 5px;
            color:white;
        }
        /*设置不同状态的样式-确定按钮*/
        .search__button--confirm{
            background-color: red
        }
        /*设置不同状态的样式-取消按钮*/
        .search__button--cancel{
            background-color: blue
        }

这样的优点也很显而易见：
相似的块/元素的样式可以复用，仅在修饰符的类中做修改即可。

5.淘票票页面导航栏BEM重命名

这一段是参考了[link]http://mp.weixin.qq.com/s?__biz=MzU4MzIzMjg1MA==&mid=2247484201&idx=1&sn=bb936a242f703d351df9674e4de0ebf4&chksm=fdad7f14cadaf602121bbd414891dcc19154e1ad9c8970b3d64f6173ea9d4e52113ca2e2daa9&mpshare=1&scene=24&srcid=0527b7DVjDsAhP8LeCdJ31RQ#rd
淘票票的导航栏如下所示

我们来看一下它的html结构

    <div class="head-wrap" data-spm="header">
        <div class="head-content center-weap">
            <h1 class="logo"> <a target="_top" href="">a> h1>
        div>
        <div class="cityWrap M-cityWrap">……div>
        <div class="nav-warp">
            <ul class="nav">
                <li class="J_NavItem current">……li>
                <li class="J_NavItem">……li>
                <li class="J_NavItem">……li>
            ul>
        div>
    div>
    

我们可以看到 结构层次不够明显 很难去一眼看出每个元素之间的先后关系 比如J_NavItem与head-wrap的关系
我使用BEM命名方法为其重新命名了一下~是下面这样的 对应的 我们能很清楚的看出tppNav_navLi是tppNav的子元素。

 
    <div class="tppNav">
        
        <div class="tppNav__logoDiv">
            <h1 class="tppNav__logoH1">
                <a target="_top" href="">a>
            h1>
        div>
        
        <div class="tppNav__cityDiv">……div>
        
        <div class="tppNav_navDiv">
            

                <li class="tppNav_navLi tppNav_navLi--selected">……li>
                <li class="tppNav_navLi">……li>
                <li class="tppNav_navLi">……li>
            ul>
        div>
    div>
    

也可以看一下我引入的那个链接的BEM将其命名成什么了~

6.优点总结

我个人认为，使用BEM命名法是很好的。有以下的优点：

1.将页面分成不同的独立的块，块与块之间的耦合度较低。可以轻松的应付页面中的块位置调整问题。
2.命名规则具有层次，无论是写代码的人还是改代码的人都能清楚了解块内的层次关系。修改删除添加样式
都简洁得多。
3.独特的命名规则使得命名冲突的可能性大大降低，并且能有效避免CSS优先级的竞争问题。