用户登录

BEM 是一种 CSS 类的命名方法,Taro UI 里用了这种命名方法 .. B 指的是 Block 就是区块 .. E 是 Element ,表示元素 .. M 是 Modifier ,修饰符 ..

一个界面组件的样式你可以把它分成这三个部分 .. 比如一个卡片组件 .. 这个组件总体叫 card .. 这个 card 也就表示一个 Block ,就是区块 ..

组件里面包含了几个部分,比如卡片的头部,图像,主体内容等等,这些都是 card 这个区块里的元素 .. 也就是命名这些东西的时候,你可以用 card 作为前缀,因为 card 是区块 .. 区块跟元素之间用两个下划线连接 .. 比如 card__image,表示的就是卡片里的图像 .. 用这个类去设计卡片里的图像的样式 ..

元素或者区块后面可以跟着修饰符 .. 这些修饰符可以改变元素的某些行为或者样式 .. 连接修饰符用两个小横线 .. 比如 card__image--rounded .. 这个类名字最后面这部分就是修饰符 .. 你可以用这个类为卡片里的图像添加圆角的效果 ..

理解 CSS 的 BEM 命名方式《 电商小程序案例:购物车编辑 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点