小清新网站与BEM规范

首先看一下大名鼎鼎的BEM是什么

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

BEM的关键是可以通过名字告诉开发者这些标签表示的是什么意思，通过浏览class属性，就能够明白这些模块之间是如何关联的，有一些仅仅是组件，有一些是组建的子孙或是元素，还有一些组件是其他形态或修饰符，使用这些常规的命名方式我们可以看清代码之间的关联，BEM是不是很强大呢。

独立的实体，它本身是有意义的。

例子 header，container，menu，checkbox，input

元素

块的一部分，没有独立的含义，并且在语义上与其块相关联。

例子 menu item，list item，checkbox caption，header title

修改

块或元素上的标志。用它们来改变外观或行为。

例子 disabled，highlighted，checked，fixed，size big，color yellow

一起来看小清新网站堆糖BEM命名实例

一般网站的结构都是由header，content，footer三部分构成，每部分用上不同的BEM

命名，网站结构就非常清晰可见了。堆糖就用了这样的结构

扫描二维码关注公众号，回复： 3602395 查看本文章

 <div id="header-wrap">    
      <div id="dt-header">
        <div id="dt-wrap">
                <a id="dt-logo" href="#">堆糖</a>
            <div id="dt-nav"></div>
            <div id="dt-search"></div>
            <div id=dt-srarch-right"></div>
        </div>
    </div>
</div>复制代码

这里是堆糖header部分，网站名为堆糖，可以看到这些标签大多以dt开头。

dt-header是指着整个堆糖的header部分

dt-wrap是header的包裹部分，这部分块由四部分组成

第一部分是dt-logo，表示堆糖这个logo
第二部分dt-nav表示导航标签
第三部分dt-search表示搜索标签
第四部分是一个大的块，取名为dt-search-right

所以这些语义化的标签使每个元素都清晰可见，这就是BEM。

让我们看看堆糖推荐区的BEM命名

来看看堆糖是如何做的，这块是一个推荐关注区，中间由ul列表组成

里面由三个section，每个section=img+desc+follow

  复制代码

ul列表取名为dt-daren-list,多么清新的名字，list修饰符表明这是一个列表
每个section下有不同的区块，daren-img图片区和daren-desc文字区和daren-follow超链接区
每个img下有两个小图标,分别命名为daren-avater和daren-avater-v

看一下小清新的一幕


复制代码

dynamic-collect-article，命名为动态收集文章，这是一项。
dynamic-collect-article-userinfo ，用修饰符userinfo表示人物信息
dynamic-collect-article-tag，用修饰符tag表示一个小标签
dynamic-collect-article-bar，用后缀修饰符bar表示底部一栏

这些应该都是常见的修饰符，类似还有icon ，label，badge等，还有一些对元素状态修改用到的修饰符，-on等

看一下这部分的点赞收藏

<div class="de-action">        <div class="action-list" data-type="article" data-id="665046">            <div class="like-action one-action " data-likeid="0">                <img src="https://b-ssl.duitang.com/uploads/item/201804/23/20180423141044_kt5Rj.png">                <span class="detail-text">6</span>            </div>
            <div class="favorite-action one-action " data-favoriteid="0">                <img src="https://b-ssl.duitang.com/uploads/item/201804/23/20180423141044_YizTc.png">                <span class="detail-text">5</span>            </div>            <div class="more-action one-action">                <img src="https://b-ssl.duitang.com/uploads/item/201804/23/20180423141044_tPCeh.png">                <span class="detail-text">更多</span>            </div>        </div>    </div>             复制代码

这部分的代码

这部分的内容被包含在de-action的盒子中
action-list是整个盒子的子盒子,由like-action和favorite-action,more-action组成
like-action 点赞区
favorite-action 喜欢收藏区
more-action 查看更多区
其中每块由图片<img>和<span classdetail-text>组成，结构清晰易懂

最后如何看待BEM

BEM还是有很多值得大家去思考的，特别是用于维护项目，或者跨团队的开发当中，他的好处会明显见长。
单元性

块的样式从来不依赖同页面其它的元素，所以你永远不会遇到级联问题。您还可以将完成的项目中的块转移到新项目中。

重用性

不同方式组织独立的块，并智能地重用它们，可以减少必须维护的CSS代码量。通过一系列风格指南，您可以构建一个块库，使您的CSS超级有效。

结构化

BEM方法可以使得你的CSS代码结构性很好，从而更加容易理解。

堆糖网在此：https://www.duitang.com/