在本规范中,以双下划线 __ 来作为块和元素的间隔,以单下划线 _ 来作为块和修饰器 或 元素和修饰器 的间隔,以中划线 - 来作为 块|元素|修饰器 名称中多个单词的间隔
标题
搜索 搜索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 {}