css命名规范: BEM 的命名法

 

整理自:前端早读课【第1183期】这些 CSS 命名规范,将省下你大把调试时间

试图解决 3 类问题:

仅从名字就能知道一个 CSS 选择器具体做什么

从名字能大致清楚一个选择器可以在哪里使用

从 CSS 类的名称可以看出它们之间的联系

不知你是否见过这样的类名:

.nav--secondary {
...
}
.nav__header {
...
}

 

这就是 BEM 命名规范。

这个火柴人代表了一个组件,比如说一个设计区块。

BEM 这里的 B 意为『区块』('Block')。

在实际中,这里『区块』可以表示一个网站导航、页眉、页脚或者其他一些设计区块。

根据上述解释,那么这个组件的理想类名称即是 stick-man。

组件的样式应写成这样:

.stick-man {
}

 

转载于:https://www.cnblogs.com/yaoyao-sun/p/10365367.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值