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,使得代码更加模块化,易于阅读和维护。通过这种方式,即使是在大型项目中,开发者也能够快速理解各部分的用途和关系。此外,遵循这种命名规则还可以减少选择器的嵌套深度,从而减少样式的优先级问题。

相关推荐
遂心_1 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
IT_陈寒1 小时前
JavaScript 性能优化:5 个被低估的 V8 引擎技巧让你的代码快 200%
前端·人工智能·后端
岛风风2 小时前
关于手机的设备信息
前端
ReturnTrue8682 小时前
nginx性能优化之Gzip
前端
w_y_fan3 小时前
Flutter 滚动组件总结
前端·flutter
wuli金居哇3 小时前
我用 Turborepo 搭了个 Monorepo 脚手架,开发体验直接起飞!
前端
Asort3 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手3 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码3 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码3 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js