SCSS编写规范（三）

大圣归来~

已于 2024-04-24 11:14:49 修改

阅读量148

点赞数 3

分类专栏：前端学习笔记文章标签： scss rust 前端

于 2024-04-24 10:53:48 首次发布

本文链接：https://blog.csdn.net/rreamigofgirls/article/details/138152096

版权

前端学习笔记专栏收录该内容

36 篇文章 0 订阅

订阅专栏

遵守BEM规则

- 中划线：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__ 双下划线：用来连接块和块的子元素

-- 双中划线：用来代表块的不同状态或不同版本
_ 单下划线：用来描述一个块或者块的子元素的一种状态

.block {} 代表最高级的组件

.block__element {} 代表 .block 的后代，用于形成一个完整的 .block 的整体。

.block--modifier {} 代表 .block 块元素的不同状态或不同版本。

使用BEM命名法

<div class="article">
    <div class="article__body">
        <div class="tag"></div>
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </div>
</div>

推荐写法风格

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

//对应的HTML结构如下：

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>

推荐使用sass等css预处理

form模块则下面是该模块的相关样式
.form {
  &--theme-xmas {
    //代表 .form 的不同状态或不同版本。 使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定。
    background: blue;
  }
  &--simple {
    background: blue;
  }
  &__input {
    //代表 .form 的后代，.form中的input组件
    background: blue;
  }
  &__submit {
    //.form 的后代，.form中的submit组件的不同状态（disabled状态）
    background: blue;
    &--disabled {
      background: blue;
    }
  }
}

代码实战练习:

  <div class="wrapper">
    <div class="wrapper__container">
      <div class="wrapper__container__box"></div>
    </div>
  </div>

<style lang="scss" scoped>
.wrapper {
  background-color: #999;
  width: 500px;
  height: 500px;
  &__container {
    background-color: #f40;
    width: 100px;
    height: 100px;
    &__box {
      height: 50px;
      width: 50px;
      background-color: #987;
    }
  }
}
</style>