什么是BEM | Nicander知识小站

[](https://zhida.zhihu.com/search?content_id=115289000&content_type=Article&match_order=1&q=Block&zhida_source=entity)[](https://zhida.zhihu.com/search?content_id=115289000&content_type=Article&match_order=1&q=Element&zhida_source=entity)[](https://zhida.zhihu.com/search?content_id=115289000&content_type=Article&match_order=1&q=Modifier&zhida_source=entity)[](https://zhida.zhihu.com/search?content_id=115289000&content_type=Article&match_order=1&q=Yandex&zhida_source=entity)

css

.block{}
.block__element{}
.block--modifier{}
.block__element{}--modifier{}

````````````

css

<div class="top">
    <form class="search-form">搜索</form>
</div>
<div class="bottom">底部</div>

````````````

css

/*错误写法*/
.top .search-form{...}  /*表示只有在top块内的search-form块才会应用此CSS样式*/
.bottom{}

````

css

/*正确写法*/
.top{...}
.bottom{}
.search-form{...}

css

<div class="top">
    <!--top块中的search-for块-->
    <form class="search-form">
        <!--在search-form块中的input元素-->
        <input class="search-form__input"> 
        <!--在search-form块中的button元素-->
        <button class="search-form__button">搜索按钮</button>
    </form>
</div>

``````

css

.search-form .search-form__input{...}
.search-form .search-form__button{...}

plain

<div class="banner__btn">
    <button class=".button .banner__btn--red"></button>  
    <button class=".button .banner__btn--green"></button>
    <button class=".button .banner__btn--blue"></button>   
    <button class=".button .banner__btn--yellow"></button>       
</div>

plain

.banner__btn--red { background-color: red; }
.banner__btn--green { background-color: green; }
.banner__btn--blue { background-color: blue; }
.banner__btn--yellow { background-color: yellow; }

css

.f16{
    font-size:16px;
}
.f18{
    font-size:18px;
}

css

<!-- top 块 -->
<div class="top">
    <!-- search-form块混合top块的search-form元素 -->
    <form class="search-form top__search-form">搜索</form>
</div>

``````

css

.search-form .search-form__input{}
.nav_content_dark .nav_item{}

css

<div>
    <button class="btn">正确</button>
    <button class="btn">错误</button>
</div>

.btn{
    font-size:16px;
    color:white;
    border:none;
    padding:10px 8px;
    display: inline-block;
    background-color:green;
}

````

css

<div>
    <button class="btn">正确</button>
    <button class="btn btn--error">错误</button>
</div>

.btn{
    font-size:16px;
    color:white;
    border:none;
    padding:10px 8px;
    display: inline-block;
    background-color:green;
}
.btn--error{
    background-color:red;
}