Spécifications sur la façon d'écrire du code CSS

Voici un guide ultime des normes d'écriture de code CSS pour tout le monde, 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é par les amis qui en ont besoin. peut s'y référer. Suivant

1. Formater le code
Fichier 1.1[Recommandation] : les fichiers CSS utilisent l'encodage UTF-8 sans nomenclature
Indentation 1.2[Obligatoire] : utilisez 4 espaces comme niveau d'indentation et n'autorisez pas 2 espaces ou caractères de tabulation.

.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électeurs

[Obligatoire] : Lorsqu'une règle contient plusieurs sélecteurs, chaque déclaration de sélecteur doit occuper sa propre ligne.

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

[Obligatoire] : >, +, ~ laisser un espace de part et d'autre 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 nécessaire, l'identifiant et la classe ne doivent pas être sélectionnés Ajouter un sélecteur de type pour la qualification.
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 des sélecteurs 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 Abréviation d'attribut

[Recommandation] Lorsque des abréviations peuvent être utilisées, essayez d'utiliser des abréviations d'attribut.
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. N'utilisez des abréviations que lorsque vous le faites. 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;   
}

Valeurs et unités3.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 le 0 dans 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] Les valeurs de couleur RVB doivent utiliser la 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] Lorsque la 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 vous assurer qu’elles restent cohérentes au sein du 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 positions horizontale et verticale doivent être indiquées. 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 texte4.1 Famille de police
[Obligatoire] Le nom de la famille de police dans l'attribut font-family doit être Utilisez 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 */  
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于CSS3中Animation动画属性的用法解析

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!