一、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;
}