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

时间：2017-04-08

ID and class naming

ID和class(类)名总是使用可以反应元素目的和用途的名称，或其他通用名称。代替表象和晦涩难懂的名称。

应该首选具体和反映元素目的的名称，因为这些是最可以理解的，而且发生变化的可能性最小。

通用名称只是多个元素的备用名，他们兄弟元素之间是一样的，没有特别意义。
区分他们，使他们具有特殊意义，通常需要为“帮手”。

尽管class(类)名和ID 的语义化对于计算机解析来说没有什么实际的意义，
语义化的名称通常是正确的选择，因为它们所代表的信息含义，不包含表现的限制。

不推荐

.fw-800 {
  font-weight: 800;
}
 
.red {
  color: red;
}

推荐

.heavy {
  font-weight: 800;
}
 
.important {
  color: red;
}

合理的避免使用ID

一般情况下ID不应该被应用于样式。
ID的样式不能被复用并且每个页面中你只能使用一次ID。
使用ID唯一有效的是确定网页或整个站点中的位置。
尽管如此，你应该始终考虑使用class，而不是id，除非只使用一次。

不推荐

#content .title {
  font-size: 2em;
}

推荐

.content .title {
  font-size: 2em;
}

另一个反对使用ID的观点是含有ID选择器权重很高。
一个只包含一个ID选择器权重高于包含1000个class(类)名的选择器，这使得它很奇怪。

// 这个选择器权重高于下面的选择器
#content .title {
  color: red;
}
 
// than this selector!
html body div.content.news-content .title.content-title.important {
  color: blue;
}

CSS选择器中避免标签名

当构建选择器时应该使用清晰，准确和有语义的class(类)名。不要使用标签选择器。如果你只关心你的class(类)名
，而不是你的代码元素，这样会更容易维护。

从分离的角度考虑,在表现层中不应该分配html标记/语义。
它可能是一个有序列表需要被改成一个无序列表，或者一个div将被转换成article。
如果你只使用具有实际意义的class(类)名，
并且不使用元素选择器，那么你只需要改变你的html标记，而不用改动你的CSS。

不推荐

div.content > header.content-header > h2.title {
  font-size: 2em;
}

推荐

.content > .content-header > .title {
  font-size: 2em;
}

尽可能的精确

很多前端开发人员写选择器链的时候不使用直接子选择器（注：直接子选择器和后代选择器的区别）。
有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。
然而，在任何情况下，这是一个非常不好的做法。
如果你不写很通用的，需要匹配到DOM末端的选择器，你应该总是考虑直接子选择器。

考虑下面的DOM:

<article class="content news-content">
  <span class="title">News event</span>
  <div class="content-body">
    <div class="title content-title">
      Check this out
    </div>
 
    <p>This is a news article content</p>
 
    <div class="teaser">
      <div class="title">Buy this</div>
      <div class="teaser-content">Yey!</div>
    </div>
  </div>
</article>

下面的CSS将应用于有title类的全部三个元素。
然后，要解决content类下的title类和 teaser类下的title类下不同的样式，这将需要更精确的选择器再次重写他们的样式。

不推荐

.content .title {
  font-size: 2rem;
}

推荐

.content > .title {
  font-size: 2rem;
}
 
.content > .content-body > .title {
  font-size: 1.5rem;
}
 
.content > .content-body > .teaser > .title {
  font-size: 1.2rem;
}

缩写属性

CSS提供了各种缩写属性（如 font 字体）应该尽可能使用，即使在只设置一个值的情况下。

使用缩写属性对于代码效率和可读性是有很有用的。

不推荐

css 代码:

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

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

相关文章

最新文章