--- title: Lignes directrices du CSS slug: MDN/Guidelines/Code_guidelines/CSS tags: - CSS - Code - Guide - Directives - MDN Meta translation_of: MDN/Guidelines/Code_guidelines/CSS --- {{MDNSidebar}} Les directives suivantes couvrent la manière d'écrire les CSS pour les exemples de code MDN. ## Dans cet article - [Lignes directrices de haut niveau](#high-level_guidelines) - [N'utilisez pas de préprocesseurs](#dont_use_preprocessors) - [N'utilisez pas de méthodologies CSS spécifiques](#dont_use_specific_css_methodologies) - [Utiliser des unités flexibles/relatives](#use_flexiblerelative_units) - [Ne pas utiliser de réinitialisation](#dont_use_resets) - [Planifiez votre CSS — évitez les surcharges](#plan_your_css_%e2%80%94_avoid_overriding) - [Style général de codage CSS](#general_css_coding_style) - [Utiliser une syntaxe étendue](#use_expanded_syntax) - [Privilégiez les règles longues aux règles raccourcies](#favor_longhand_rules_over_terse_shorthand) - [Utilisez des guillemets doubles autour des valeurs](#use_double_quotes_around_values) - [Espacement autour des paramètres de la fonction](#spacing_around_function_parameters) - [Commentaires CSS](#css_comments) - [Ne pas utiliser !important](#dont_use_!important) - [Points de syntaxe CSS spécifiques](#specific_css_syntax_points) - [Désactiver les bordures et autres propriétés](#turning_off_borders_and_other_properties) - [Utilisez des requêtes média "mobile first"](#use_mobile_first_media_queries) - [Sélecteurs](#selectors) - [N'utilisez pas de sélecteurs ID](#dont_use_id_selectors) - [Mettre les sélecteurs multiples sur des lignes séparées](#put_multiple_selectors_on_separate_lines) ## Lignes directrices de haut niveau ### N'utilisez pas de préprocesseurs N'utilisez pas la syntaxe des préprocesseurs, ex. [Sass](https://sass-lang.com/), [Less](http://lesscss.org/), ou [Stylus,](http://stylus-lang.com/) dans votre code d'exemple MDN. MDN documente le langage CSS classique, et l'utilisation de préprocesseurs ne sert qu'à élever la barre pour comprendre les exemples, ce qui peut potentiellement perdre les lecteurs. ### N'utilisez pas de méthodologies CSS spécifiques Dans le même esprit que la directive précédente, n'écrivez pas de code d'exemple MDN en utilisant une méthodologie CSS spécifique telle que [BEM](http://getbem.com/naming/) ou [SMACSS](https://smacss.com/). Même s'il s'agit de syntaxe CSS valide, les conventions de dénomination peuvent prêter à confusion pour les personnes qui ne sont pas familières avec ces méthodologies. ### Utiliser des unités flexibles/relatives Pour une flexibilité maximale sur le plus grand nombre possible d'appareils, il est judicieux de dimensionner les conteneurs, le `padding`, etc. en utilisant des unités relatives comme les `em` et les `rem`, ou des pourcentages et des unités de « viewport » si vous souhaitez qu'ils varient en fonction de la largeur du « viewport ». Vous pouvez en savoir plus à ce sujet dans notre article [Éléments de construction d'un design adaptatif (Responsive Design)](/fr/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks#fluid_grids). ### Ne pas utiliser de réinitialisation Pour un contrôle maximal des CSS sur toutes les plates-formes, beaucoup de gens avaient l'habitude d'utiliser les réinitialisations CSS pour supprimer tous les styles, avant de reconstruire les choses eux-mêmes. Cette méthode a certainement ses mérites, mais surtout dans le monde moderne, les réinitialisations CSS peuvent être excessives et entraîner beaucoup de temps supplémentaire passé à réimplémenter des choses qui n'étaient pas complètement cassées au départ, comme les marges par défaut, les styles de liste, etc. Si vous avez vraiment envie d'utiliser une réinitialisation, envisagez d'utiliser [normalize.css de Nicolas Gallagher](https://necolas.github.io/normalize.css/), qui vise simplement à rendre les choses plus cohérentes d'un navigateur à l'autre, à se débarrasser de certains désagréments par défaut que nous supprimons toujours (les marges sur ``, par exemple) et à corriger quelques bogues. ### Planifiez votre CSS — évitez les surcharges Avant de vous lancer dans l'écriture de gros morceaux de CSS, planifiez soigneusement vos styles. Quels styles généraux seront nécessaires, quelles mises en page différentes devrez-vous créer, quelles redéfinitions spécifiques devront être créées et seront-elles réutilisables ? Par-dessus tout, vous devez essayer d'éviter de créer trop de redéfinitions. Si vous vous retrouvez constamment en train d'écrire des styles pour ensuite les annuler quelques règles plus bas, vous devez probablement repenser votre stratégie. ## Style général de codage CSS ### Utiliser une syntaxe étendue Vous pouvez utiliser différents styles d'écriture CSS, mais nous préférons le style étendu, avec le sélecteur/l'accolade ouvrante, l'accolade fermante et chaque déclaration sur une ligne distincte. Cela optimise la lisibilité et favorise la cohérence sur le MDN. Utilisez ceci : ```css example-good p { color: white; background-color: black; padding: 1rem; } ``` Pas cela : ```css example-bad p { color: white; background-color: black; padding: 1rem; } ``` En outre, gardez ces spécificités à l'esprit : - Insérez un espace entre le(s) sélecteur(s) et l'accolade ouvrante. - Incluez toujours un point-virgule à la fin de la dernière déclaration, même si ce n'est pas strictement nécessaire. - Mettez l'accolade de fermeture sur une nouvelle ligne. - Dans chaque déclaration, mettez un espace après les deux points de séparation, mais pas avant. - Utilisez 2 espaces pour l'indentation du code. ### Privilégiez les règles longues aux règles raccourcies En général, lorsque vous enseignez les spécificités de la syntaxe CSS, il est plus clair et plus évident d'utiliser des propriétés longues plutôt que des raccourcies (à moins bien sûr que l'enseignement du raccourci ne soit le but de l'exemple). N'oubliez pas que les exemples du MDN ont pour but d'enseigner aux gens, et non d'être efficaces ou astucieuses. Tout d'abord, il est souvent plus difficile de comprendre ce que fait le raccourci. Il faut un certain temps pour comprendre exactement ce que fait la syntaxe [`font`](/fr/docs/Web/CSS/font), par exemple : ```css font: small-caps bold 2rem/1.5 sans-serif; ``` Alors que celle-ci est plus immédiate en termes de compréhension : ```css font-variant: small-caps; font-weight: bold; font-size: 2rem; line-height: 1.5; font-family: sans-serif; ``` Deuxièmement, les raccourcis CSS comportent des pièges potentiels supplémentaires : des valeurs par défaut sont définies pour des parties de la syntaxe que vous n'avez pas explicitement définies, ce qui peut produire des réinitialisations inattendues des valeurs que vous avez définies plus tôt dans la cascade, ou d'autres effets attendus. Par exemple, la propriété [`grid`](/fr/docs/Web/CSS/grid) définit toutes les valeurs par défaut suivantes pour les éléments qui ne sont pas spécifiés : - [`grid-template-rows`](/fr/docs/Web/CSS/grid-template-rows): `none` - [`grid-template-columns`](/fr/docs/Web/CSS/grid-template-columns): `none` - [`grid-template-areas`](/fr/docs/Web/CSS/grid-template-areas): `none` - [`grid-auto-rows`](/fr/docs/Web/CSS/grid-auto-rows): `auto` - [`grid-auto-columns`](/fr/docs/Web/CSS/grid-auto-columns): `auto` - [`grid-auto-flow`](/fr/docs/Web/CSS/grid-auto-flow): `row` - [`column-gap`](/fr/docs/Web/CSS/column-gap): `0` - [`row-gap`](/fr/docs/Web/CSS/row-gap): `0` - [`column-gap`](/fr/docs/Web/CSS/column-gap): `normal` - [`row-gap`](/fr/docs/Web/CSS/row-gap): `normal` En outre, certains raccourcis ne fonctionnent comme prévu que si vous incluez les différents composants de la valeur dans un certain ordre. Dans les animations CSS, par exemple : ```css /* duration | timing-function | delay | iteration-count direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; ``` À titre d'exemple, la première valeur qui peut être analysée comme un [`