前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范

下面是关于“前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范”的完整攻略。

目录

• 命名规范
• 代码格式
• 注释规范
• SCSS 规范
• 示例说明

命名规范

1. 选择器和属性命名使用小写字母 : 所有的选择器（class和id）和属性名都应当使用小写字母。

2. 共同前缀 : 对于属于同一组件或者定制化组件的样式，使用共同的前缀，以区别于其他样式。

3. 中划线（-）连接符 : 在CSS类选择器和ID选择器中，使用中划线连接符，以清晰表明单词的分隔。

4. 语义化 : 使用简单、清晰、有语义的名称，不使用具备歧义或者计算机专用的缩写和简称。

代码格式

1. 缩进 : 使用2个空格进行缩进，而不是使用制表符。

2. 分号 : 在CSS声明的末尾始终加上分号。

3. 空格 : 属性值前一定要有一个空格，以增加可读性。

4. 每行样式数不超过1个 : 为了提高代码的可读性，每行不要超过一个样式。

注释规范

1. 组件注释 : 用注释说明该部分的作用，命名，使用方式等，最好使用多行注释。

2. 行内注释 : 行内注释使用双斜线（//），表示注释说明该行的属性或者作用。

3. 结构注释 : 使用注释说明这一部分的含义（如容器）。

SCSS 规范

1. 使用变量 : 在SCSS中，使用变量可以提高代码的复用性和易维护性。

2. 使用嵌套 : 使用嵌套可以简化层级结构，提高代码可读性。

3. Mixin 和 Include : Mixin和Include是SCSS的较为重要的特性，可以封装一些常见的样式。

示例说明

下面是两个示例说明，用于展示如何应用上面所讲的规范。

示例 1

<div class="home-page">
  <div class="home-page-header">
    <h1>Welcome to my website</h1>
  </div>
  <div class="home-page-content">
    <p>This is a paragraph</p>
  </div>
</div>

.home-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  &-header {
    margin-bottom: 20px;

    h1 {
      font-size: 24px;
      font-weight: bold;
    }
  }

  &-content {
    p {
      font-size: 16px;
      font-weight: normal;
    }
  }
}

示例 2

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4">
      <p>This is a paragraph</p>
    </div>
    <div class="col-sm-6 col-md-8">
      <img src="example.jpg" alt="">
    </div>
  </div>
</div>

.container {
  max-width: 960px;
  margin: 0 auto;

  .row {
    display: flex;
    flex-wrap: wrap;
  }

  .col-sm-6 {
    width: 50%;
  }

  .col-md-4 {
    width: 33.33%;
  }

  .col-md-8 {
    width: 66.67%;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}

以上就是关于“前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范”的完整攻略。希望对您有所帮助。