用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 {}