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

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

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

BEM(Block, Element, Modifier)命名约定

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

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

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

示例

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

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

CSS代码示例

css 复制代码
/* Block */
.nav {
  /* 导航栏的基本样式 */
}

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

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

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

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

相关推荐
GISer_Jing2 分钟前
不定高虚拟列表性能优化全解析
前端·javascript·性能优化
Predestination王瀞潞16 分钟前
WEB前端技术基础(第三章:css-网页美化的衣装-上)
前端·css
鹏多多20 分钟前
深度解析React中useEffect钩子的使用
前端·javascript·react.js
超级大只老咪21 分钟前
CSS基础语法
前端
冰暮流星22 分钟前
css之box-sizing属性
前端·javascript·css
倚肆25 分钟前
CSS ::before 和 ::after 伪元素详解
前端·css
华洛28 分钟前
聊一下如何稳定的控制大模型的输出格式
前端·产品经理·ai编程
你听得到1133 分钟前
卷不动了?我写了一个 Flutter 全链路监控 SDK,从卡顿、崩溃到性能,一次性搞定!
前端·flutter·性能优化
IT_陈寒36 分钟前
Python 3.12震撼发布:5大性能优化让你的代码提速50%,第3点太香了!
前端·人工智能·后端
恋猫de小郭1 小时前
今年各大厂都在跟进的智能眼镜是什么?为什么它突然就成为热点之一?它是否是机会?
android·前端·人工智能