Entwicklungsrichtlinien für CSS und Sass (SCSS).

In diesem Artikel werden hauptsächlich die Front-End-Codierungsspezifikationen (4) vorgestellt – Freunde in Not können sich darauf beziehen

ID und Klassenbenennung

Verwenden Sie immer ID- und Klassennamen, die den Zweck und die Verwendung des Elements widerspiegeln, oder andere gebräuchliche Namen. Statt Schein und obskuren Namen.

Namen, die spezifisch sind und den Zweck des Elements widerspiegeln, sollten bevorzugt werden, da diese am verständlichsten sind und sich am wenigsten ändern können.

Allgemeine Namen sind lediglich alternative Namen für mehrere Elemente. Sie sind mit ihren Geschwisterelementen identisch und haben keine besondere Bedeutung.
Unterscheiden Sie sie so, dass sie eine besondere Bedeutung haben und meist als „Helfer“ benötigt werden.

Obwohl die Semantik von Klassennamen und IDs für die Computeranalyse keine praktische Bedeutung hat,
Semantische Namen sind normalerweise die richtige Wahl, da die von ihnen dargestellten Informationen keine Leistungsbeschränkungen enthalten.

Nicht empfohlen

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

Empfohlen

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

Vermeiden Sie gegebenenfalls die Verwendung von IDs

Im Allgemeinen sollten IDs nicht auf Stile angewendet werden.
ID-Stile können nicht wiederverwendet werden und Sie können ID nur einmal pro Seite verwenden.
Die einzige effektive Verwendung von ID besteht darin, die Position innerhalb einer Webseite oder einer gesamten Website zu bestimmen.
Sie sollten jedoch immer die Verwendung von class anstelle von id in Betracht ziehen, es sei denn, Sie verwenden es nur einmal.

Nicht empfohlen

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

Empfohlen

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

Ein weiteres Argument gegen die Verwendung von IDs ist, dass Selektoren, die IDs enthalten, eine hohe Gewichtung haben.
Ein Selektor, der nur eine ID enthält, hat eine höhere Gewichtung als ein Selektor, der 1000 Klassennamen enthält, was es seltsam macht.

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

Vermeiden Sie Tag-Namen in CSS-Selektoren

Klare, präzise Namen sollten beim Erstellen von Selektoren und verwendet werden semantische Klassennamen. Verwenden Sie keine Tag-Selektoren. Die Wartung ist einfacher, wenn Sie sich nur um Ihre Klassennamen
und nicht um Ihre Codeelemente kümmern.

Aus Sicht der Trennung sollten HTML-Tags/-Semantiken nicht in der Präsentationsebene zugewiesen werden.
Es kann sich um eine geordnete Liste handeln, die in eine ungeordnete Liste geändert werden muss, oder um ein p, das in einen Artikel umgewandelt wird.
Wenn Sie nur aussagekräftige Klassennamen
und keine Elementselektoren verwenden, müssen Sie nur Ihr HTML-Markup ändern, nicht Ihr CSS.

Nicht empfohlen

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

Empfohlen

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

Seien Sie so präzise wie möglich

Viele Front-End-Entwickler verwenden beim Schreiben von Selektorketten keine direkten Unterselektoren (Hinweis: der Unterschied zwischen direkten Unterselektoren und Nachkommenselektoren).
Manchmal kann dies zu schmerzhaften Designproblemen führen und manchmal die Leistung beeinträchtigen.
Allerdings ist dies in jedem Fall eine sehr schlechte Praxis.
Wenn Sie keinen sehr allgemeinen Selektor schreiben, der mit dem Ende des DOM übereinstimmen muss, sollten Sie immer direkte Unterselektoren in Betracht ziehen.

Betrachten Sie das folgende DOM:

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

Das folgende CSS wird auf alle drei Elemente angewendet, die die Titelklasse haben.
Um dann die verschiedenen Stile unter der Titelklasse unter der Inhaltsklasse und der Titelklasse unter der Teaser-Klasse zu lösen, sind präzisere Selektoren erforderlich, um ihre Stile erneut zu schreiben.

Nicht empfohlen

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

Empfohlen

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

Abkürzungseigenschaften

CSS bietet verschiedene Abkürzungseigenschaften (z. B. Schriftart), die nach Möglichkeit verwendet werden sollten, auch wenn nur ein Wert festgelegt ist.

Die Verwendung abgekürzter Attribute ist für die Effizienz und Lesbarkeit des Codes sehr nützlich.

Nicht empfohlen

CSS-Code:

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;

Empfohlen

CSS-Code:

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0 und die Einheit

Lassen Sie die Einheit nach dem Wert „0“ weg. Verwenden Sie keine Einheiten nach einem 0-Wert, es sei denn, es gibt einen Wert.
Nicht empfohlen

CSS-Code:

padding-bottom: 0px;
margin: 0em;

Empfohlen

CSS-Code:

padding-bottom: 0;
margin: 0;

Hex-Schreibweise

Verwenden Sie nach Möglichkeit die 3-stellige Hex-Schreibweise. Gesetz.
Farbwerte ermöglichen diese Darstellung,
Eine kürzere 3-stellige hexadezimale Darstellung.

Verwenden Sie immer kleingeschriebene Hexadezimalzahlen.

Nicht empfohlen

color: #FF33AA;

Empfohlen

color: #f3a;

Trennzeichen für ID und Klassenname

Verwenden Sie einen Bindestrich (Hash), um die Wörter in ID und Klassenname zu trennen. Um das Verständnis der Lektion zu verbessern, verwenden Sie zum Verbinden von Wörtern und Abkürzungen im Selektor keine anderen Zeichen als Bindestriche (auch keine).

Außerdem erkennt die Standardattributauswahl standardmäßig Bindestriche (Bindestriche) als Trennzeichen für Wörter [Attribut|=Wert],
so dass es am besten ist, bei Bindestrichen als Trennzeichen zu bleiben.

Nicht empfohlen

.demoimage {}
.error_status {}

Empfohlen

#video-id {}
.ads-sample {}

Hacks

避免用户代理检测以及CSS“hacks” – 首先尝试不同的方法。通过用户代理检测或特殊的CSS滤镜，变通的方法和 hacks 很容易解决样式差异。为了达到并保持一个有效的和可管理的代码库，这两种方法都应该被认为是最后的手段。换句话说，从长远来看，用户代理检测和hacks
会伤害项目，作为项目往往应该采取阻力最小的途径。也就是说，轻易允许使用用户代理检测和hacks 以后将过于频繁。

声明顺序

这是一个选择器内书写CSS属性顺序的大致轮廓。这是为了保证更好的可读性和可扫描重要。

作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：

结构性属性：
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
表现性属性：
background, border etc.
font, text
不推荐

.box {
  font-family: 'Arial', sans-serif;
  border: 3px solid #ddd;
  left: 30%;
  position: absolute;
  text-transform: uppercase;
  background-color: #eee;
  right: 30%;
  isplay: block;
  font-size: 1.5rem;
  overflow: hidden;
  padding: 1em;
  margin: 1em;
}

推荐

.box {
  display: block;
  position: absolute;
  left: 30%;
  right: 30%;
  overflow: hidden;
  margin: 1em;
  padding: 1em;
  background-color: #eee;
  border: 3px solid #ddd;
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
}

声明结束

为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。

不推荐

css 代码:
.test {
  display: block; height: 100px
}

推荐

css 代码:

.test {
  display: block;
  height: 100px;
}

属性名结束

属性名的冒号后使用一个空格。出于一致性的原因，
属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。

不推荐

css 代码:

h3 {
  font-weight:bold;
}

推荐

css 代码:
h3 {
  font-weight: bold;
}

选择器和声明分离

每个选择器和属性声明总是使用新的一行。

不推荐

css 代码:

a:focus, a:active {
  position: relative; top: 1px;
}

推荐

css 代码:

h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

规则分隔

规则之间始终有一个空行（双换行符）分隔。

推荐

css 代码:

html {
  background: #fff;
}
 
body {
  margin: auto;
  width: 50%;
}

CSS引号

属性选择器或属性值用双引号（””），而不是单引号（”）括起来。
URI值（url()）不要使用引号。

不推荐

css 代码:

@import url('//cdn.com/foundation.css');
 
html {
  font-family: 'open sans', arial, sans-serif;
}
 
body:after {
  content: 'pause';
}

推荐

css 代码:

@import url(//cdn.com/foundation.css);
 
html {
  font-family: "open sans", arial, sans-serif;
}
 
body:after {
  content: "pause";
}

选择器嵌套 (SCSS)

在Sass中你可以嵌套选择器，这可以使代码变得更清洁和可读。嵌套所有的选择器，但尽量避免嵌套没有任何内容的选择器。
如果你需要指定一些子元素的样式属性，而父元素将不什么样式属性，
可以使用常规的CSS选择器链。
这将防止您的脚本看起来过于复杂。

不推荐

css 代码:

// Not a good example by not making use of nesting at all
.content {
  display: block;
}
 
.content > .news-article > .title {
  font-size: 1.2em;
}

不推荐

css 代码:

// Using nesting is better but not in all cases
// Avoid nesting when there is no attributes and use selector chains instead
.content {
  display: block;
 
  > .news-article {
    > .title {
      font-size: 1.2em;
    }
  }
}

推荐

css 代码:

// This example takes the best approach while nesting but use selector chains where possible
.content {
  display: block;
 
  > .news-article > .title {
    font-size: 1.2em;
  }
}

嵌套中引入 空行 (SCSS)

嵌套选择器和CSS属性之间空一行。

不推荐

css 代码:

.content {
  display: block;
  > .news-article {
    background-color: #eee;
    > .title {
      font-size: 1.2em;
    }
    > .article-footnote {
      font-size: 0.8em;
    }
  }
}

推荐

css 代码:

.content {
  display: block;
 
  > .news-article {
    background-color: #eee;
 
    > .title {
      font-size: 1.2em;
    }
 
    > .article-footnote {
      font-size: 0.8em;
    }
  }
}

上下文媒体查询(SCSS)

在Sass中，当你嵌套你的选择器时也可以使用上下文媒体查询。
在Sass中，你可以在任何给定的嵌套层次中使用媒体查询。
由此生成的CSS将被转换，这样的媒体查询将包裹选择器的形式呈现。

这技术非常方便，
有助于保持媒体查询属于的上下文。

第一种方法这可以让你先写你的手机样式，然后在任何你需要的地方
用上下文媒体查询以提供桌面样式。

不推荐

css 代码:

// This mobile first example looks like plain CSS where the whole structure of SCSS is repeated
// on the bottom in a media query. This is error prone and makes maintenance harder as it's not so easy to relate
// the content in the media query to the content in the upper part (mobile style)
 
.content-page {
  font-size: 1.2rem;
 
  > .main {
    background-color: whitesmoke;
 
    > .latest-news {
      padding: 1rem;
 
      > .news-article {
        padding: 1rem;
 
        > .title {
          font-size: 2rem;
        }
      }
    }
 
    > .content {
      margin-top: 2rem;
      padding: 1rem;
    }
  }
 
  > .page-footer {
    margin-top: 2rem;
    font-size: 1rem;
  }
}
 
@media screen and (min-width: 641px) {
  .content-page {
    font-size: 1rem;
 
    > .main > .latest-news > .news-article > .title {
      font-size: 3rem;
    }
 
    > .page-footer {
      font-size: 0.8rem;
    }
  }
}

推荐

css 代码:

// This is the same example as above but here we use contextual media queries in order to put the different styles
// for different media into the right context.
 
.content-page {
  font-size: 1.2rem;
 
  @media screen and (min-width: 641px) {
    font-size: 1rem;
  }
 
  > .main {
    background-color: whitesmoke;
 
    > .latest-news {
      padding: 1rem;
 
      > .news-article {
        padding: 1rem;
 
        > .title {
          font-size: 2rem;
 
          @media screen and (min-width: 641px) {
            font-size: 3rem;
          }
        }
      }
    }
 
    > .content {
      margin-top: 2rem;
      padding: 1rem;
    }
  }
 
  > .page-footer {
    margin-top: 2rem;
    font-size: 1rem;
 
    @media screen and (min-width: 641px) {
      font-size: 0.8rem;
    }
  }
}

嵌套顺序和父级选择器(SCSS)

当使用Sass的嵌套功能的时候，
重要的是有一个明确的嵌套顺序，
以下内容是一个SCSS块应具有的顺序。

当前选择器的样式属性
父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
伪类元素 (:before and :after)
父级选择器的声明样式 (.selected, .active, .enlarged etc.)
用Sass的上下文媒体查询
子选择器作为最后的部分
The following example should illustrate how this ordering will achieve a clear structure while making use of the Sass parent selector.

Recommended

css 代码:

.product-teaser {
  // 1. Style attributes
  display: inline-block;
  padding: 1rem;
  background-color: whitesmoke;
  color: grey;
 
  // 2. Pseudo selectors with parent selector
  &:hover {
    color: black;
  }
 
  // 3. Pseudo elements with parent selector
  &:before {
    content: "";
    display: block;
    border-top: 1px solid grey;
  }
 
  &:after {
    content: "";
    display: block;
    border-top: 1px solid grey;
  }
 
  // 4. State classes with parent selector
  &.active {
    background-color: pink;
    color: red;
 
    // 4.2. Pseuso selector in state class selector
    &:hover {
      color: darkred;
    }
  }
 
  // 5. Contextual media queries
  @media screen and (max-width: 640px) {
    display: block;
    font-size: 2em;
  }
 
  // 6. Sub selectors
  > .content > .title {
    font-size: 1.2em;
 
    // 6.5. Contextual media queries in sub selector
    @media screen and (max-width: 640px) {
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }
  }
}

更多CSS 和 Sass (SCSS) 开发规范相关文章请关注PHP中文网！