尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
CSS BEM 命名规范|组件化样式分层权威指南
一、核心认知BEM 是一套命名约定不是语法全称BBlock 块独立、可复用的组件模块EElement 元素块内部从属节点不能脱离块单独使用MModifier 修饰符描述块 / 元素的状态、变体、外观差异目标 消除样式命名歧义、降低选择器权重、避免深层嵌套、方便团队协作维护。分隔符约定业界主流块 __ 元素双下划线__块 / 元素 -- 修饰符双短横线--多单词使用单短横线-连接✅ 格式模板block block__element block--modifier block__element--modifier二、逐部分拆解1. Block块一个独立功能组件自身有完整语义可以单独复用。命名描述功能不要描述样式/* ✅ 好语义化 */ .card button-group nav-header /* ❌ 差描述外观 */ .red-box big-title块内部可以包含多个元素。2. Element元素属于某个块的子节点不能脱离父块单独使用。 用__和块连接。.card__title .card__content .card__footer❌ 禁止链式多层元素card__content__text元素只允许一层从属深层结构继续当作元素不要无限嵌套。3. Modifier修饰符用来标记状态、样式变体、尺寸。--连接块或者元素。/* 块的修饰符 */ .card--dark .card--borderless /* 元素的修饰符 */ .card__title--primary .card__title--small修饰符不单独存在必须依附在块 / 元素上。 修饰符只追加差异化样式不要重写全部样式。三、标准示例HTMLdiv classcard card--dark h3 classcard__title card__title--primary标题/h3 div classcard__desc描述文本/div /divCSS/* 基础块 */ .card { padding: 16px; border-radius: 8px; } /* 块修饰符 */ .card--dark { background: #1d2129; color: #fff; } /* 块内元素 */ .card__title { font-size: 18px; margin-bottom: 8px; } /* 元素修饰符 */ .card__title--primary { color: #409eff; } .card__desc { font-size: 14px; color: #666; }四、搭配预处理器Less / SCSS写法.card { padding: 16px; --dark { background: #1d2129; } __title { font-size: 18px; --primary { color: #409eff; } } }注意嵌套只是语法糖编译出来依然是标准 BEM 类名不会生成高权重后代选择器。五、关键规则 避坑不要用层级选择器❌.card .title {}容易权重混乱优先用 BEM 类名元素不能跨块nav__card-title错误card 是独立块应该card__title修饰符只做增量样式 不要把基础样式全部写在修饰符内命名看语义不看 DOM 结构 DOM 嵌套很深类名依然保持一层block__element通用工具类不属于 BEM 间距、文字对齐这类工具类单独抽离不和 BEM 混在一起div classcard card--dark mt-12mt-12是工具类不属于 BEM 体系。六、适用场景与边界✅ 适合中大型后台项目、组件库、团队协作项目、长期维护页面 ❌ 没必要简单 Demo、一次性活动页、页面极其简单的场景BEM 不是强制标准是权衡方案 小项目写起来略长但换来极高可维护性。七、和其他命名方案对比原生随意命名简短极易冲突、难维护BEM类名长语义清晰权重扁平适合团队CSS Module编译哈希解决冲突但可读性差不方便直接覆盖调试八、工程落地规范统一分隔符项目内不要混用多种 BEM 变体多单词使用短横线search-form__input-wrap状态优先用修饰符少用is-xxx状态类团队可统一约定公共通用组件块名全局唯一避免跨页面重名冲突
RELATED

相关推荐

盘点 8 款电商 AI 作图工具:电商设计运营必备,搞定双十一  双十二大促物料

盘点 8 款电商 AI 作图工具:电商设计运营必备,搞定双十一 双十二大促物料

双十一、双十二马上连着来,做电商设计和运营的小伙伴又要开启高强度赶物料模式了。短时间里要批量出大促海报、商品主图、详情配图,还要做短视频分镜、种草短视频。不光得准备好几套创意方案对比,美工和运营之间来回改稿也是常态,…

📅 2026/10/24 5:35:58
标签:计算机组成原理 期末复习 存储器系统 考点整理

标签:计算机组成原理 期末复习 存储器系统 考点整理

前言 本篇笔记参考教材:计算机组成原理,期末备考专用。 第三章核心内容为存储器系统,本章分值很高,题型包含选择、填空、简答、计算题。重点掌握存储器层次结构、各类存储芯片特点、地址线数据线引脚含义。 3.1 存储器概述 3.1.1 …

📅 2026/10/24 5:30:58
交换机网络环路导致MAC漂移及业务中断故障处理

交换机网络环路导致MAC漂移及业务中断故障处理

关键字环路、MAC漂移、广播风暴、环路检测、CPU升高产品S5735-L24T4S-A故障类型配置类故障(网络环路)应用场景故障处理问题描述组网概述:核心交换机S12700E通过Eth-Trunk下联多台接入交换机S5735-L24T4S-A,接入交换机所有用户端口…

📅 2026/10/24 5:30:58
MORE NEWS

更多资讯

📰

曼哈顿距离与欧几里得距离:选型指南与实战对比

曼哈顿距离与欧几里得距离——这对概念在我实际的项目里踩过的坑比想象中多得多。最近在做一个基于位置特征的相似度匹配系统,数据点散布在高维特征空间里,一开始无脑选了欧几里得距离,结果召回结果差到怀疑人生。后来逐个排查才发现&#xf…

📰

Tesla P40转WDDM+GTX 750亮机卡玩原神实战

手里有一张24GB显存的Tesla P40,还有一块吃灰的GTX 750,显示器只有一根HDMI线——这大概是很多折腾党都遇到过的尴尬局面。P40是数据中心计算卡,算力不弱、显存管够,二手价格也香,但它身上一个视频接口都没有&#xff…

📰

Hadoop+Spark+Python淘宝商品数据分析可视化系统设计与实现

如果你的毕业设计题目是“基于Hadoop、Spark、Python的淘宝商品数据分析与商品销售数据分析可视化系统”,先恭喜你:这个题目下限很低,上限也很低。它最稳妥的完成路径,是把Hadoop当存储、Spark当计算引擎、Python当ETL和接口层、E…

📰

FANUC三点圆分中宏程序:原理、代码与实操避坑

干机加工的老师傅应该都有这种经历:法兰盘、轴承座、圆盘类零件一到手,找圆心就成了最磨人的一道工序。以前车间里最原始的办法是拉表,磁力表座吸在主轴上,百分表顶住内孔壁,摇手轮一点点看表针摆动,碰上直…

📰

快慢指针法高效判断回文链表

1. 回文链表问题背景与核心挑战判断链表是否为回文结构是算法面试中的经典问题,尤其在LeetCode Hot100题库中被标记为Easy难度。表面上看这似乎是个简单问题,但链表结构的特殊性让它比数组版本的回文判断更具技巧性。链表不像数组能直接通过索引随机访问…

📰

三相交流异步电机模糊PID自适应控制:原理、仿真与参数整定

1. 三相交流异步电机为什么需要“自适应”,普通PID哪里不够用1.1 电机模型的非线性与强耦合:为什么一组固定参数无法通吃所有工况三相交流异步电机在工业现场太常见了,风机、水泵、传送带、卷绕机、电梯曳引机,到处都有它的身影。…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬