7 conseils importants pour rédiger un meilleur CSS

L'un des plus gros problèmes de programmation concerne la maintenance. Dans un scénario réel, nous ne commençons pas toujours à développer des projets à partir de zéro. La plupart du temps, on nous attribue (ou prenons) un projet qui a déjà été écrit peut-être quelques années auparavant ou même plus.

Pour travailler efficacement sur ce projet, nous devons d'abord comprendre le code source. C'est le moment où nous réalisons immédiatement l'importance d' un code propre. En tant que développeurs, nous devons essayer d'écrire notre code aussi proprement que possible.

C'est également le cas pour CSS. Il y a certains points auxquels nous devons prêter attention lors de l'écriture de CSS. Dans cet article, je voudrais partager avec vous quelques-uns des plus importants. Je pense que ces 7 conseils vous aideront à améliorer la qualité de votre code CSS.

Alors commençons ... ‌ ‌

1. SEC

DRY signifie "Don't Repeat Yourself" . Il s'agit d'un principe général de développement logiciel et peut être appliqué dans n'importe quel langage de programmation, ainsi qu'en CSS. Comme on peut le comprendre d'après son nom, DRY vise à éviter ou réduire au maximum la répétition.

Par exemple, nous pouvons créer 3 classes CSS pour 3 boutons comme ceci:

.primary-button { background: blue; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .form-button { background: green; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .cancel-button { background: red; color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; }

Ou nous pouvons utiliser le principe DRY en écrivant les règles communes une fois dans une classe supplémentaire et les différentes règles chacune dans d'autres classes:

.button { color: white; border-radius: 5px; padding: 10px 20px; text-align: center; font-size: 16px; } .primary-button { background: blue; } .form-button { background: green; } .cancel-button { background: red; }

Comme on peut le voir, l'application du principe DRY évite les répétitions, diminue le nombre de lignes et améliore la lisibilité et même les performances.

2. Dénomination

Nommer les sélecteurs CSS est un autre point important pour écrire un meilleur CSS. Le nom d'un sélecteur doit être auto-descriptif et lisible ...

// BAD NAMING .p { // Rules } .myFirstForm { // Rules }

Normalement,

est une balise HTML et représente un paragraphe. Ci-dessus, nous ne pouvons pas vraiment comprendre ce qu'est la classe p . En outre, vous devriez éviter les noms comme myFirstForm , et je ne conseille pas d'utiliser le cas de chameau .

À la place, utilisez des noms déclaratifs (séparés par un tiret pour plusieurs noms):

// GOOD NAMING .article-paragraph { // Rules } .contact-form { // Rules }

Je pense que les noms ont plus de sens maintenant :)

Nommer des choses dans la programmation n'est pas si simple, mais il existe différentes conventions de dénomination que vous pouvez utiliser dans votre projet. BEM (modificateur d'élément de bloc) est l'un d'entre eux. J'ai déjà travaillé avec BEM et je peux le recommander.

3. N'utilisez pas de styles en ligne

Eh bien, il y a des arguments sur le Web à ce sujet: certains vous disent de ne jamais utiliser de styles en ligne, tandis que d'autres soutiennent que cela peut être utile dans certains cas.

À mon avis, la meilleure pratique consiste en fait à ne pas utiliser de styles en ligne. Je vais me concentrer ici sur les raisons pour lesquelles nous ne devrions pas.

Séparation des préoccupations

Selon le principe de séparation des préoccupations, la conception (CSS), le contenu (HTML) et la logique (JavaScript) doivent être séparés pour des raisons telles qu'une meilleure lisibilité et une meilleure maintenance.

L'inclusion de règles CSS dans les balises HTML enfreint cette règle:

 Some Text 
Nous devrions plutôt conserver nos règles de style dans des fichiers CSS externes.

Difficultés de recherche

Un autre problème avec l'utilisation des styles en ligne est que nous ne pouvons pas les rechercher. Ainsi, lorsque nous avons besoin de modifier le style, nous recherchons normalement des sélecteurs CSS de l'élément HTML.

Par exemple, modifions la taille de la police du texte sur notre page Web. Pour ce faire, nous trouvons d'abord cette partie spécifique du navigateur où le changement est nécessaire en regardant la structure HTML:

 Some Text 

Ensuite, nous devons trouver le sélecteur, qui est la classe text-bold ici. Enfin, nous allons dans cette classe et apportons les modifications:

.text-bold { font-size: 16px; // change the font-size to 14px font-weight: bold; }

Mais si les règles sont écrites en style inline au lieu d'utiliser des classes:

 Some Text 

Même si nous trouvons la balise HTML, nous ne pouvons pas savoir s'il existe d'autres règles de taille de police dans le HTML ou non. Puisqu'il n'y a pas de sélecteur utilisé, nous devons parcourir toutes les pages HTML une par une, essayer de trouver les autres règles de taille de police et les modifier également.

Ne serait-il pas plus facile avec un sélecteur CSS? Mais il y a quelque chose d'encore pire ...

Problèmes de spécificité / d'écrasement

Les styles en ligne ont la spécificité la plus élevée parmi les sélecteurs CSS (quand on ne compte pas ! Balises importantes ).

Considérant que nous utilisons à la fois une classe et un style en ligne pour un élément:

.text-bold { font-size: 16px; font-weight: bold; }
 Some Text 

Ici, la taille de la police du texte sera de 14 px , car les styles en ligne ont une spécificité plus élevée que les classes CSS. Lorsque vous effectuez un changement dans la classe:

.text-bold { font-size: 20px; font-weight: bold; }

La taille de la police sera toujours de 14px. Donc, votre changement dans la classe CSS ne fonctionnera pas, ce qui vous fera dire:

"Hé, pourquoi mon code CSS ne fonctionne-t-il pas? Je déteste CSS!"

et vous amener à utiliser une balise! important qui fait la magie:

.text-bold { font-size: 20px !important; font-weight: bold; }

Ce qui est un grand non-non et nous amène au point suivant…

4. Évitez la balise! Important

OK, donc votre CSS ne fonctionnait pas comme prévu, et vous l'avez fait fonctionner en appliquant la balise importante:

!important

Que se passe-t-il ensuite? La balise! Important a la spécificité la plus élevée de tous les sélecteurs CSS.

Vous dites essentiellement au navigateur d'appliquer cette règle spécifique avec la balise! Important toujours et en toutes circonstances. Ce n'est pas bon car les règles CSS peuvent différer d'un sélecteur à l'autre, du sélecteur parent à l'enfant.

La seule façon de remplacer une balise importante est d'utiliser une autre balise importante . Et cela conduit à utiliser des balises de plus en plus importantes. Croyez-moi, dans un proche avenir, le code de votre projet en sera plein! des balises importantes , ce qui rend votre code CSS beaucoup plus difficile à maintenir. Alors essayez de ne pas l'utiliser.

5. Use a Preprocessor

Working with a CSS Preprocessor like Sass or LESS is very useful in bigger projects. A preprocessor brings additional features to our CSS code that we normally can't do.

For example, we can define variables, functions and mixins, we can import & export our CSS files in other CSS files and we can write nested CSS code:

A preprocessor has its own syntax and later it gets translated into standard CSS (in a separate CSS file) because browsers don't understand the syntax.

I like working with Sass and have used it in various projects. I have covered some of the advantages of using a CSS Preprocessor here.

6. Use Shorthands

Some of the CSS properties like paddings, margins, fonts and borders can be written in a much simpler way by shorthands. Using shorthands helps to reduce the lines of rules.

So without shorthands, a CSS class would look like this:

.article-container { padding-top: 10px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; margin-top: 10px; margin-bottom: 10px; margin-left: 15px; margin-right: 15px; border-width: 1px; border-style: solid: border-color: black; }

and with shorthands it looks like this:

.article-container { padding: 10px 15px 20px 15px; margin: 10px 15px; border: 1px solid black; }

You can find here more info about how to use shorthands properties and for which CSS properties they can be applied.

7. Add Comments When Necessary

Normally, quality code doesn't need comments because it should already be clear and self-descriptive. But still, in some cases, we may need to write additional explanations.

// Your Comments .example-class { // your rules }

So when you feel that some parts of the code are unclear, then don't be afraid to add comments (but on the other hand, make sure not to overdo it :)).

As a Frontend Developer with a couple of years of experience, these are the most important tips that I can suggest for improving your CSS skills. If you have any questions, or you think there are also other tips for writing better CSS, don't hesitate to comment down below.

If you want to learn more about web development, feel free to follow me on Youtube!

Thank you for reading!