用BEM命名规范组织CSS代码-优快云博客

本文介绍了BEM命名方法的应用及如何通过优化CSS选择器来提高样式文件的效率和复用性，减少选择器间的耦合度。文中详细解释了如何利用双下划线__和单下划线_来区分块、元素和修饰符，并给出了具体的样式示例。

在本规范中，以双下划线 __ 来作为块和元素的间隔，以单下划线 _ 来作为块和修饰器或元素和修饰器的间隔，以中划线 - 来作为块|元素|修饰器名称中多个单词的间隔

标题

搜索搜索1 搜索

    <!-- 块中可嵌套着另一个块 -->
    <p class="my-img">
        <img class="my-img__logo" src="abc.png" alt="image" title="image">
    </p>
     
</div>
复制代码

.................................... 在样式文件中，仅以类名作为选择器，不使用ID或标签名来约束选择器，且CSS（或者SCSS编译后的CSS）中的选择器嵌套不超过2层，增加效率和复用性，减少选择器之间的耦合度 ...................................................................... .search-form { position: relative; }

.search-form__input { font-size: 12px; }

.search-form__button_hover {}

/* 避免：避免使用不必要的嵌套（此处只是简单的嵌套，没有必要） */ .search-form__content-left .search-form__input {}

/* 稍好的嵌套（此处是在块的theme1修饰器下的子元素，某些时候有必要） */ .search-form_theme1 .search-form__input {}

/* 错误：使用了标签 */ button.search-form__button {} .search-form button {}