8 个需要牢记的 SCSS 最佳实践

过去一周，我有机会浏览一家公司的编码指南，我发现其中一些指南不仅在协作环境中非常有用，而且在开发个人项目时也非常有用。

以下是指南中的八个 SCSS 最佳实践，它们让我重新思考构建 CSS 代码的方式：

注意：以下技巧适用于 SCSS，因此部分技巧可能不适用于纯 CSS。非常感谢@yzoja和@8detect 的提醒！

1. 移动优先

说到响应式设计，人们通常会优先考虑桌面版本，这会让移动端的定制过程变得非常痛苦。我们应该设计出可扩展的设计，而不是为了适应移动设备而塞满各种东西。

不：

.bad {
  // Desktop code

  @media (max-width: 768px) {
    // Mobile code
  }
}

做：

.good {
  // Mobile code

  @media (min-width: 768px) {
    // Desktop code
  }
}

2.设置变量

定义 CSS 变量和混合应该是初始设置的一部分，这可以使项目更易于维护。

根据指南，以下是一些将从变量中受益的常见属性：

border-radius
color
font-family
font-weight
margin（排水沟、网格排水沟）
transition（持续时间，缓解）——考虑混合

3. 避免`#id`和`!important`

和!important都#id被认为过于具体，并且会扰乱 CSS 渲染的顺序，尤其是在协作开发时。

不：

#bad {
  #worse {
     background-color: #000;
  }
}

做：

.good {
  .better {
     background-color: rgb(0, 0, 0);
  }
}

4.避免使用神奇数字

尽量不要因为“能用”就设置任意数字；其他开发人员可能不明白为什么必须将属性设置为如此特定的数字。相反，尽可能使用相对值。

如果您有兴趣，CSS Tricks对为什么魔法数字不好有清晰的解释。

不：

.bad {
  left: 20px;
}

做：

.good {
  // 20px because of font height
  left: ($GUTTER - 20px - ($NAV_HEIGHT / 2));
}

5.描述性命名

按照外观来定义 CSS 选择器很容易，最好能描述出层次结构。

不：

.huge-font {
  font-family: 'Impact', sans-serif;
}

.blue {
  color: $COLOR_BLUE;
}

做：

.brand__title {
  font-family: 'Impact', serif;
}

.u-highlight {
  color: $COLOR_BLUE;
}

6. 零值和单位

这可能取决于个人喜好或特定项目的风格指南，但一致性至关重要。以下规则要求您在零持续时间值上指定单位，但不要在零长度值上指定单位。此外，请在小数点后添加前导零，但小数位不要过多（超过三位）。

不：

.not-so-good {
  animation-delay: 0;
  margin: 0px;
  opacity: .4567;
}

做：

.better {
  animation-delay: 0s;
  margin: 0;
  opacity: 0.4;
}

7. 内联评论

最佳做法是在要描述的属性上方进行注释。此外，请使用内联注释 ( //)，而不是块级注释 ( /* */)，因为块级注释更难取消注释。

不：

.bad {
  background-color: red; // Not commenting on top of property
  /* padding-top: 30px;
  width: 100% */
}

做：

.good {
  // Commenting on top of property
  background-color: red;
  // padding-top: 30px;
  // width: 100%;
}

8.嵌套媒体查询

为了轻松定位媒体查询，建议您将媒体查询保留在声明的根部，而不是将其嵌套在每个选择器内。

不：

.bad {

  &__area {
    // Code

    @media (min-width: 568px) {
      // Code
    }
  }

  &__section {
    // Code

    @media (min-width: 568px) {
      // Code
    }
  }
}

做：

.good {

  &__area {
    // Code
  }

  &__section {
    // Code
  }

  @media (min-width: 568px) {
    &__area {
      // Code
    }

    &__section {
      // Code
    }
  }
}

这些绝不是最佳编码实践的详尽列表，但它们在设计可读性强、可扩展的 Web 应用方面无疑发挥着至关重要的作用。你有没有遵循的 CSS 指南？请在评论区留言告诉我！

文章来源：https://dev.to/liaowow/8-css-best-practices-to-keep-in-mind-4n5h

8 个需要牢记的 SCSS 最佳实践

8 个需要牢记的 SCSS 最佳实践

1. 移动优先

2.设置变量

3. 避免#id和!important

4.避免使用神奇数字

5.描述性命名

6. 零值和单位

7. 内联评论

8.嵌套媒体查询

3. 避免`#id`和`!important`