CSS BEM书写规范

CSS BEM书写规范

一、BEM 是块(block)、元素(element)、修饰符(modifier)的简写

  • – 中划线:仅作为连字符使用
  • — 双中划线:表示不同状态或不同版本
  • __ 双下划线:双下划线用来连接块和块的子元素

示例

BEM示例

    li class "card_item card_item–active" 手机 /li li class "card_item" 移动市场 /li li class "card_item" 科技 /li

p class "card_desc" 外媒表示,苹果正在对一些技术难点进行技术攻关,主要是保障屏 a class "card_link" href "#" 详细内容 /p .card { padding: 0 5rem; width: 350px; }.card_img { display: block; height: 100px; width: 100%; background: url(/images/puppies.jpg); background-size: contain;}.card_content { padding: 1.5em; background: white; }.card_list { list-style-type: none; display: flex; margin: θ; padding: 0; }.card_item–active { background: #d4d4d4; font-weight: bold; }.card_link { background: #2c8973; color: white; text-decoration: none; padding: 0.5em 1em; border-radius:0.5em; display: inline-block; margin-top: 0.5em;}

郑重声明:本文内容及图片均整理自互联网,不代表本站立场,版权归原作者所有,如有侵权请联系管理员(admin#wlmqw.com)删除。
(0)
用户投稿
上一篇 2022年6月18日
下一篇 2022年6月18日

相关推荐

联系我们

联系邮箱:admin#wlmqw.com
工作时间:周一至周五,10:30-18:30,节假日休息