Google HTML/CSS-Styleguide

Dieser Artikel stellt die von Google empfohlenen HTML- und CSS-Formatierungskonventionen vor, um gute persönliche Programmiergewohnheiten zu etablieren.

Allgemeine Stilregeln

Lassen Sie den Protokollteil von URLs für Bilder, Styles, Skripte und andere Mediendateien weg (http:,https:), es sei denn, die Datei ist nicht über beide Protokolle verfügbar. Dieses Schema wird als protokollrelative URL bezeichnet. Der Vorteil ist, dass der Browser die Seitenressourcen mit demselben Protokoll anfordert, unabhängig davon, ob Sie über HTTPS oder HTTP auf die Seite zugreifen, und es können auch einige Bytes eingespart werden.

<!-- 不推荐 -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- 推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

/* 不推荐 */
.example {
  background: url("https://www.google.com/images/example");
}
/* 推荐 */
.example {
  background: url("//www.google.com/images/example");
}

Allgemeine Formatierungsregeln

Einrückung

Rücken Sie jeweils um 2 Leerzeichen ein. Verwenden Sie keine Tabs und mischen Sie Tabs und Leerzeichen nicht bei der Einrückung.

<ul>
  <li>Fantastic
  <li>Great
</ul>
.example {
  color: blue;
}

Groß-/Kleinschreibung

Verwenden Sie nur Kleinbuchstaben für Folgendes: HTML-Elementnamen, Attribute, Attributwerte (außer Text/CDATA), CSS-Selektoren, Eigenschaften und Eigenschaftswerte.

<!-- 不推荐 -->
<A HREF="/">Home</A>
<!-- 推荐 -->
<img src="google.png.html" alt="Google">
/* 不推荐 */
color: #E5E5E5;
/* 推荐 */
color: #E5E5E5;

Nachgestellte Leerzeichen

<!-- 不推荐 -->
<p>What?_
<!-- 推荐 -->
<p>Yes please.

Allgemeine Meta-Regeln

Kodierung

Geben Sie die Kodierung in HTML über <meta charset="utf-8"> an. In CSS muss sie nicht angegeben werden, da UTF-8 die Standardeinstellung ist.

Kommentare

Verwenden Sie Kommentare, um Code zu erklären: die enthaltenen Module, seine Funktionalität und seine Vorteile.

Aufgabenpunkte

Verwende TODO, um To-do-Einträge zu markieren, anstatt anderer Markierungen wie @@.

<!-- TODO: remove optional tags -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

HTML-Stilregeln

Dokumenttyp

HTML-Dokumente sollten den HTML5-Dokumenttyp verwenden: <!DOCTYPE html>.

Leere Elemente müssen nicht selbst geschlossen werden,<br>Nicht schreiben<br />。

HTML-Gültigkeit

Verwende nach Möglichkeit gültiges HTML.

<!-- 不推荐 -->
<title>Test</title>
<article>This is only a test.
<!-- 推荐 -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

Semantik

<!-- 不推荐 -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推荐 -->
<a href="recommendations/index.html">All recommendations</a>

Multimedia-Fallback

Stelle bei Multimedia-Elementen wie Bildern, Videos und Canvas-Animationen sicher, dass anderer barrierefreier Inhalt bereitgestellt wird. Bilder können alternativen Text (alt) verwenden, und Videos und Audio können Textversionen verwenden.

<!-- 不推荐 -->
<img src="spreadsheet.png.html">
<!-- 推荐 -->
<img src="spreadsheet.png.html" alt="Spreadsheet screenshot.">

Trennung von Belangen

Trenne Markup, Stil und Skript und sorge für minimale Kopplung zwischen ihnen.

Entitätsreferenzen

Wenn die Dateien und Editoren des Teams dieselbe Kodierung verwenden, müssen keine Entitätsreferenzen verwendet werden, wie z. B.&mdash;， &rdquo;，&#x263a;, außer bei einigen Zeichen, die in HTML eine besondere Bedeutung haben (wie < und &) und unsichtbaren Zeichen (wie Leerzeichen).

<!-- 不推荐 -->
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.
<!-- 推荐 -->
The currency symbol for the Euro is “€”.

type-Attribut

Geben Sie das type-Attribut nicht an, wenn Sie auf Stylesheets und Skripte verweisen, es sei denn, es handelt sich nicht um CSS oder JavaScript.
Weil in HTML5 der Standardtyp für Styles text/css ist und für Skripte text/javascript.

<!-- 不推荐 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css"
  type="text/css">
<!-- 推荐 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">
<!-- 不推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"
  type="text/javascript"></script>
<!-- 推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

HTML-Formatierungsregeln

HTML-Anführungszeichen

Verwenden Sie doppelte Anführungszeichen für Attributwerte.

<!-- 不推荐 -->
<a class='maia-button maia-button-secondary'>Sign in</a>
<!-- 推荐 -->
<a class="maia-button maia-button-secondary">Sign in</a>

CSS-Stilregeln

ID- und Klassenbenennung

Verwenden Sie aussagekräftige id- und class-Namen.

/* 不推荐: 含义不明确 */
#yee-1901 {}

/* 不推荐: 按直觉来的 */
.button-green {}
.clear {}
/* 推荐: 指定含义 */
#gallery {}
#login {}
.video {}

/* 推荐: 通用 */
.aux {}
.alt {}

Stil der ID- und Klassenbenennung

id und class sollten so kurz wie möglich sein und trotzdem leicht verständlich bleiben.

/* 不推荐 */
#navigation {}
.atr {}
/* 推荐 */
#nav {}
.author {}

Selektoren

Stellen Sie einem id oder class keinen Elementnamen voran, es sei denn, es ist notwendig.

/* 不推荐 */
ul#example {}
div.error {}
/* 推荐 */
#example {}
.error {}

Eigenschafts-Kurzschreibweise

Verwenden Sie in CSS wo immer möglich Kurzschreibweisen für Eigenschaften (wie font), was die Codierungseffizienz und die Lesbarkeit des Codes verbessert.

/* 不推荐 */
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;
/* 推荐 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0 und Einheiten

Fügen Sie keine Einheit hinzu, wenn der Wert 0 ist.

margin: 0;
padding: 0;

Führende 0

Wenn der Wert zwischen -1 und 1 liegt, ist eine führende 0 nicht erforderlich.

font-size: .8em;

Hexadezimalnotation

/* 不推荐 */
color: #EEBBCC;
/* 推荐 */
color: #ebc;

Präfixe

Die Verwendung von präfixierten Namensräumen kann Namenskonflikte verhindern und die Wartbarkeit des Codes verbessern.

.adw-help {} /* AdWords */
#maia-note {} /* Maia */

Trennzeichen bei ID- und Klassennamen

Die Verwendung von Bindestrichen in Selektoren verbessert die Lesbarkeit.

/* 不推荐:  “demo” 和 “image” 之间没有分隔符 */
.demoimage {}

/* 不推荐: 使用下划线 */
.error_status {}

/* 推荐 */
#video-id {}
.ads-sample {}

CSS-Formatierungsregeln

Deklarationsreihenfolge

Das Schreiben von CSS in alphabetischer Reihenfolge der Eigenschaftsnamen ist leicht zu lesen und zu pflegen. Ignorieren Sie Eigenschaften mit Browser-Präfixen beim Sortieren.

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

Einrückung von Blockinhalten

Um die Hierarchie widerzuspiegeln und die Lesbarkeit zu verbessern, sollte der gesamte Blockinhalt eingerückt werden.

@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}

Deklarationsabschlüsse

Jede CSS-Zeile sollte mit einem Semikolon enden.

/* 不推荐 */
.test {
  display: block;
  height: 100px
}
/* 推荐 */
.test {
  display: block;
  height: 100px;
}

Leerzeichen nach Eigenschaftsnamen

Zwischen dem Eigenschaftsnamen und dem Wert sollte ein Leerzeichen stehen.

/* 不推荐 */
h3 {
  font-weight:bold;
}
/* 推荐 */
h3 {
  font-weight: bold;
}

Trennung von Deklarationsblöcken

Verwenden Sie ein Leerzeichen zwischen dem Selektor und {}.

/* Not recommended: missing space */
#video{
  margin-top: 1em;
}

/* Not recommended: unnecessary line break */
#video
{
  margin-top: 1em;
}
/* 推荐 */
#video {
  margin-top: 1em;
}

Trennung von Selektor und Deklaration

Jeder Selektor beginnt in einer neuen Zeile.

/* 不推荐 */
a:focus, a:active {
  position: relative; top: 1px;
}
/* 推荐 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

Trennung von Regeln

Trennen Sie Regeln durch Leerzeilen.

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

CSS-Anführungszeichen

Verwenden Sie einfache Anführungszeichen für Attributselektoren und Eigenschaftswerte. URI-Werte benötigen keine Anführungszeichen.

/* 不推荐 */
@import url("//www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}
/* 推荐 */
@import url(//www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

CSS-Metaregeln

Abschnittskommentare

Verwenden Sie Kommentare, um CSS in Abschnitte zu unterteilen.

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

Original-URL: https://google.github.io/styleguide/htmlcssguide.xml