Studienführer zu CSS-Code-Schreibstandards

Hier ist ein Studienleitfaden für CSS-Code-Schreibstandards, einschließlich Codekommentare, Benennungsstandards, Leerzeicheneinrückungen usw., die alle auf den üblichen Konventionen aller basieren. Es lohnt sich auf jeden Fall, sie zu lernen und darauf zu verweisen Weiter

1. Formatierungscode

[Empfehlung]: CSS-Dateien verwenden UTF-8-Kodierung ohne BOM
1.2 Einrückung
[Pflichtfeld]: Verwenden Sie 4 Leerzeichen als Einrückungsebene, 2 Leerzeichen oder Tabulatorzeichen sind nicht zulässig.

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

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

.selector {   
}

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

margin: 0;

[Obligatorisch]: Wenn sich das Listenattributbuch in einer einzelnen Zeile befindet, muss ihm ein Leerzeichen

font-family: Aria, sans-serif;

1,4 Zeilenlänge

[Pflichtfeld]: Jede Zeile darf 120 Zeichen nicht überschreiten, es sei denn, eine einzelne Zeile ist unteilbar.
[Empfehlung]: Bei sehr langen Stilen schließen Sie den Stilwert in ein Leerzeichen oder danach ein. Es wird empfohlen, ihn logisch zu gruppieren.

/* 不同属性值按逻辑分组 */  
background:   
    transparent url(aVeryVeryVeryLongUrlIsPlacedHere)   
    no-repeat 0 0;   
/* 可重复多次的属性，每次重复一行 */  
background-image:   
    url(aVeryVeryVeryLongUrlIsPlacedHere)   
    url(anotherVeryVeryVeryLongUrlIsPlacedHere);   
/* 类似函数的属性值可以根据函数调用的缩进进行 */  
background-image: -webkit-gradient(   
    linear,   
    left bottombottom,   
    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 jeder Selektor aktiviert sein eine eigene Linie.

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

[Pflichtfeld]: >, +, ~ Lassen Sie auf jeder Seite 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.

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

2. Selektoren und Attributabkürzungen

2.1 Selektoren
[Obligatorisch] Wenn nicht erforderlich, ist dies der Fall Es ist nicht gestattet, Typselektoren hinzuzufügen, um die ID- und Klassenselektoren einzuschränken.
Erklärung: Es hat einen gewissen Einfluss auf Leistung und Wartbarkeit. Beispiel:
css

[Empfehlung] Die Verschachtelungsebene des Selektors sollte nicht größer als 3 Ebenen sein und die später aufgeführten Qualifikationsbedingungen sollten so präzise wie möglich sein .

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

Beispiel:

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

2.2 Attributabkürzung

[Vorschlag] kann verwendet werden Wenn es sich um Abkürzungen handelt, 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 border / margin / padding sollten Sie auf die Auswirkung impliziter Werte achten ​​für tatsächliche Werte Verwenden Sie Abkürzungen nur, wenn Sie Werte wirklich in mehrere Richtungen festlegen müssen.

Erklärung: Abkürzungen wie „Rahmen“ / „Rand“ / „Padding“ legen die Werte mehrerer Eigenschaften gleichzeitig fest, und es ist einfach, Einstellungen zu überschreiben, die nicht überschrieben werden müssen. 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 Lassen Sie zwischen jedem Regelsatz eine Leerzeile

/* good */  
.selector1 {   
  display: block;   
  width: 100px;   
}   
.selector2 {   
  padding: 10px;   
  margin: 10px auto;   
}   
/* bad */  
.selector1 {   
  display: block;   
  width: 100px;   
}   
.selector2 {   
  padding: 10px;   
  margin: 10px auto;   
}

3. Wert und Einheit

3.1 Text
[Pflichtfeld] Der Textinhalt muss in doppelte Anführungszeichen gesetzt werden.
Erklärung: Texttypinhalte können in Selektoren, Attributwerten usw. enthalten sein. Beispiel:

/* 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 Wert

[Obligatorisch] Wenn der Wert eine Dezimalzahl zwischen 0 und 1 ist, lassen Sie 0 weg für den ganzzahligen Teil.

Beispiel:

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

3.3 url()

[Obligatorisch] Der Pfad in der Funktion url() wird nicht in Anführungszeichen gesetzt .

Beispiel:

body {   
    background: url(bg.png);   
}

3.4 Länge

[Pflichtfeld] Die Einheit muss weggelassen werden, wenn die Länge 0 ist . (Nur die Längeneinheit kann weggelassen werden)
Beispiel:

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

3.5 Farbe

[Obligatorisch] RGB-Farbwerte ​Es muss die hexadezimale Schreibweise #rrggbb verwendet werden. rgb() ist nicht erlaubt.

[Pflichtfeld] Wenn ein Farbwert abgekürzt werden kann, muss die abgekürzte Form verwendet werden.

/* 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);   
}

Beispiel:

[Obligatorisch] Benannte Farbwerte sind für Farbwerte nicht zulässig.

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

Beispiel:

[Empfehlung] Verwenden Sie Kleinbuchstaben für englische Zeichen in Farbwerten. Wenn Sie keine Kleinbuchstaben verwenden, müssen Sie sicherstellen, dass diese innerhalb desselben Projekts konsistent bleiben.

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

Beispiel:

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

3.6 2D-Position

[Pflichtfeld] Sowohl die horizontale als auch die vertikale Richtung müssen als Standort angegeben werden .
Erklärung: Der Anfangswert der 2D-Position beträgt 0 % 0 %, aber wenn nur ein Wert in einer Richtung vorhanden ist, wird der Wert in der anderen Richtung als Mitte geparst. Um Verwirrung beim Verständnis zu vermeiden, sollten Werte in beide Richtungen gleichzeitig angegeben werden. Definition des Attributwerts „Hintergrundposition“
Beispiel:

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

4. Textlayout

4.1 Schriftfamilie
[Obligatorisch] Attribut „Schriftfamilie“. Der Name der Schriftartfamilie sollte den englischen Familiennamen der Schriftart verwenden. Wenn Leerzeichen vorhanden sind, müssen diese in Anführungszeichen gesetzt werden.
Erklärung: Der sogenannte englische Familienname ist ein Metadatum der Schriftartendatei. Gebräuchliche Namen lauten wie folgt:

示例：

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 下会在小字号下使用点阵字体的情况下) 显示效果差，造成阅读困难。

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 如果有多个逗号分隔的条件时，应将每个条件放在单独一行中。
示例：

@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 */  
}

7.CSS注释
普通注释

/* 普通注释 */

区块注释

/**  
 * 模块：m-detail  
 * author: xxx  
 * edit:   2016.5.02  
 */

8.CSS命名规范
8.1命名组成
命名必须由单词，中划线组成。例如:.info,.news-list
不推荐使用拼音来作为样式名，尤其是缩写的拼音、拼音与英文的混合
所有命名都使用小写,使用中划线 “-” 作为连接字符，而不是下划线 “_“
8.2命名前缀

前缀	说明	示例
g-	全局通用样式命名	g-mod
m-	模块命名方式	m-detail
ui-	组件命名方式	ui-selector
j-	所有用于纯交互的命名，不涉及任何样式规则。	J-switch

不允许出现以类似：.info, .current, .news 开头的选择器，比如：

.info{sRules;}

因为这样将给我们带来不可预知的管理麻烦以及沉重的历史包袱。你永远也不会知道哪些样式名已经被用掉了，如果你是一个新人，你可能会遭遇，你每定义个样式名，都有同名的样式已存在，然后你只能是换样式名或者覆盖规则。所以我们推荐这样写：

.m-xxx .info{sRules;}

所有的选择器必须是以 g-, m-, ui- 等有前缀的选择符开头的，意思就是说所有的规则都必须在某个相对的作用域下才生效，尽可能减少全局污染。 J- 这种级别的className完全交由JSer自定义，但是命名的规则也可以保持跟重构一致，比如说不能使用拼音之类的

8.3命名单词
不以表现来命名，而是根据内容来命名。比如：left, right, center, red, black这种以表现来定命名，不允许出现；
推荐使用功能和内容相关词汇的命名，如:
全选复制放进笔记套系:package
相册:photo-album
作品:works
攻略:raiders
普通用户:normal-user
达人:talent-user
摄影师:photographer
用户昵称:user-alias
头像:head
地区:area
关注数:follow
粉丝数:followers
互相注意:attention
标签:label
发表时间:publish-date,publish-time
标题:title
信息:info
内容:content
关于我:about
简介内容:intro-content
评论:review
服务:service
封面:cover
流行:popular
收藏:collect
查看:view
预约:reservation
促销:sale-promotion

9.兼容性
9.1 属性前缀
[强制] 带私有前缀的属性由长到短排列，按冒号位置对齐。
解释：
标准属性放在最后，按冒号对齐方便阅读，也便于在编辑器内进行多行编辑。
示例：

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

9.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 */  
}

Das obige ist der detaillierte Inhalt vonStudienführer zu CSS-Code-Schreibstandards. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!