# bem

**Repository Path**: crim-son_admin/bem

## Basic Information

- **Project Name**: bem
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-27
- **Last Updated**: 2021-10-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## css规范之BEM规范
### 前言
> 引用一句经典名言在编程的世界里其中一件最难的事情就是命名，不管是设计到编程语言还是标记语言都会有命名的需求。今天聊的就是关于css的命名规范的发展过程以及演变。
### 命名的发展变化过程
+ 非组件化项目css命名原则
    - 复用性 全局性
    - 以jquery为代表的时代，我们项目都是独立的html文件，此时为了让我们的项目更好的维护，在写样式的时候，通常我们会将一些通用的样式单独提取到一个css文件，每个页面使用的时候可以引入使用，比如`reset.css,common.css`。
    - 每一块功能块的样式都是独立的，之间无法复用，可以复用的样式全部提取到全局样式。
+ 组件化项目命名原则
    - BEM规范
    - 以vue和react为代表的时代，我们项目都是组件化的，组件内的样式都是独立的作用域`scope`来限制，组件之间是可以相互引入使用的，一个组件可以拆分成多个小组件，此时样式命名规范就需要使用BEM规范，从而达到组件样式的独立性。
### BEM的规范
+ BEM规范是css命名规范，主要适用的范围是组件化开发的模式。
+ 规范介绍（B__E--M）
    - B `代表block,也就是块，每一个块都是一个独立的功能，块之间可以相互嵌套。`
        + 块的命名可以由多个单词组成，每个单词之间以`-`链接
        + 块的作用只是起到一个隔离的作用，一般不会在块里面实现具体组件的样式，对于块修饰样式比如尺寸，位置可以通过修饰符设置
        + 块与修饰符之间通过`--`链接
    - E `代表element,也就是元素，元素是依赖于块存在，不能独立存在，必须嵌套在块内部。`
        + 元素的命名可以由多个单词组成，每个单词之间以`-`链接
        + 元素的样式必须依赖块存在，元素是块的具体实现,块与元素之间通过`__`链接
        + 元素里面可以定义每个元素自身的样式，对于元素修饰样式比如尺寸，状态可以通过修饰符设置
        + 元素与修饰符之间通过`--`链接
    - M `代表modifier, 也就是修饰符，修饰符一般是对于元素或者块的状态和外观进行修饰。`
        + 修饰符的命名可以由多个单词组成，每个单词之间以`-`链接
        + 修饰符可以修饰块和元素的状态、行为、尺寸等
+ 代码演示
    - 评分组件 [地址]()
    ```html
        <div class="qf-rate">
            <span class="qf-rate__item qf-rate__item--active">
            </span>
            <span class="qf-rate__item">
            </span>
            <span class="qf-rate__item">
            </span>
            <span class="qf-rate__item">
            </span>
            <span class="qf-rate__item">
            </span>
        </div>
    ```
    ```css
        .qf-rate{
            width: 300px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .qf-rate__item{
            width: 48px;
            height: 48px;
            cursor: pointer;
            background: url('./img/star.png');
        }
        .qf-rate__item--active{
            background: url('./img/star_active.png');
        }
    ```
+ BEM不推荐写法
    1. 采用标签或者id作为选择器，全部采用类名作为选择器
        - id因为权重的问题，而且针对于spa的项目会出现id的重复情况
        - 标签选择器当我们需要修改组件解构的时候，同时还需要维护组件样式
    2. 不推荐使用并列选择器，使用状态来实现