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

最新推荐文章于 2024-07-05 12:23:20 发布

我是刺猬姑娘

最新推荐文章于 2024-07-05 12:23:20 发布

阅读量561

点赞数

文章标签： CSS命名

本文链接：https://blog.csdn.net/hongtaochi0464/article/details/90613276

版权

此篇文章是在这篇文章的基础上的一个学习~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 class = "search__button search__button--confirm">确定</button>
    <button class = "search__button search__button--cancel">取消</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的子元素。

 <!-- BEM 淘票票导航栏 -->
    <div class="tppNav">
        <!--logo-->
        <div class="tppNav__logoDiv">
            <h1 class="tppNav__logoH1">
                <a target="_top" href=""></a>
            </h1>
        </div>
        <!--选择城市-->
        <div class="tppNav__cityDiv">……</div>
        <!--首页/影片/影院-->
        <div class="tppNav_navDiv">
            <ul class=tppNav_navUl">
                <li class="tppNav_navLi tppNav_navLi--selected">……</li>
                <li class="tppNav_navLi">……</li>
                <li class="tppNav_navLi">……</li>
            </ul>
        </div>
    </div>
    <!-- BEM 淘票票导航栏 -->