CSS-Codierungsstandards

CSS-Codierungsstandards

Das Ziel dieses Dokuments ist es, den CSS-Codestil konsistent und einfach zu verstehen und zu pflegen. Wenn Sie diese Angewohnheit nicht haben, wählen Sie bitte Ihre IDE Hören Sie vorsichtig auf, einen „Texteditor“ zu verwenden.

Obwohl dieses Dokument für CSS konzipiert ist, sollten bei Verwendung verschiedener CSS-Precompiler (wie weniger, sass, stylus usw.) auch die anwendbaren Teile so weit wie möglich den Konventionen dieses Dokuments folgen.

1 Codestil

1.1-Dateien

[Empfehlung] Verwenden Sie die BOM-freie UTF-8-Kodierung für CSS-Dateien.

Erklärung:

UTF-8-Kodierung bietet eine größere Anpassungsfähigkeit. Stücklisten können bei der Verwendung von Programmen oder Tools zur Verarbeitung von Dateien unnötige Störungen verursachen.

1.2 Einrückung

[Obligatorisch] Verwenden Sie 2 Leerzeichen als Einrückungsebene, Tabulatorzeichen sind nicht zulässig.

Beispiel:

.selector {
  margin: 0;
  padding: 0;
}

1.3 Leerzeichen

[Obligatorisch] Zwischen dem Selektor und { muss ein Leerzeichen stehen.

Beispiel:

.selector {
}

[Obligatorisch] Zwischen dem Attributnamen und dem folgenden : sind keine Leerzeichen zulässig, und zwischen : und dem Attributwert müssen Leerzeichen stehen.

Beispiel:

margin: 0;

[Obligatorisch] Wenn der Listenattributwert in einer einzelnen Zeile geschrieben wird, muss dem , ein Leerzeichen folgen.

Beispiel:

font-family: Arial, sans-serif;

1,4 Zeilenlänge

[Pflichtfeld] Jede Zeile darf 120 Zeichen nicht überschreiten, es sei denn, eine einzelne Zeile ist unteilbar.

Erklärung:

Ein häufiges unteilbares Szenario ist, wenn die URL zu lang ist.

[Empfehlung] Bei sehr langen Stilen schließen Sie den Stilwert in ein Leerzeichen oder danach ein. Es wird empfohlen, ihn logisch zu gruppieren.

Beispiel:

/* 不同属性值按逻辑分组 */
background:
  transparent url(aVeryVeryVeryLongUrlIsPlacedHere)
  no-repeat 0 0;
/* 可重复多次的属性，每次重复一行 */
background-image:
  url(aVeryVeryVeryLongUrlIsPlacedHere)
  url(anotherVeryVeryVeryLongUrlIsPlacedHere);
/* 类似函数的属性值可以根据函数调用的缩进进行 */
background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0.04, rgb(88,94,124)),
  color-stop(0.52, rgb(115,123,162))
);

1.5 Selektor

[Obligatorisch] Wenn eine Regel mehrere Selektoren enthält, muss jede Selektordeklaration eine eigene Zeile belegen.

Beispiel:

/* good */
.post,
.page,
.comment {
  line-height: 1.5;
}
/* bad */
.post, .page, .comment {
  line-height: 1.5;
}

[Pflichtfeld] >, +, ~ Lassen Sie auf beiden Seiten des Selektors ein Leerzeichen.

Beispiel:

/* good */
main > nav {
  padding: 10px;
}
label + input {
  margin-left: 5px;
}
input:checked ~ button {
  background-color: #69C;
}
/* bad */
main>nav {
  padding: 10px;
}
label+input {
  margin-left: 5px;
}
input:checked~button {
  background-color: #69C;
}

[Obligatorisch] Werte in Attributselektoren müssen in doppelte Anführungszeichen gesetzt werden.

Erklärung:

Einfache Anführungszeichen sind nicht zulässig und keine Anführungszeichen sind nicht zulässig.

Beispiel:

/* good */
article[character="juliet"] {
  voice-family: "Vivien Leigh", victoria, female;
}
/* bad */
article[character='juliet'] {
  voice-family: "Vivien Leigh", victoria, female;
}

1.6 Attribute

[Obligatorisch] Mehrere Attributdefinitionen müssen in einer neuen Zeile stehen.

Beispiel:

/* good */
.selector {
  margin: 0;
  padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }

[Obligatorisch] Die Attributdefinition muss mit einem Semikolon enden.

Beispiel:

/* good */
.selector {
  margin: 0;
}
/* bad */
.selector {
  margin: 0
}

2 Universal

2.1 Selektor

[Pflichtfeld], falls nicht erforderlich, Es ist nicht erlaubt, Typselektoren hinzuzufügen, um die ID- und Klassenselektoren einzuschränken.

Erklärung:

hat einen gewissen Einfluss auf Leistung und Wartbarkeit.

Beispiel:

/* good */
#error,
.danger-message {
  font-color: #c00;
}
/* bad */
dialog#error,
p.danger-message {
  font-color: #c00;
}

[Empfehlung] Die Verschachtelungsebene der Selektoren sollte nicht mehr als 4 Ebenen betragen und die später aufgeführten Qualifikationsbedingungen sollten so präzise wie möglich sein.

Beispiel:

/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment div * {}

2.2 Attributabkürzung

[Empfehlung] Wo Abkürzungen verwendet werden können, versuchen Sie, Attributabkürzungen zu verwenden.

Beispiel:

/* good */
.post {
  font: 12px/1.5 arial, sans-serif;
}
/* bad */
.post {
  font-family: arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

[Empfehlung] Bei der Verwendung von Abkürzungen wie Rahmen / Rand / Polsterung sollten Sie auf die Auswirkung des impliziten Werts auf den tatsächlichen Wert achten und diese nur verwenden, wenn Sie müssen wirklich Werte in mehreren Abkürzungsrichtungen festlegen.

Erklärung: Abkürzungen wie

border / margin / padding legen die Werte mehrerer Eigenschaften gleichzeitig fest, und es ist einfach, Einstellungen zu überschreiben, die nicht erforderlich sind außer Kraft gesetzt werden. Wenn einige Richtungen Werte von anderen Deklarationen erben müssen, sollten diese separat festgelegt werden.

Beispiel:

/* centering <article class="page"> horizontally and highlight featured ones */
article {
  margin: 5px;
  border: 1px solid #999;
}
/* good */
.page {
  margin-right: auto;
  margin-left: auto;
}
.featured {
  border-color: #69c;
}
/* bad */
.page {
  margin: 5px auto; /* introducing redundancy */
}
.featured {
  border: 1px solid #69c; /* introducing redundancy */
}

2.3 Reihenfolge beim Schreiben von Attributen

[Empfehlung] Wenn Attribute unter demselben Regelsatz geschrieben werden, sollten sie nach Funktion gruppiert und mit der Formatierungsmodellmethode formatiert werden. Ort) > Box-Modell (Größe) > Typografisch (textbezogen) > Visuelle (visuelle Effekte) Reihenfolge zur Verbesserung der Lesbarkeit des Codes.

Erklärung:

Formatierungsmodellbezogene Eigenschaften umfassen: Position / oben / rechts / unten / links / schwebend / Anzeige / Überlauf usw.

Boxmodellbezogene Eigenschaften umfassen: Rand/Rand/Abstand/Breite/Höhe usw.

Zu den typografischen Eigenschaften gehören: Schriftart/Zeilenhöhe/Textausrichtung/Zeilenumbruch usw.

Zu den visuellen Eigenschaften gehören: Hintergrund / Farbe / Übergang / Listenstil usw.

Zu den weiteren Attributen gehören: Deckkraft / Textdekoration / Leerraum / Zeilenumbruch usw.

Darüber hinaus, wenn die Wenn das Inhaltsattribut enthalten ist, sollte es vorne platziert werden.

Beispiel:

.sidebar {
  /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
  position: absolute;
  top: 50px;
  left: 0;
  overflow-x: hidden;
  display: block;
  /* box model: sizes / margins / paddings / borders / ...  */
  width: 200px;
  padding: 5px;
  border: 1px solid #ddd;
  /* typographic: font / aligns / text styles / ... */
  font-size: 14px;
  line-height: 20px;
  /* visual: colors / shadows / gradients / ... */
  background: #f5f5f5;
  color: #333;
  -webkit-transition: color 1s;
     -moz-transition: color 1s;
          transition: color 1s;
  /* Misc */
  opacity: 1;
  text-decoration: none;
  white-space: nowrap;
  word-wrap: normal;
  cursor: pointer;
}

2.4 Floats löschen

[Vorschlag] Wenn ein Element angehoben werden muss, um interne Floating-Elemente zu enthalten, verwenden Sie Pseudo-Clearfix ​​wird durch Löschen in der Klasse oder Auslösen von BFC durchgeführt. Versuchen Sie, keine leeren Tags hinzuzufügen.

Erklärung:

Es gibt viele Möglichkeiten, BFC auszulösen, gängige sind:

float 非 none
position 非 static
overflow 非 visible

Wenn Sie eine Clearing-Float-Methode mit kleineren Nebenwirkungen verwenden möchten, siehe Ein neuer Micro-Clearfix-HackArtikel.

Beachten Sie außerdem, dass Elemente, die bereits BFC ausgelöst haben, nicht gelöscht werden müssen.

Beispiel:

<div class="fn-clear">
    <div class="fn-left"></div>
    <div class="fn-left"></div>
</div>

2.5 !important

[Empfehlung] Versuchen Sie, die !important-Anweisung nicht zu verwenden.

[Empfehlung] Wenn Sie den angegebenen Stil erzwingen und keine Szenenüberschreibung zulassen müssen, definieren Sie den Stil über das Tag inline und !important.

Erklärung:

Es ist zu beachten, dass Inline-!important-Stile nur verwendet werden sollten, wenn das Design kein anderes Szenario zum Überschreiben des Stils zulässt. Dieses Schema wird normalerweise in Anwendungen in Drittumgebungen verwendet. Der Z-Index-Abschnitt unten ist ein typisches Beispiel für eines dieser speziellen Szenarios.

2.6 z-index

[建议] 将 z-index 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。

解释：

同层的多个元素，如多个由用户输入触发的 Dialog，在该层级内使用相同的 z-index 或递增 z-index。

建议每层包含100个 z-index 来容纳足够的元素，如果每层元素较多，可以调整这个数值。

[建议] 在可控环境下，期望显示在最上层的元素，z-index 指定为 9999。

解释：

可控环境分成两种，一种是自身产品线环境；还有一种是可能会被其他产品线引用，但是不会被外部第三方的产品引用。

不建议取值为 2147483647。以便于自身产品线被其他产品线引用时，当遇到层级覆盖冲突的情况，留出向上调整的空间。

[建议] 在第三方环境下，期望显示在最上层的元素，通过标签内联和 !important，将 z-index 指定为 2147483647。

解释：

第三方环境对于开发者来说完全不可控。在第三方环境下的元素，为了保证元素不被其页面其他样式定义覆盖，需要采用此做法。

3 值与单位

3.1 文本

[强制] 文本内容必须用双引号包围。

解释：

文本类型的内容可能在选择器、属性值等内容中。

示例：

/* good */
html[lang|="zh"] q:before {
  font-family: "Microsoft YaHei", sans-serif;
  content: "“";
}
html[lang|="zh"] q:after {
  font-family: "Microsoft YaHei", sans-serif;
  content: "”";
}
/* bad */
html[lang|=zh] q:before {
  font-family: 'Microsoft YaHei', sans-serif;
  content: '“';
}
html[lang|=zh] q:after {
  font-family: "Microsoft YaHei", sans-serif;
  content: "”";
}

3.2 数值

[强制] 当数值为 0 - 1 之间的小数时，省略整数部分的 0。

示例：

/* good */
panel {
  opacity: .8
}
/* bad */
panel {
  opacity: 0.8
}

3.3 url()

[强制] url() 函数中的路径不加引号。

示例：

/* good */
body {
  background: url(bg.png);
}
/* bad */
body {
  background: url("bg.png");
}

[强制] url() 函数中的绝对路径可省去协议名。

示例：

body {
  background: url(//w.zuzuche.com/img/bg.png) no-repeat 0 0;
}

3.4 长度

[强制] 长度为 0 时须省略单位。 (也只有长度单位可省)

示例：

/* good */
body {
  padding: 0 5px;
}
/* bad */
body {
  padding: 0px 5px;
}

3.5 颜色

[强制] RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。

解释：

带有alpha的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。

示例：

/* good */
.success {
  box-shadow: 0 0 2px rgba(0, 128, 0, .3);
  border-color: #008000;
}
/* bad */
.success {
  box-shadow: 0 0 2px rgba(0,128,0,.3);
  border-color: rgb(0, 128, 0);
}

[强制] 颜色值可以缩写时，必须使用缩写形式。

示例：

/* good */
.success {
  background-color: #aca;
}
/* bad */
.success {
  background-color: #aaccaa;
}

[强制] 颜色值不允许使用命名色值。

示例：

/* good */
.success {
    color: #90ee90;
}
/* bad */
.success {
    color: lightgreen;
}

[建议] 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。

示例：

/* good */
.success {
  background-color: #aca;
  color: #90ee90;
}
/* good */
.success {
  background-color: #ACA;
  color: #90EE90;
}
/* bad */
.success {
  background-color: #ACA;
  color: #90ee90;
}

3.6 2D 位置

[强制] 必须同时给出水平和垂直方向的位置。

解释：

2D 位置初始值为 0% 0%，但在只有一个方向的值时，另一个方向的值会被解析为 center。为避免理解上的困扰，应同时给出两个方向的值。background-position属性值的定义

示例：

/* good */
body {
  background-position: center top; /* 50% 0% */
}
/* bad */
body {
  background-position: top; /* 50% 0% */
}

4 文本编排

4.1 字体族

[强制] font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中。

解释：

所谓英文 Family Name，为字体文件的一个元数据，常见名称如下：

字体操作系统Family Name
宋体 (中易宋体)WindowsSimSun
黑体 (中易黑体)WindowsSimHei
微软雅黑WindowsMicrosoft YaHei
微软正黑WindowsMicrosoft JhengHei
华文黑体Mac/iOSSTHeiti
冬青黑体Mac/iOSHiragino Sans GB
文泉驿正黑LinuxWenQuanYi Zen Hei
文泉驿微米黑LinuxWenQuanYi Micro Hei

示例：

h1 {
  font-family: "Microsoft YaHei";
}

[强制] font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族( serif / sans-serif )。

解释：

更详细说明可参考本文。

示例：

/* Display according to platform */
.article {
  font-family: Arial, sans-serif;
}
/* Specific for most platforms */
h1 {
  font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
}

[强制] font-family 不区分大小写，但在同一个项目中，同样的 Family Name 大小写必须统一。

示例：

/* good */
body {
  font-family: Arial, sans-serif;
}
h1 {
  font-family: Arial, "Microsoft YaHei", sans-serif;
}
/* bad */
body {
  font-family: arial, sans-serif;
}
h1 {
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

4.2 字号

[强制] 需要在 Windows 平台显示的中文内容，其字号应不小于 12px。

解释：

由于 Windows 的字体渲染机制，小于 12px 的文字显示效果极差、难以辨认。

4.3 字体风格

[建议] 需要在 Windows 平台显示的中文内容，不要使用除 normal 外的 font-style。其他平台也应慎用。

解释：

由于中文字体没有 italic 风格的实现，所有浏览器下都会 fallback 到 obilique 实现 (自动拟合为斜体)，小字号下 (特别是 Windows 下会在小字号下使用点阵字体的情况下) 显示效果差，造成阅读困难。

4.4 字重

[强制] font-weight 属性必须使用数值方式描述。

解释：

CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。

浏览器本身使用一系列启发式规则来进行匹配，在 <700 时一般匹配字体的 Regular 字重，>=700 时匹配 Bold 字重。

但已有浏览器开始支持 =600 时匹配 Semibold 字重 (见此表)，故使用数值描述增加了灵活性，也更简短。

示例：

/* good */
h1 {
  font-weight: 700;
}
/* bad */
h1 {
  font-weight: bold;
}

4.5 行高

[建议] line-height 在定义文本段落时，应使用数值。

解释：

将 line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 font-size 都需要设置 line-height。

当 line-height 用于控制垂直居中时，还是应该设置成与容器高度一致。

示例：

.container {
  line-height: 1.5;
}

5 变换与动画

[强制] 使用 transition 时应指定 transition-property。

示例：

/* good */
.box {
  transition: color 1s, border-color 1s;
}
/* bad */
.box {
  transition: all 1s;
}

[建议] 尽可能在浏览器能高效实现的属性上添加过渡和动画。

解释：

见本文，在可能的情况下应选择这样四种变换：

transform: translate(npx, npx);
transform: scale(n);
transform: rotate(ndeg);
opacity: 0..1;

典型的，可以使用 translate 来代替 left 作为动画属性。

示例：

/* good */
.box {
  transition: transform 1s;
}
.box:hover {
  transform: translate(20px); /* move right for 20px */
}
/* bad */
.box {
  left: 0;
  transition: left 1s;
}
.box:hover {
  left: 20px; /* move right for 20px */
}

6 响应式

[强制] Media Query 不得单独编排，必须与相关的规则一起定义。

示例：

/* Good */
/* header styles */
@media (...) {
  /* header styles */
}
/* main styles */
@media (...) {
  /* main styles */
}
/* footer styles */
@media (...) {
  /* footer styles */
}
/* Bad */
/* header styles */
/* main styles */
/* footer styles */
@media (...) {
  /* header styles */
  /* main styles */
  /* footer styles */
}

[强制] Media Query 如果有多个逗号分隔的条件时，应将每个条件放在单独一行中。

示例：

@media
(-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx),             /* The standard way */
(min-resolution: 192dpi) {           /* dppx fallback */
  /* Retina-specific stuff here */
}

[建议] 尽可能给出在高分辨率设备 (Retina) 下效果更佳的样式。

7 兼容性

7.1 属性前缀

[建议] 带私有前缀的属性由长到短排列，按冒号位置对齐。

解释：

标准属性放在最后，按冒号对齐方便阅读，也便于在编辑器内进行多行编辑。

在 Sublime Text 2 中， 使用 Selection → Add Previous Line (⌃⇧↑) 和 Selection → Add Next Line (⌃⇧↓)。

示例：

.box {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

7.2 Hack

[建议] 需要添加 hack 时应尽可能考虑是否可以采用其他方式解决。

解释：

如果能通过合理的 HTML 结构或使用其他的 CSS 定义达到理想的样式，则不应该使用 hack 手段解决问题。通常 hack 会导致维护成本的增加。

[建议] 尽量使用 选择器 hack 处理兼容性，而非 属性 hack。

解释：

尽量使用符合 CSS 语法的 selector hack，可以避免一些第三方库无法识别 hack 语法的问题。

示例：

/* IE 7 */
*:first-child + html #header {
  margin-top: 3px;
  padding: 5px;
}
/* IE 6 */
* html #header {
  margin-top: 5px;
  padding: 4px;
}

[建议] 尽量使用简单的 属性 hack。

示例：

.box {
  _display: inline; /* fix double margin */
  float: left;
  margin-left: 20px;
}
.container {
  overflow: hidden;
  *zoom: 1; /* triggering hasLayout */
}

7.3 Expression

[强制] 禁止使用 Expression。

7.4 @import

[强制] 禁止使用 @import。

解释：与 相比, @import 更慢，需要额外的页面请求，并且可能引发其他的意想不到的问题。应该避免使用他们，而选择其他的方案：

● 使用多个 元素

● 使用 CSS 预处理器例如 Sass 或 Less 将样式编译到一个文件中

Das obige ist der detaillierte Inhalt vonCSS-Codierungsstandards. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!