前端菜鸟一般不知道css可以这样命名

最新推荐文章于 2025-07-31 15:34:48 发布

我们一起学前端

最新推荐文章于 2025-07-31 15:34:48 发布

阅读量690

点赞数

CC 4.0 BY-SA版权

文章标签：前端 css html

本文链接：https://blog.youkuaiyun.com/qq_35577655/article/details/128049231

本文探讨了团队开发中CSS命名冲突的问题，介绍了BEM命名规范，如何通过块（block）、元素（element）和修饰符（modifier）降低冲突，并通过实例展示了BEM的优势，包括清晰的结构逻辑、减少层级查找和提升代码可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到问题

团队开发中css的命名冲突

为css的命名而绞尽脑汁

css的命名五花八门

解决方案

使用规范：BEM

BEM是一种CSS命名规范。

BEM代表 “块（block），元素（element），修饰符（modifier）”]

eg:

.list__item_active{}

__ 双下划线：双下划线用来连接块和块的子元素

_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态

实例对比

//通常我写法

<ul class="box">

<li class="item active">光明之子</li>

<li class="item">冥王之子</li>

</ul>

.box{}

.box .item{}

.box .item.active{}

================================

//BEM写法

<ul class="box">

   <li class="box__item_active">光明之子</li>

   <li class="box__item">冥王之子</li>

</ul>

.box{}

.box__item{}

.box__item_active{}

总结

1.命名冲突