了解BEM

最新推荐文章于 2023-05-08 21:32:35 发布

写代码的女生酷不酷

最新推荐文章于 2023-05-08 21:32:35 发布

阅读量799

点赞数

分类专栏：前端 css 文章标签： css 前端结构

本文链接：https://blog.csdn.net/dadadeganhuo/article/details/76600264

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

作为一个前端，写页面结构，写CSS怎么命名?
就算不用，但你的了解，让自己的代码更规范。

BEM是什么

它是css命名的一种规范。试想，你写了一个页面，有input, button, div, 这些元素是什么样的关系，给他们添加样式的时候，怎么知道他们是一个页面的？怎么知道input 是否放在div里面的？不要急，这就说到了下面的命名之作用

BEM是怎么命名的

<html>
    <div class="loggin-from">
        <input class="loggin-from__input"/>
        <button class="loggin-from__confim">确定</button> 
    </div>
</html>

通过上面命名可以很直接看出，input 和button 在div 里面。
这里讲后面的 __input/__confim 这里后面接两个下划线，表示的是div里面的子元素。

<html>
    <div class="loggin-from--big">
        <input class="loggin-from__input"/>
        <button class="loggin-from__confim">确定</button> 
    </div>
</html>

这里说， –big表示添加的描述，很明显是大的注册表单的样式嘛。

BEM总结

好了，这里loggin-from 相当于一块整体(block)，里面包含了元素input/button(element), 还有这个块或者一些元素的修饰big(modifier) => BEM
它一般和sass一起使用，在用@C代表块、 @d代表元素、 @m代码修饰符的时候， css可以这样写了

@C loggin-from {
    width: 100px;
    height: 100px;
    @m big {
        width: 200px;
        height: 200px;
    }
    @d input {
        color: red;
    }
    @d button {
        color: blue;
    }
}