Guide d'étude des normes d'écriture de code CSS

Voici un guide d'étude sur les normes d'écriture de code CSS, y compris les commentaires de code, les normes de dénomination, l'indentation des espaces, etc., qui proviennent tous des conventions habituelles de chacun. Cela vaut vraiment la peine d'être appris et consulté. Les amis qui en ont besoin peuvent s'y référer. Suivant

1. Code de formatage
1.1 Fichier
[Recommandation] : les fichiers CSS utilisent l'encodage UTF-8 sans nomenclature
1.2 Indentation.
[Obligatoire] : Utilisez 4 espaces comme niveau d'indentation, 2 espaces ou caractères de tabulation ne sont pas autorisés.

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

1.3 Espaces
[Obligatoire] : Il doit y avoir un espace entre le sélecteur et {.

.selector {   
}

[Obligatoire] : Il doit y avoir un espace entre le sélecteur et {.

margin: 0;

[Obligatoire] : Lorsque le livre d'attributs de liste est sur une seule ligne, il doit être suivi d'un espace

font-family: Aria, sans-serif;

Longueur de 1,4 ligne
[Obligatoire] : Chaque ligne ne doit pas dépasser 120 caractères, sauf si une seule ligne est indivisible.
[Recommandation] : Pour les styles très longs, enveloppez la valeur du style dans un espace ou après , et il est recommandé de la regrouper logiquement.

/* 不同属性值按逻辑分组 */  
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 Sélecteur
[Obligatoire] : Lorsqu'une règle contient plusieurs sélecteurs, chaque sélecteur L'instruction doit être activée sa propre ligne.

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

[Obligatoire] : >, ,~ Laissez un espace de chaque côté du sélecteur.
Exemple :

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

[Obligatoire] Les valeurs dans les sélecteurs d'attributs doivent être entourées de guillemets doubles.

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

2. Sélecteurs et abréviations d'attributs
2.1 Sélecteurs
[Obligatoire] Si ce n'est pas nécessaire, c'est pas autorisé à ajouter des sélecteurs de type pour limiter les sélecteurs d'identifiant et de classe.
Explication : Cela a un certain impact sur les performances et la maintenabilité.
Exemple :
css

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

[Recommandation] Le niveau d'imbrication du sélecteur ne doit pas être supérieur à 3 niveaux, et les conditions de qualification situées plus loin doivent être les plus précises possibles .

Exemple :

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

2.2 L'abréviation d'attribut
[Suggestion] peut être utilisée quand Dans le cas d'abréviations, essayez d'utiliser des abréviations d'attributs.
Exemple :

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

[Recommandation] Lorsque vous utilisez des abréviations telles que border / margin / padding, vous devez faire attention à l'impact des valeurs implicites ​​sur les valeurs réelles, utilisez des abréviations uniquement lorsque vous avez vraiment besoin de définir des valeurs dans plusieurs directions.
Explication : les abréviations telles que border / margin / padding définiront les valeurs​​de plusieurs propriétés en même temps, et il est facile de remplacer les paramètres qui n'ont pas besoin d'être remplacés. Si certaines directions doivent hériter des valeurs d'autres déclarations, elles doivent être définies séparément.
Exemple :

/* 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 Laisser une ligne vide entre chaque ensemble de règles

/* 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. Valeur et unité
3.1 Texte
[Obligatoire] Le contenu du texte doit être entouré de guillemets doubles.
Explication : le contenu de type texte peut se trouver dans des sélecteurs, des valeurs d'attribut, etc.
Exemple :

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

[Obligatoire] Lorsque la valeur est une valeur décimale comprise entre 0 et 1, omettez 0 pour la partie entière.
Exemple :

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

3.3 url()

[Obligatoire] Le chemin dans la fonction url() n'est pas cité .
Exemple :

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

3.4 Longueur
[Obligatoire] L'unité doit être omise lorsque la longueur est 0 . (Seule l'unité de longueur peut être omise)
Exemple :

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

3.5 Couleur

[Obligatoire] Valeurs de couleur RVB ​​doit être utilisé sous la forme de notation hexadécimale #rrggbb. rgb() n'est pas autorisé.

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

[Obligatoire] Lorsqu'une valeur de couleur peut être abrégée, la forme abrégée doit être utilisée.
Exemple :

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

[Obligatoire] Les valeurs de couleur nommées ne sont pas autorisées pour les valeurs de couleur.
Exemple :

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

[Recommandation] Utilisez des lettres minuscules pour les caractères anglais dans les valeurs de couleur. Si vous n’utilisez pas de lettres minuscules, vous devez quand même vous assurer qu’elles restent cohérentes au sein d’un même projet.
Exemple :

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

3.6 Position 2D
[Obligatoire] Les directions horizontale et verticale doivent être indiquées. Emplacement .
Explication :
La valeur initiale de la position 2D est 0% 0%, mais lorsqu'il n'y a qu'une valeur dans un sens, la valeur dans l'autre sens sera analysée comme centre. Pour éviter toute confusion dans la compréhension, les valeurs dans les deux sens doivent être données simultanément. Définition de la valeur de l'attribut background-position
Exemple :

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

4. Disposition du texte
4.1 Famille de polices
[Obligatoire] attribut font-family Le nom de famille de police doit utiliser le nom de famille anglais de la police. S'il y a des espaces, ils doivent être placés entre guillemets.
Explication :
Le soi-disant nom de famille anglais est une métadonnée du fichier de police. Les noms communs sont les suivants :

字体	操作系统	Family Name
宋体 (中易宋体)	Windows	SimSun
黑体 (中易黑体)	Windows	SimHei
微软雅黑	Windows	Microsoft YaHei
微软正黑	Windows	Microsoft JhengHei
华文黑体	Mac/iOS	STHeiti
冬青黑体	Mac/iOS	Hiragino Sans GB
文泉驿正黑	Linux	WenQuanYi Zen Hei
文泉驿微米黑	Linux	WenQuanYi 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 下会在小字号下使用点阵字体的情况下) 显示效果差，造成阅读困难。

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!