浅谈BEM-京东官网

1.什么是BEM？

• B-Block: 一个本身就是有意义的独立实体。
• E-Element: Block的一部分，没有独立的意义，而且在语义上依附于Block存在。
• M-Modifier: 修饰符，一个block或者element上的修饰，体现了外观或者行为的变化。

<!-- 简单的BEM小Demo -->
<div class="page">
        <div class="page__hd">
            <h1 class="page__title">我是标题</h1>
            <p class="page__desc">组件</p>
        </div>
        <div class="page__bd">
            <div class="button-sp-area">
                <a href=" " class="weui-btn weui-btn_primary">主要操作</a>
                <a href=" " class="weui-btn weui-btn_default">次要操作</a>
                <a href=" " class="weui-btn disbale weui-btn_disable">次要操作</a>
            </div>
        </div>
        <div class="page__ft"></div>
    </div>

由以上小案例可区分Block，Element，Modifier

• .page： Block块
• .page__hd,.page__bd,.page__ft: Element块中的元素
• .weui-btn_primary或.weui-btn--primary: Modifier对于块或者元素的状态修改

2.为什么要用BEM？

1. 使用BEM可以让我们在看到代码的同时联想到该页面的DOM层次结构关系.
2. 样式分模块,不需要写大量的重复样式,不用频繁的修改原有样式,只需要在最简单的样式上逐层叠加即可.

3.实战京东首页 1.回想以下我们之前说的第一个BEM优点，是不是看到他的BEM标签脑中就浮现了他对应的结构？

2.回想以下我们之前说的第二个BEM优点，这样我们可以不用写重复的多 快 好 省 用一个mod_service_tit即可,需要修改他的样式再增加Modifier _duo _kuai _hao _sheng

4.总结

• 实际上我们看到京东的页面也并没有完全遵循标准的BEM规范(-,_的使用),但是仍有迹可循。
• 可见BEM的思想在对于网页的开发还是有着较为重要的作用

如有错误问题希望大家评论区指出