CSS 与 BEM

最新推荐文章于 2025-03-04 12:09:32 发布

王天平·Jason Wong

最新推荐文章于 2025-03-04 12:09:32 发布

阅读量225

点赞数

分类专栏： WEB前端文章标签： css html

本文链接：https://blog.youkuaiyun.com/wangping146/article/details/112846662

版权

WEB前端专栏收录该内容

15 篇文章

订阅专栏

CSS 与 BEM

1.什么是BEM

BEM就是 block 、 element、modifiers 的缩写。

利用命名空间来创建block，然后用 .block__element 来选择元素，用 .block-modifiers 来修改block一些属性，

从而在class命名上就可以一眼看出其功能，简而言之BEM实际上可以理解为CSS一种编写规范。

2.创建block与Selector

block的创建其实很简单，就是给元素命名一个class，可以是一个组件 .form 或者是一个页面 .page，

像下面这样就已经创建好了block。但是在选择element的时候命名最好不要超过两级，要不然可能有点长，此时应该重新命名新的block或者Selector。

<body class="page"><!--  page 就是block-->
 <header class="page__header"></header> <!-- page__header 就是block里面的元素-->
</body>

.page {}
.page__header{}

in less or scss

.page {

  &__header{}
}

3.modifiers

什么时候会使用 modifiers呢？比如一个button可能有几种颜色以应用与不同场景，此时定义一个基础block以后，再定义几个modifiers可以实现几种颜色的变换。

比如创建了button块之后，再创建modifiers button-success，定义按钮的背景色和前景色等。

<button class="button"></button> <!-- button - block  -->
<button class="button button-success"></button> <!-- button-success - modifiers -->

.button{}
.button-success {}

in less or scss

.button{
  
  &-success{}
}

4.命名规则

总体上来讲selector的名称要完整并且能够描述其整个继承体系。

/*block*/
.button {}

/*selector*/
.button__icon {}
.button__text {}

/*modifiers*/
.button-success {}

5.混入

在一些场景中，有些通用组件可能要依据当前页面而进行定制，那么此时可以使用混入来解决。

<!-- header block -->
<header class="header">
      <button class="button header__button">...</button>
</header>

.button {
    font-family: Arial, sans-serif;
    text-align: center;
    border: 1px solid black;    /* Frame */
}
.header__button {
    margin: 30px;               /* Padding */
    position: relative;
}

<article class="article text">...</article>

<footer class="footer">
    <div class="copyright text">...</div>
</footer>

.text {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #000;
}

6. BEM-style CSS 总体规则

主要有以下几点：

尽量遵从block、element、modifiers规则；
不要使用id选择器或者标签选择器；
选择器命名要最小单元化；
使用CSS类命名约定以避免名称冲突，并使选择器名称尽可能具有信息性和清晰性；
如果多个modifiers里面有修改相同的CSS属性，请把相同属性移动到block里面；
使用混入；
将代码分成几个独立的小部分，以便于处理单个块。
尽可能的复用。

以上就是BEM的基本内容和使用方法，希望能够对你有所帮助。

版权声明

原创文章，请勿转载及复制！

您的鼓励是我最大的动力，谢谢！