Règles de style de code CSS

css

Validité du code CSS

Essayez d'utiliser du code CSS valide.

Utilisez du code CSS valide, sauf si vous traitez des erreurs du programme de validation CSS ou si vous avez besoin d'une syntaxe propriétaire.

Utilisez des outils commevalidateur CSS du W3Cpour tester la validité.

L'utilisation d'un CSS valide est une mesure de qualité importante. Si vous trouvez du code CSS qui n'a aucun effet, supprimez-le et assurez une utilisation appropriée du CSS.

Nommage des ID et des classes

Donnez aux ID et aux classes des noms génériques et significatifs.

Vous devriez pouvoir déterminer à quoi sert l'élément à partir de son ID ou du nom de sa classe, plutôt que d'un nommage superficiel ou vague.

Vous devriez privilégier un nommage fondé sur l'objectif spécifique de l'élément, car c'est le plus facile à comprendre et cela réduit les mises à jour.

Des noms génériques peuvent être ajoutés aux éléments dont les éléments frères ne sont pas particuliers ou n'ont pas de signification individuelle, comme des noms génériques tels que « helpers ».

L'utilisation de noms fonctionnels ou génériques réduit les modifications inutiles du document ou du modèle.

/* 不推荐: 无意义 不易理解 */
#yee-1901 {}

/* 不推荐: 表达不具体 */
.button-green {}
.clear {}
/* 推荐: 明确详细 */
#gallery {}
#login {}
.video {}

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

Style de nommage des ID et des classes

Lorsque ce n'est pas nécessaire, les noms d'ID et de classe doivent être aussi courts que possible.

Indiquez brièvement à quoi se rapporte l'ID ou la classe.

Ainsi, le code est facile à comprendre et efficace.

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

Sélecteurs de type

Évitez d'utiliser les sélecteurs de type CSS.

Lorsque ce n'est pas nécessaire, ne combinez pas les noms de balises d'éléments avec des ID ou des classes.

Pour des raisons de performance, évitez d'utiliser des nœuds ancêtres comme sélecteurs.raisons de performance. 

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

Notation abrégée des propriétés

Utilisez la notation abrégée lorsque vous écrivez des valeurs de propriété.

De nombreuses propriétés CSS prennent en charge la notation abrégéenotation abrégée(par exemple font ) Utilisez la notation abrégée autant que possible, même lorsque vous ne définissez qu'une seule valeur.

L'utilisation de la notation abrégée améliore l'efficacité du code et le rend plus facile à comprendre.

0 et unités

Lorsque ce n'est pas nécessaire, 0 n'ajoutez pas d'unités après.

margin: 0;
padding: 0;

Décimales commençant par 0

Omettez le 0 avant le point décimal pour les décimales commençant par 0.

Pour les valeurs ou les longueurs comprises entre -1 et 1, le 0 avant le point décimal 0 peut être omis.

font-size: .8em;

Guillemets en dehors des URI

Omettez les guillemets en dehors des URI.

N'utilisez pas url() utilisez des guillemets dans ( "" , '' ) 。

Hexadécimal

Utilisez 3 caractères pour l'hexadécimal lorsque c'est possible.

Il est utilisé lors de l'ajout de valeurs de couleur ; l'utilisation de l'hexadécimal à 3 caractères est plus courte et plus concise.

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

Préfixes

Ajoutez un préfixe spécial d'identifiant d'application avant les sélecteurs (facultatif).

Dans les grands projets, il est préférable d'ajouter un préfixe d'identification (espace de noms) avant les noms d'ID ou de classe, relié par un tiret court.

L'utilisation d'espaces de noms peut éviter les conflits de nommage et faciliter la maintenance, comme dans les opérations de recherche et de remplacement.

Délimiteurs de nommage des ID et des classes

Séparez plusieurs mots dans les noms d’ID et de classe avec un tiret court « - ».

N’utilisez pas de connecteurs autres que le tiret court « - » dans les noms de sélecteurs (y compris aucun connecteur du tout), afin d’améliorer la compréhension et la recherche des noms.

/* 不推荐：“demo”和“image”中间没加“-” */
.demoimage {}

/* 不推荐：用下划线“_”是屌丝的风格 */
.error_status {}
/* 推荐 */
#video-id {}
.ads-sample {}

Hacks

Il est préférable d’éviter les satanés « hacks » CSS — veuillez d’abord essayer d’autres solutions.

Bien qu’il soit tentant de les utiliser pour la détection de user-agent ou des filtres CSS spéciaux, leur comportement est trop fréquent et nuira à long terme à l’efficacité et à la gestion du code du projet ; donc si d’autres solutions peuvent être utilisées, trouvez-les.

Règles de formatage du code CSS

Ordre des déclarations

Déclarez dans l’ordre alphabétique.

Déclarer tout dans l’ordre alphabétique facilite la mémorisation et la maintenance.

Ignorez l’ordre des préfixes spécifiques aux navigateurs, mais plusieurs préfixes spécifiques aux navigateurs pour une certaine propriété CSS doivent rester relativement ordonnés (par exemple, le préfixe -moz avant -webkit).

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

Indentation des blocs de code

Indentez tout le contenu dans les blocs de code (entre "{}").

Indentez tout le contenudu bloc de code, car cela améliore la clarté de la hiérarchie.

Terminaisons de déclaration

Toutes les déclarations doivent se terminer par ";".

Pour des raisons de cohérence et d'extensibilité, ajoutez un point-virgule à la fin de chaque déclaration.

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

Terminaisons des noms de propriété

Ajoutez un espace après les deux-points du nom de la propriété.

Pour des raisons de cohérence, ajoutez un espace entre le nom de la propriété et la valeur (pas entre le nom de la propriété et les deux-points, notez-le bien).

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

Retours à la ligne des sélecteurs et des déclarations

Séparez les sélecteurs et les déclarations par des retours à la ligne.

Chaque sélecteur et chaque déclaration doivent être sur une nouvelle ligne.

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

Retours à la ligne des règles

Chaque règle sur sa propre ligne.

Laissez une ligne vide entre deux règles.

html {
  background: #fff;
}

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

Règles de métadonnées CSS

Section des commentaires

Écrivez des commentaires par groupe. (Facultatif)

Si possible, écrivez des commentaires unifiés pour un groupe de feuilles de style selon la catégorie fonctionnelle. Placez-les sur des lignes séparées.

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

Section Coups de gueule

Adhérez au principe de cohérence

Si vous allez modifier du code, prenez quelques minutes pour examiner son style de code. S'il fait les choses d'une certaine manière, vous devriez faire de même.

Avec un style unifié, il existe un environnement de pensée commune, et les participants peuvent se concentrer sur ce que vous essayez de dire plutôt que de se demander d'abord de quelle langue de quelle planète vous parlez. Bien que nous proposions ici des règles de style unifiées, c'est uniquement pour que tout le monde les connaisse et s'en inspirer pour ajuster son propre style. Bien sûr, maintenir son propre style unique est également important. Balabala...

Ressources associées