CSS — BEM 命名规范
CSS 规范 命名
2023-09-14 09:00:16 时间
推荐阅读: https://juejin.im/post/5b925e616fb9a05cdd2ce70d
1 什么是 BEM 命名规范
- Bem 是块(block)、元素(element)、修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论。
- 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。
__ 双下划线:双下划线用来连接块和块的子元素
-- 双中划线:双中划线用来描述一个块或者块的子元素的一种状态
- BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密。
1.1 BEM 命名模式
BEM 命名约定的模式是:
.block {} .block__element {} .block--modifier {}
- 每一个块(block)名应该有一个命名空间(前缀)
block
代表了更高级别的抽象或组件。block__element
代表 .block 的后代,用于形成一个完整的 .block 的整体。block--modifier
代表 .block 的不同状态或不同版本。 使用两个连字符和下划线而不是一个,是为了让你自己的块可以用单个连字符来界定。
相关文章
- css流程图、步骤图,流程线与环节分别实现,支持单环节、多环节情况。scss生成CSS
- Less:优雅的写CSS代码
- Discuzx系统 CSS 编码规范,CSS属性书写顺序
- CSS文件动态加载(续)—— 残酷的真相
- 一些上流的CSS3图片样式 | CSS | 前端观察
- CSS — BEM 命名规范
- [CSS3] Understand CSS Selector Specificity
- CSS 规范
- animate CSS动画程序接口(仅Chrome可用)
- [CSS] Purgecss to remove unused css
- DIV+CSS导航学习笔记
- [css]演示:纯CSS实现的右侧底部简洁悬浮效果
- Angular界面元素CSS样式的条件式施加方式
- CSS中calc, support, media各自的含义及用法?
- DIV+CSS两种盒子模型(W3C盒子与IE盒子)
- css position: absolute、relative详解
- 【CSS】css转换、css过渡、css动画_09