使用BEM命名规范来组织CSS代码

使用BEM命名规范,CSS代码的组织如块(Block)、元素(Element)和修饰器(Modifier)的组合,使得HTML选择器结构清晰,便于维护,但可能因名字冗长而稍显繁琐。BEM规则中,块-元素间用双下划线 '__' 分隔,块-修饰器或元素-修饰器用单下划线 '_',单词间用中划线 '-' 连接。每个BEM选择器应保持单一层次...
使用BEM命名规范来组织CSS代码
使用BEM命名规范,CSS代码的组织如块(Block)、元素(Element)和修饰器(Modifier)的组合,使得HTML选择器结构清晰,便于维护,但可能因名字冗长而稍显繁琐。BEM规则中,块-元素间用双下划线 '__' 分隔,块-修饰器或元素-修饰器用单下划线 '_',单词间用中划线 '-' 连接。每个BEM选择器应保持单一层次,修饰器需与对应块或元素配合使用,避免孤立使用。在CSS中,尽量仅使用类名选择器,避免ID和标签名,确保嵌套不超过2层,以提升效率和代码复用性,降低耦合度。例如,通过块的特定状态调整内部元素时,BEM方法就显得尤为重要。虽然BEM结构清晰,但可能导致代码冗余。为减少重复,利用预编译语言的特性,如@include和@extend,能更有效地编写代码。2024-09-04
mengvlog 阅读 9 次 更新于 2025-06-20 01:21:23 我来答关注问题0
  • 使用BEM命名规范,CSS代码的组织如块(Block)、元素(Element)和修饰器(Modifier)的组合,使得HTML选择器结构清晰,便于维护,但可能因名字冗长而稍显繁琐。BEM规则中,块-元素间用双下划线 '__' 分隔,块-修饰器或元素-修饰器用单下划线 '_',单词间用中划线 '-' 连接。每个BEM选择器应保持单一层次...

  •  翡希信息咨询 CSS之BEM命名规范

    CSS中的BEM命名规范是一种组件化的设计方式,旨在提高代码的可维护性和团队协作效率。以下是关于BEM命名规范的详细解释:1. 块 定义:块是功能独立的组件,如网页上的一个独立部分。 命名规则:每个块的名称必须唯一,通常由两个或更多单词组成,单词之间通过短横线连接,如.head表示页面顶部。 特性:块...

  •  翡希信息咨询 在Vue的CSS中,我为何放弃scoped和module,而选择BEM命名法作为前端CSS规范

    综上所述,选择BEM命名法作为前端CSS规范,能够更有效地避免样式污染,形成统一的命名规范,提升代码质量和编码效率,同时也有助于项目管理和团队协作。

  •  文暄生活科普 在Vue的CSS中,我为何放弃scoped和module,而选择BEM命名法作为前端CSS规范

    scoped和module解决部分问题,但过度依赖导致类名单一,脱离Vue后问题凸显。选择BEM,避免样式污染,形成规范,有益项目和职业生涯。坚定BEM思想,形成命名规范,确保代码质量。下文将详细讲解如何运用BEM命名法,提升编码效率和项目管理。

  •  文暄生活科普 BEM命名规范

    CSS的命名规范,亦称为BEM规范,旨在结束混乱的命名方式,实现一个语义化的CSS命名方式。BEM由三个单词的首字母缩写组成:Block(块)代表更高层次的抽象或组件,Element(元素)是Block的后代,以及Modifier(修饰)代表不同状态的修饰符。命名方法:通过BEM的命名规范,我们可以实现一个清晰的描述。从上面...

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部