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

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页