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

相关推荐
笔尖的记忆6 分钟前
【前端架构和框架】react组件化&数据流
前端·面试
zhangzelin88814 分钟前
TypeScript入门指南:JavaScript的类型化超集
前端·javascript·其他·typescript
lichenyang45322 分钟前
流式聊天界面实现解析:从零到一构建实时对话体验
前端
天蓝色的鱼鱼22 分钟前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack
软件技术NINI33 分钟前
html css js网页制作成品——化妆品html+css+js (7页)附源码
javascript·css·html
用户8417948145634 分钟前
vxe-table 实现列头授权自定义插槽模板,自定义输入框
前端
im_AMBER38 分钟前
Web 开发 24
前端·笔记·git·学习
小小前端_我自坚强41 分钟前
前端算法相关详解
前端·算法
小小前端_我自坚强1 小时前
UniApp 微信小程序流水线发布全流程
前端·架构
小小前端_我自坚强1 小时前
vue提高技术 高级语法相关
前端·vue.js·前端框架