【前端】CSS权重及BEM规范

1、常用选择器权重

1. ID 选择器，（1, 0, 0）
2. 类选择器、属性选择器、伪类选择器， （0, 1, 0）
3. 元素选择器、伪元素选择器，（0, 0, 1）

2、样式生效规则

1. 同一行的选择器叠加权重值
2. 若权重值相同，则依据编写方式：行间样式 > 内联样式 > 外联样式
3. 若样式编写的方式也相同，则依据样式代码位置：下面的 > 上面的
4. !important 设置样式的权重值为 infinity (无穷大)

3、BEM（Block, Element, Modifier）

3.1 基本概念

BEM由三个主要部分组成：

1. Block（块）‌：一个独立的模块或组件，具有独立的意义和功能，例如一个按钮或菜单。块可以包含多个元素和修饰符。
2. Element（元素）‌：块的一部分，依赖于块存在，没有独立的功能。例如，一个按钮的图标或一个菜单项。
3. Modifier（修饰符）‌：用于定义块或元素的外观、状态或行为的变化。例如，禁用状态或不同颜色的按钮。

3.2 命名规则和结构

• 命名规则‌：BEM的命名规则包括全局前缀、块名、元素名和修饰符。格式为 [prefix]-[block]__[element]--[modifier]。例如，el-btn__primary--disabled 表示一个被禁用的主要按钮‌。
• 结构示例‌：

<div class="menu">
  <ul class="menu__list">
    <li class="menu__item menu__item--active">home</li>
    <li class="menu__item">about</li>
    <li class="menu__item">contact</li>
  </ul>
</div>

在这个例子中，.menu 是块，.menu__list 和 .menu__item 是元素，.menu__item--active 是修饰符‌。

3.3 优势

1. 提高代码的可读性和可维护性‌：通过明确的命名规则，开发者可以更容易地理解HTML和CSS之间的关系。
2. 模块化和重用性‌：BEM鼓励将样式和结构分离，使得组件可以更容易地重用和维护。
3. 避免样式污染‌：通过明确的命名和结构，可以有效避免不同组件之间的样式冲突。