CSS命名-BEM方法

最新推荐文章于 2023-10-10 11:13:42 发布

油头周大锅

最新推荐文章于 2023-10-10 11:13:42 发布

阅读量508

点赞数

分类专栏：技术分享文章标签： css

本文链接：https://blog.csdn.net/u013949027/article/details/111311424

版权

技术分享专栏收录该内容

8 篇文章 1 订阅

订阅专栏

BEM简述：

Bem 是块（block）、元素（element）、修饰符（modifier）的简写，利用不同的区块，功能以及样式来给元素命名。

BEM命名的好处

光凭class名字就可以让其他开发者知道某个标记用来做什么的，明白各个模块之间的关系
组件之间的完全解耦，不会造成命名空间的污染

BEM命名方式：

官网原文表述。

BEM方法通过使用混合或创建额外的块元素来达到相同的结果。您不需要创建额外的抽象包装器。

相对于其他块定位一个块

设置一个块元素相对于其他块元素的位置，最好的方法通常是使用混合class命名。

Example

<body class="page">
    <!-- header and navigation-->
    <header class="header page__header">...</header>

    <!-- footer -->
    <footer class="footer page__footer">...</footer>
</body>

.page__header {
    padding: 20px;
}

.page__footer {
    padding: 50px;
}

定位一个在块元素内的元素

定位一个被嵌套元素的位置时，通常通过创建一个额外的块元素(例如，block__inner)来设置。

Example

<body class="page">
    <div class="page__inner">
      <!-- header and navigation-->
      <header class="header">...</header>

      <!-- footer -->
      <footer class="footer">...</footer>
    </div>
</body>

注意
BEM方法命名时,不使用元素标签和ID选择器。块和元素的样式是由类选择器定义的。

通用类样式

使用通用类样式的元素，可以不考虑BEM方式命名。

Example
button 为通用样式类

<header class="header">
    <button class="header__button button button_theme_islands">...</button>
</header>

类选择器取名
命名必须准确地描述它所表示定位元素的实体。

Example

<div class="logo logo_theme_islands">
    <img src="URL" alt="logo" class="logo__img">
</div>

<!-- `user` block-->
<div class="user user_theme_islands">
    <img src="URL" alt="user-logo" class="user__img">
  ...
</div>

单一职责原则

就像在面向对象编程中一样，在CSS的BEM方法中，单一职责原则意味着每个CSS实现都必须有单一职责。

Example

HTML

<header class="header">
    <button class="button header__button">...</button>
</header>

CSS

.button {
    font-family: Arial, sans-serif;
    border: 1px solid black;
    background: #fff;
}

此时我们写header__button类选择器样式时：

Correct:

.header__button {
    margin: 30px;
    position: relative;
}

Incorrect:

.header__button {
    font-family: Arial, sans-serif;
    position: relative;
    border: 1px solid black;
    margin: 30px;
}

DRY

DRY（“不要重复自己”）是一种软件开发原理，旨在减少代码中的重复。

Example

<button class="button button_theme_islands">...</button>
<button class="button button_theme_simple">...</button>

.button {
    font-family: Arial, sans-serif;
    text-align: center;
}

.button_theme_islands {
    color: #000;
    background: #fff;
}

.button_theme_simple {
    color: #000;
    background: rgba(255, 0, 0, 0.4);
}

如何切换到bem方法的CSS

抛开DOM模型，学习创建块。
不要使用ID选择器或标签选择器。
最小化嵌套选择器的数量。
使用CSS类命名约定，以避免名称冲突，选择器名称尽可能具有信息性和清晰性。
在块元素和修饰符中定义样式。
如果是通用CSS属性，将其提出。
使用混合。
将代码划分为多个独立的小部分，以便于使用单个块元素。
重用块元素。

命名约定的模式

.block{}  
.block__element{}  
.block--modifier{}

.block 代表了更高级别的抽象或组件。

.block__element代表.block的后代，用于形成一个完整的.block的整体。

.block–modifier代表.block的不同状态或不同版本。

Example

.site-search{} /* 块 */  
.site-search__field{} /* 元素 */  
.site-search--full{} /* 修饰符 */

总的来说，BEM是一个非常有用，强大，简单的命名约定，让前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确而且更加严密。

CSS命名-BEM方法

BEM简述：

BEM命名的好处

BEM命名方式：

如何切换到bem方法的CSS

命名约定的模式

相关参考：

“相关推荐”对你有帮助么？