css命名方法-BEM

最新推荐文章于 2024-01-12 11:06:42 发布

飞羽逐星

最新推荐文章于 2024-01-12 11:06:42 发布

阅读量339

点赞数

分类专栏：包管理器 CSS学习 webpack 文章标签： css 命名方法

本文链接：https://blog.csdn.net/xun__xing/article/details/108248360

版权

包管理器同时被 3 个专栏收录

30 篇文章 2 订阅

订阅专栏

CSS学习

27 篇文章 4 订阅

订阅专栏

webpack

25 篇文章 0 订阅

订阅专栏

这里写目录标题

一、BEM

一、BEM

BEM是一套针对css类样式的命名方法。

其他命名方法还有：OOCSS、AMCSS、SMACSS等等

BEM全称是：Block Element Modifier

一个完整的BEM类名：block__element_modifier，例如：banner__dot_selected，可以表示：轮播图中，处于选中状态的小圆点

在这里插入图片描述

三个部分的具体含义为：

Block：页面中的大区域，表示最顶级的划分，例如：轮播图(banner)、布局(layout)、文章(article)等等
element：区域中的组成部分，例如：轮播图中的横幅图片(banner__img)、轮播图中的容器（banner__container）、布局中的头部(layout__header)、文章中的标题(article_title)
modifier：可选。通常表示状态，例如：处于展开状态的布局左边栏（layout__left_expand）、处于选中状态的轮播图小圆点(banner__dot_selected)

在某些大型工程中，如果使用BEM命名法，还可能会增加一个前缀，来表示类名的用途，常见的前缀有：

l: layout，表示这个样式是用于布局的
c: component，表示这个样式是一个组件，即一个功能区域
u: util，表示这个样式是一个通用的、工具性质的样式
j: javascript，表示这个样式没有实际意义，是专门提供给js获取元素使用的

.banner__container {//轮播容器
    width: 520px;
    height: 280px;
    margin: 0 auto;
    outline: 1px solid;
    overflow: hidden;
    position: relative;
}

.banner__imgcontainer {//轮播图长度
    width: 1560px;
    height: 280px;
    /* background: red; */
}

.banner__imgcontainer img {
    float: left;
    width: 520px;
    height: 280px;
}

.banner__dotcontainer {//中下方状态点盒子
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px;
    background: rgba(0, 0, 0, .5);
    border-radius: 5px;
}

.banner__dot{
    float: left;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    margin: 5px;
}

.banner__dot_selected{
    background: #f40;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="banner__container">
        <div class="banner__imgcontainer">
            <img src="https://img.alicdn.com/simba/img/TB1JqFeoH2pK1RjSZFsSuuNlXXa.jpg" alt="">
            <img src="https://img.alicdn.com/simba/img/TB1JqFeoH2pK1RjSZFsSuuNlXXa.jpg" alt="">
            <img src="https://img.alicdn.com/simba/img/TB1JqFeoH2pK1RjSZFsSuuNlXXa.jpg" alt="">
        </div>
        <div class="banner__dotcontainer">
            <span class="banner__dot banner__dot_selected"></span>
            <span class="banner__dot"></span>
            <span class="banner__dot"></span>
        </div>
    </div>
</body>
</html>

飞羽逐星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css命名方法-BEM

这里写目录标题一、BEM一、BEMBEM是一套针对css类样式的命名方法。其他命名方法还有：OOCSS、AMCSS、SMACSS等等BEM全称是：Block Element Modifier一个完整的BEM类名：block__element_modifier，例如：banner__dot_selected，可以表示：轮播图中，处于选中状态的小圆点三个部分的具体含义为：Block：页面中的大区域，表示最顶级的划分，例如：轮播图(banner)、布局(layout)、文章(article)
复制链接

扫一扫