CSS怎样命名才能更好的理解

_果果然2024-05-10 7:06

经常因为不知道怎么给css命名的小伙伴看过来

CSS命名方法对于维护可读性和易于理解的代码至关重要。这里有一个基于BEM（Block Element Modifier）的命名方法，它被广泛认为是提高CSS可维护性和可读性的有效方式：

BEM（Block, Element, Modifier）命名约定

Block（块）：代表页面上的一个独立组件或一个区域，例如导航、卡片、按钮等。通常以单个单词大写表示。

Element （元素）：是构成块的子部件。它们没有独立的意义，只在块的上下文中才有意义。元素名附加在块名之后，用两个下划线__连接。

Modifier （修饰符）：表示块或元素的不同状态、版本或变体。修饰符名附加在块或元素名之后，用两个连字符--连接。

示例

假设有一个导航栏组件，包含几个链接和一个强调的活动链接。

块 (Block) : .nav
元素 (Element) :
- 导航链接: .nav__link
- 活动链接: .nav__link--active
修饰符 (Modifier) :
- 导航栏固定顶部: .nav--fixed

CSS代码示例

css 复制代码

/* Block */
.nav {
  /* 导航栏的基本样式 */
}

/* Element */
.nav__link {
  /* 导航链接的基础样式 */
}

/* Modifier for Element */
.nav__link--active {
  /* 活动链接的特殊样式 */
}

/* Modifier for Block */
.nav--fixed {
  /* 导航栏固定在顶部的样式 */
}

BEM命名法鼓励你按照组件的结构来组织CSS，使得代码更加模块化，易于阅读和维护。通过这种方式，即使是在大型项目中，开发者也能够快速理解各部分的用途和关系。此外，遵循这种命名规则还可以减少选择器的嵌套深度，从而减少样式的优先级问题。