Lorsque vous vous lancez dans la conception de sites web, un élément clé pour que tout fonctionne correctement et ressemble à ce que vous voulez est le CSS. C’est l’abréviation de Cascading Style Sheets (feuilles de style en cascade), et elles fonctionnent en vous permettant de styliser les éléments HTML comme vous le souhaitez.

Et bien que vous puissiez expérimenter le CSS de plusieurs façons – le plus souvent en ligne – il existe une meilleure façon de procéder. Et cela s’inscrit dans une série de bonnes pratiques que vous devriez suivre pour vous assurer que votre code est fonctionnel, dépourvu d’encombrement inutile et bien organisé.

Aujourd’hui, nous allons mettre en lumière 14 meilleures pratiques CSS pour les débutants, mais même les professionnels expérimentés devraient parfois réviser les bases.

Consultez notre guide vidéo avec les meilleures pratiques CSS pour les débutants

1. Organiser la feuille de style

Votre premier ordre du jour lorsque vous appliquez les meilleures pratiques CSS est d’organiser vos feuilles de style. La manière dont vous aborderez cette tâche dépendra de votre projet, mais en règle générale, vous voudrez respecter les principes d’organisation suivants :

Soyez cohérent

Quelle que soit la façon dont vous choisissez d’organiser votre CSS, veillez à ce que vos choix soient cohérents dans l’ensemble de la feuille de style ainsi que sur l’ensemble de votre site web.

Qu’il s’agisse de la dénomination des classes, de l’indentation des lignes ou de la structure des commentaires, la cohérence de l’ensemble vous permettra de suivre plus facilement votre travail. De plus, cela vous garantit que les modifications ultérieures ne seront pas un casse-tête.

Utilisez les sauts de ligne à profusion

Bien que le CSS fonctionne même s’il est visuellement laid, il est préférable pour vous et pour tous les autres développeurs qui travailleront avec votre code que vous utilisiez beaucoup de sauts de ligne pour que chaque extrait de code soit séparé et lisible.

En général, il est préférable de placer chaque paire de propriétés et de valeurs sur une nouvelle ligne.

Code CSS
Code CSS

Créez de nouvelles sections là où cela a du sens

Encore une fois, la façon dont vous configurez vos feuilles de style dépendra largement du type de site sur lequel vous travaillez. Mais en règle générale, c’est une bonne idée de créer des sections pour les styles tels qu’ils seront utilisés. Ainsi, une section pour les styles de texte, une section pour les listes et les colonnes, une section pour la navigation et les liens, et ainsi de suite. Vous pouvez même créer des sections pour des pages spécifiques qui peuvent avoir un style différent du reste, comme la boutique ou la FAQ.

Commentez votre code

Même si vous êtes le seul à voir votre CSS, il est toujours bon d’être minutieux avec vos commentaires. Les commentaires ressembleront à ce qui suit :

/* Ceci est l'aspect standard d'un commentaire CSS */

Il est ainsi plus facile pour vous de comprendre d’un coup d’œil la relation entre chaque section sans avoir à éplucher chaque ligne par la suite.

Les commentaires peuvent vous aider à définir les sections, mais vous pouvez également les utiliser pour donner un aperçu des décisions que vous avez prises – surtout si vous pensez que vous risquez d’oublier plus tard.

Utilisez des feuilles de style distinctes pour les projets plus importants

Cela ne s’applique pas à tous les sites web, mais si vous avez un site de grande taille nécessitant beaucoup de CSS spécifiques, l’utilisation de plusieurs feuilles de style est une bonne idée. Personne – y compris vous – ne devrait avoir à faire défiler les pages pendant un temps super long pour trouver la seule ligne de code dont vous avez besoin.

Évitez les tracas et créez des feuilles de style distinctes pour les différentes sections du site – surtout si elles auront des styles entièrement différents.

Par exemple, vous pouvez créer une feuille de style pour les styles généraux et une autre pour votre boutique en ligne avec un style dédié aux descriptions de produits, aux en-têtes ou aux prix.

2. CSS en ligne vs. CSS externe vs. CSS interne

Il existe trois types différents de CSS avec lesquels vous pouvez être amené à travailler lors de la création d’un site web et de l’ajustement de son style. Parlons un peu de ce qu’ils sont et de ce qu’ils font, puis de ceux que vous devriez utiliser pour vos projets.

  • CSS en ligne. Cela vous permet de styliser des éléments HTML spécifiques,
  • CSS externe. Il s’agit d’utiliser un fichier tel qu’une feuille de style pour styliser le site dans son ensemble.
  • CSS interne. Cela vous permet de styliser une page entière plutôt que des éléments spécifiques.

De nombreux développeurs recommandent d’éviter tout CSS en ligne, car il ne peut généralement pas être mis en cache, et il est recommandé d’éviter de répartir le CSS sur plusieurs fichiers. À tout le moins, il faut l’utiliser avec parcimonie.

Nous n’en voyons vraiment la nécessité que si vous utilisez un peu de style sur une section, un bout de texte ou une zone unique d’une page unique de votre site web. C’est probablement la seule situation où le CSS en ligne est une solution viable.

Sinon, l’utilisation de CSS externes ou internes, selon vos besoins, sont les meilleures options car elles vous font gagner du temps et de l’énergie. Déterminez les styles une fois, et appliquez-les à l’ensemble de votre site web. Boum – terminé.

3. Minifiez votre feuille de style

Une autre des meilleures pratiques CSS consiste à minifier vos feuilles de style. Il existe de nombreux outils de minification disponibles pour accélérer les temps de chargement de vos feuilles de style.

4. Utilisez un pré-processeur

Un pré-processeur tel que Sass/SCSS vous permet d’utiliser des variables et des fonctions, de mieux organiser votre CSS et de gagner du temps. Ils fonctionnent en vous permettant de créer des CSS à partir de la syntaxe du préprocesseur.

Ce que cela signifie, c’est que le préprocesseur est comme un « CSS + » où il inclut quelques fonctionnalités qui n’existent généralement pas dans le CSS par lui-même. L’ajout de ces fonctionnalités rend le plus souvent le CSS de sortie plus lisible et plus facile à parcourir.

Vous aurez besoin d’un compilateur CSS sur le serveur de votre site web pour utiliser les pré-processeurs. Parmi les pré-processeurs les plus populaires figurent Sass, LESS et Stylus.

Sass
Sass

5. Envisagez un framework CSS

Les frameworks CSS peuvent être utiles dans certains cas mais peuvent être inutiles pour beaucoup de personnes, surtout si votre site web est de petite taille.

Les frameworks peuvent faciliter le déploiement rapide de grands projets, et aussi éviter les bogues. Et ils offrent l’avantage de la normalisation, ce qui est essentiel lorsque plusieurs personnes travaillent sur un projet en même temps.

Tout le monde utilisera les mêmes procédures de nommage, les mêmes options de mise en page, les mêmes procédures de commentaires, etc.

D’un autre côté, ils donnent également lieu à des sites web d’apparence générique et une grande partie du code peut finir par être inutilisée.

Bootstrap
Bootstrap

Il est probable que vous ayez déjà rencontré des frameworks CSS. Bootstrap et Foundation sont deux des exemples les plus populaires. Parmi les autres frameworks, citons Tailwind CSS et Bulma.

6. Commencez par une réinitialisation

Une autre chose à mettre rapidement en pratique est de commencer votre travail de développement par une réinitialisation CSS. L’utilisation de quelque chose comme normalize.css peut faire en sorte que tous les navigateurs rendent les éléments de la page de manière cohérente tout en suivant les normes les plus récentes pour minimiser les incohérences entre les navigateurs.

Cette réinitialisation est en fait un petit fichier CSS que vous téléversez sur votre site web pour ajouter un plus grand niveau de cohérence inter-navigateurs au style des éléments HTML et sert de moyen actualisé pour effectuer une réinitialisation CSS.

7. Classes ou ID

La prochaine chose à laquelle vous devez prêter attention lorsque vous suivez les meilleures pratiques CSS est la façon dont vous traitez les classes et les ID. Au cas où vous ne seriez pas familier, définissons-les brièvement :

  • Classe. Le sélecteur de classe fonctionne en sélectionnant un élément avec un attribut de classe. Le contenu de l’attribut class est ce qui détermine la façon dont l’élément HTML est sélectionné. Cela ressemble à ceci en code : .classname
  • ID. ID, d’autre part, fonctionne en sélectionnant un élément avec un attribut ID. L’attribut ID doit être identique à la valeur du sélecteur pour que cela fonctionne. Vous pouvez repérer un ID dans CSS par ce symbole : #.

Un ID est utilisé pour sélectionner un seul élément tandis qu’une classe est utilisée pour sélectionner plusieurs éléments. Vous utilisez un ID pour appliquer un style à un seul élément HTML. Vous utilisez une classe pour appliquer un style à plus d’un élément HTML. Le respect de cette règle générale permet de garder votre code propre et ordonné et réduit également le cas de code inutile ou dupliqué.

Comme dans notre discussion sur les CSS en ligne et externes ci-dessus, vous utilisez un ID pour appliquer un style à un seul élément. Fondamentalement, les ID sont destinés à être utilisés pour styliser les exceptions de la page, et non pour des styles généraux qui s’appliqueraient à l’ensemble de la page ou du site web.

8. Évitez la redondance

Une autre des meilleures pratiques CSS à suivre est d’éviter la redondance quand vous le pouvez. Voici quelques conseils généraux à suivre pour appliquer cette pratique à votre flux de travail :

Utilisez la méthode DRY

La méthode DRY est l’abréviation de « Don’t Repeat Yourself » (ne vous répétez pas). Il s’agit essentiellement de l’idée que vous ne devez jamais répéter du code en CSS. Car au mieux, c’est une perte de temps et c’est répétitif pour vous de saisir manuellement ces styles encore et encore, mais au pire, cela peut activement ralentir votre site web.

C’est une bonne pratique de revoir votre code pour supprimer les redondances. Il est inutile que des balises identifient la taille de la police deux fois dans la même section, par exemple. Supprimez les répétitions et votre code sera plus lisible et plus performant.

Utilisez les raccourcis CSS

Les raccourcis CSS sont un excellent moyen de réduire l’espace occupé par votre code tout en conservant ses performances. Vous pouvez combiner plusieurs styles dans une seule ligne si cela s’avère judicieux. Par exemple, si vous définissez les styles d’un div particulier, vous pouvez énumérer la marge, la marge intérieure (padding,) la police, la taille de la police et la couleur sur une seule ligne.

Ajoutez plusieurs classes à vos éléments

Le cas échéant, vous pouvez également éviter les redondances en ajoutant plus d’une classe à un élément. Par exemple, si le contenu de votre page flotte déjà à gauche grâce à la classe .left mais que vous souhaitez positionner une colonne sur la page à droite, vous pouvez l’ajouter à l’élément pour éviter toute confusion et indiquer spécifiquement à CSS quel élément vous souhaitez faire flotter à droite en plus de l’alignement standard à gauche.

Et le meilleur, c’est que vous pouvez ajouter autant de classes que vous le souhaitez à un élément, à condition qu’elles soient séparées par un espace.

Combinez les éléments lorsque c’est possible

Plutôt que de lister les éléments un par un, combinez-les pour gagner de la place et du temps. Souvent, les éléments d’une même feuille de style auront les mêmes styles (ou des styles similaires). Il n’est pas nécessaire de lister la police, la couleur et l’alignement de chaque élément de texte sur la page s’ils partagent tous le même style. Au lieu de cela, combinez-les en une seule ligne comme ceci :

h1, h2, h3, p {
font-family: arial,
color: #00000
}

Évitez les sélecteurs supplémentaires inutiles

Parfois, votre code devient un peu désordonné lorsque vous finalisez la conception de votre site. C’est pourquoi il est important de revenir en arrière et de supprimer les sélecteurs inutiles après coup. Vous devez également garder un œil sur les sélecteurs trop complexes. Par exemple, si vous avez l’intention de donner un style aux listes de votre site web, vous n’avez pas besoin d’utiliser des sélecteurs comme « body » ou « container » ou quoi que ce soit de ce genre. Un simple .classname li { suffira.

9. Comment importer correctement des polices

Importer et utiliser correctement les polices est un autre moyen de s’assurer que votre CSS est clair, concis et optimisé.

Utiliser @font-face pour importer des polices

Vous pouvez ajouter à peu près toutes les polices que vous voulez à votre site web, mais vous devrez suivre une procédure spécifique pour vous assurer qu’elles fonctionnent correctement.

Générateur de police web
Générateur de police web
  1. Téléchargez la police que vous souhaitez utiliser. Il existe de nombreux endroits où vous pouvez vous procurer des polices, notamment Google et Adobe. Assurez-vous que vous téléchargez le fichier TrueType (.ttf) de la police que vous avez choisie.
  2. Téléversez la police personnalisée que vous souhaitez utiliser dans le générateur de polices web mis à disposition par Font Squirrel. Téléchargez le Web Font Kit une fois qu’il est généré. Il doit contenir plusieurs fichiers, dont plusieurs fichiers de polices différentes avec des extensions telles que .ttf, .woff, .woff2 et .eot. Un fichier CSS doit également être inclus.
  3. Téléversez le Web Font Kit sur votre site web à l’aide du FTP. Les instructions spécifiques à ce sujet varient en fonction de votre hébergeur, mais en général, vous pouvez accéder aux fichiers de votre site à l’aide d’un client FTP ou du gestionnaire de fichiers de l’interface d’administration de votre hébergeur, comme cPanel.
  4. Mettez à jour le fichier CSS à l’aide d’un éditeur de texte. Tout éditeur de texte HTML que vous préférez fera l’affaire, comme NotePad ou Sublime. Dans ce fichier, il y aura une « URL source » répertoriée. Vous devrez la mettre à jour pour refléter l’endroit où le Web Font Kit est maintenant hébergé sur votre serveur web. Copiez dans ce fichier le chemin d’accès à l’endroit où chaque fichier de police est stocké sur votre hôte web, comme suit :
@font-face {
font-family: "FontName";
src: url("https://sitename.com/css/fonts/FontName.eot");
src: url("https://sitename.com/css/fonts/FontName.woff") format("woff"),
url("https://sitename.com/css/fonts/FontName.otf") format("opentype"),
url("https://sitename.com/css/fonts/FontName.svg#filename") format("svg");
}

Vous pouvez ensuite mettre vos nouvelles polices à profit en les ajoutant aux fichiers CSS de votre site avec la balise font-family.

Pour améliorer les performances du site et éviter les réajustements bizarres de la mise en page de votre site lors de son chargement, vous pouvez précharger les polices. Précharger les polices et charger d’abord les polices WOFF2 (ou la plus petite taille de police) peut améliorer considérablement les performances. Pour ce faire, ajoutez une ligne de code à la balise <head>. Better Web Type propose un exemple concis :

<link rel="preload" as="font" href="/assets/fonts/3A1C32_0_0.woff2" type="font/woff2" crossorigin="crossorigin">

Une autre chose que vous pouvez faire est de limiter le jeu de caractères pour vos polices personnalisées. Si vous n’utilisez que quelques caractères d’une police (pour un en-tête ou un logo, par exemple), vous n’avez pas besoin de faire appel à l’ensemble des caractères, mais seulement à ceux dont vous avez réellement besoin. Pour demander uniquement les caractères « Hello », vous devez procéder comme suit :

<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">

Polices auto-hébergées lorsque cela est possible

Le processus décrit ci-dessus concerne les polices auto-hébergées, mais il est important de répéter que c’est la meilleure approche. Elle accélère considérablement le temps de chargement et signifie que vous ne dépendez pas de la vitesse d’un autre site pour terminer le processus de chargement de votre site.

Soyez prudent avec les variations de polices

Les variations de polices peuvent être super utiles pour ajouter des styles amusants à votre site web. Cependant, si elles sont mal utilisées, elles peuvent aussi carrément casser votre site web.

Si vous attribuez plus d’un style sous font-variation-settings, il est probable qu’ils se chevauchent et que l’un d’eux prévale sur l’autre. Il est préférable de garder les choses simples et d’utiliser les propriétés de police à la place, comme illustré ici :

.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}

Utilisez une police de secours

Même si vous faites l’effort d’ajouter une police personnalisée à votre site web et de l’utiliser via CSS, elle ne fonctionnera pas toujours, surtout si elle est utilisée par une personne disposant d’un navigateur web obsolète. Mais vous voulez quand même que ces visiteurs du site aient une expérience de navigation agréable.

Pour cela, il est essentiel de définir une police de secours qui pourra être utilisée si aucune de vos autres polices n’est utilisable. Pour ce faire, il vous suffit d’indiquer la police de secours après votre police préférée lors de l’attribution d’une font-family. De cette façon, le CSS appellera votre police préférée en premier, puis votre deuxième choix, puis votre troisième, et ainsi de suite.

Selon W3Schools, il existe cinq catégories principales de familles de polices. Ce qui suit est une liste de ces familles avec les polices de secours populaires qui correspondent à chacune d’elles.

  • Serif : Times New Roman, Georgia, Garamond
  • Sans-serif : Arial, Tahoma, Helvetica
  • Monospace : Courier New
  • Cursive : Brush Script MT
  • Fantasy : Copperplate, Papyrus

10. Rendez le CSS accessible

Tout le monde devrait rendre ses sites web accessibles – sans exception. Et cela vaut également pour votre approche du CSS. Votre objectif doit être de rendre votre site web utilisable par le plus grand nombre de personnes possible et la mise en œuvre de mesures d’accessibilité est un moyen fantastique d’y parvenir.

Vous pouvez rendre votre CSS accessible de plusieurs façons :

  • Ajoutez des variations de couleur aux liens pour les faire ressortir.
  • Faites en sorte que les fenêtres popup puissent être fermées en appuyant sur la touche ESC. Les personnes qui utilisent des lecteurs d’écran ou un système d’agrandissement ne seront souvent pas en mesure de voir le « X » à l’écran pour refuser une fenêtre popup, il est donc essentiel de les rendre désactivables par une simple pression sur une touche.
  • Certains appareils n’affichent même pas les fenêtres popup, alors assurez-vous que toutes les informations essentielles sont transmises ailleurs.
  • Les éléments de survol (comme les infobulles) doivent être déclenchés par la touche Tab ainsi que par un survol de la souris.
  • Ne supprimez pas les contours. Les navigateurs affichent automatiquement un contour autour des éléments sur lesquels le clavier est actuellement focalisé. Vous pouvez désactiver cette fonction en utilisant outline:none, mais vous ne devriez pas, car elle est précieuse pour les personnes qui utilisent des lecteurs d’écran ou qui sont malvoyantes et ont besoin de points de mise en évidence/de focalisation supplémentaires pour la navigation.
  • Améliorez l’indicateur de mise au point. Comme mentionné ci-dessus, les contours autour des éléments mis en évidence sont essentiels à la navigation pour beaucoup, mais le contour par défaut est souvent à peine visible. Vous pouvez le modifier pour qu’il soit plus visible en utilisant :focus pour définir un style qui attire davantage l’attention sur ce qui est actuellement mis en évidence. Vous pouvez faire quelque chose de similaire avec :hover pour améliorer les effets de couverture. Un bon exemple de modification de :focus en action provient d’un ensemble de directives d’accessibilité de l’Université de Washington:
a {
color: black;
background-color: white;
text-decoration: underline
}
a:focus, a:hover {
color: white;
background-color: black;
text-decoration: none
}

Cet extrait de code fait en sorte que les liens s’affichent sous la forme d’un texte noir sur un fond blanc mais passent à un texte blanc sur un arrière-plan lorsqu’ils sont placés sous le focus du clavier (lorsque l’utilisateur tape sur l’élément). Le même effet se produit au survol de l’élément.

11. Implémentez des conventions de nommage

Cela peut sembler insignifiant sur le moment, mais le nom que vous décidez de donner aux éléments en CSS peut avoir des répercussions durables – et peut activement vous coûter du temps et de l’argent à l’avenir s’il est mal fait. Avant même de commencer à écrire du CSS, vous devriez décider d’une série de conventions de nommage et vous y tenir.

Cela vous fera gagner beaucoup de temps sur le débogage plus tard, car vous êtes moins susceptible de vous référer au mauvais élément lorsque vous écrivez votre code. Selon FreeCodeCamp, une bonne approche consiste à s’en tenir au formatage standard pour les noms CSS, c’est-à-dire font-weight vs fontWeight.

Utilisez la convention de nommage BEM

Un bon moyen de garder les noms cohérents est d’utiliser la convention de nommage BEM. L’objectif du BEM est de diviser l’interface utilisateur en composants que vous pouvez réutiliser à l’infini.

BEM est l’abréviation de Block, Element, and Modifier. Mais décomposons ce que cela signifie réellement.

  • Block : Un bloc peut être n’importe quel élément de conception sur votre site web, comme un menu, un en-tête, un pied de page ou une colonne. Vos blocs doivent porter des noms tels que .main-nav ou .footer.
  • Element. Les éléments décrivent les pièces qui composent chaque bloc. Pensez à des éléments comme les polices, les couleurs, les boutons, les listes ou les liens. Lorsque vous utilisez la convention de nommage BEM, les éléments sont identifiés en plaçant deux traits de soulignement devant le nom de l’élément. Ainsi, si nous voulions parler de la police utilisée dans l’en-tête de votre site web, cela ressemblerait à ceci en CSS avec la convention de nommage BEM : .header__font
  • Modifier. La dernière pièce du puzzle BEM est le modificateur. Les modificateurs vous permettent d’établir le style de l’élément dans le bloc. Ils comprennent des éléments tels que les noms, les poids et les tailles des polices, les valeurs de couleur et les valeurs d’alignement. Si vous souhaitez définir la couleur de la police dans l’en-tête, vous devez écrire l’élément et le modificateur séparés par deux tirets : .header__font-red

Le respect de cette convention de nommage – ou d’une autre convention décidée par votre équipe – peut rendre l’expérience d’édition et de débogage beaucoup plus agréable par la suite.

12. Évitez la balise !Important

Une autre bonne pratique à intégrer dans votre routine de travail CSS est d’éviter autant que possible de sur-utiliser la balise !important.

Bien qu’elle puisse résoudre des problèmes, son utilisation conduit souvent à s’y fier comme à une béquille. Et cela peut se traduire par un fouillis de balises !important dans tout votre code, ce qui peut finir par casser votre site.

Il s’agit en fait de spécificité. Si un sélecteur est très spécifique, votre navigateur web déterminera qu’il est plus important qu’il ne le ferait avec des sélecteurs moins spécifiques. La balise !important peut être utilisée pour identifier les propriétés qui sont plus importantes que les autres.

Cela peut s’avérer délicat, car vous devrez souvent utiliser plusieurs balises !important, chacune pour remplacer la précédente dans des scénarios spécifiques. Et si vous le faites trop souvent, votre site risque de se casser ou vos styles de ne pas se charger correctement. Le plus souvent, cette balise est utilisée comme une solution à court terme, mais elle devient souvent permanente et peut poser des problèmes plus tard, notamment lorsqu’il s’agit de déboguer.

L’une des seules fois où l’utilisation de la balise !important est jugée acceptable est pour permettre à l’utilisateur final de remplacer les styles pour une utilisation avec des lecteurs d’écran et autres aides à l’accessibilité. Elle est également utile lorsqu’il s’agit de classes utilitaires.

13. Utilisez Flexbox

Vous pouvez également utiliser Flexbox lorsque vous essayez de mettre en œuvre les meilleures pratiques de traitement des CSS dans votre flux de travail. Flexbox est un moyen flexible de créer une mise en page web et d’aligner les éléments sur la page, plutôt que d’utiliser l’option traditionnelle float.

Selon CSS-Tricks, Flexbox est un module de boîte flexible qui constitue une manière alternative de structurer votre CSS en prêtant attention à la manière dont vos mises en page sont alignées et distribuées dans un conteneur. La meilleure partie est que la taille du conteneur lui-même n’a pas besoin d’être connue, et plutôt les propriétés contenues seront « flex » avec la taille changeante du conteneur. C’est un excellent moyen de s’adapter aux appareils mobiles.

Une autre différence essentielle est que le Flexbox est « agnostique », ce qui signifie que ses mises en page ne sont pas structurées verticalement ou horizontalement. Cela en fait un meilleur choix pour la conception de sites web et d’applications complexes qui doivent s’adapter à de nombreux changements d’orientation de l’écran. Les mises en page CSS standard sont basées sur les blocs et les mises en page flexbox reposent sur le « « lex-flow ». Là encore, CSS-Tricks propose un dessin concis qui illustre bien ce concept :

Comment les mises en page flexbox fonctionnent selon CSS-Tricks
Comment les mises en page flexbox fonctionnent selon CSS-Tricks

Les éléments de la boîte flexible sont disposés sur l’axe principal et l’axe transversal, où chaque élément et chaque propriété sont conçus pour s’adapter et s’écouler en fonction de la taille du conteneur flexible.

14. Conseil WordPress : Ne modifiez pas directement les fichiers du thème

La dernière des meilleures pratiques CSS dont nous allons parler aujourd’hui s’adresse spécifiquement aux utilisateurs de WordPress. Ce n’est jamais une bonne idée de modifier directement les fichiers de votre thème. Toute mise à jour du site pourrait effacer ces modifications ou casser votre site. Le risque n’en vaut pas la peine.

Au lieu de cela, vous pouvez utiliser l’option CSS supplémentaire dans la personnalisation du thème pour apporter les modifications que vous souhaitez. Cependant, vous devez garder à l’esprit que cette option injecte le CSS en ligne et le place directement dans l’en-tête.

Si vous ne souhaitez apporter qu’une ou deux modifications, cette option peut être viable. Toutefois, tout ce que vous placez dans la case CSS supplémentaire restera en place, même si vous effectuez une mise à jour du thème, une mise à jour du site ou même si vous changez de thème.

Si des modifications CSS plus importantes sont nécessaires, il est préférable de les ajouter à partir d’une feuille de style CSS personnalisée ou en utilisant un thème enfant dans lequel vous modifiez directement le fichier style.css du thème enfant. Cette méthode est également à l’épreuve des mises à jour.

Résumé

Plonger tête baissée dans la création de CSS utiles et précis peut sembler beaucoup pour un vrai débutant, mais prendre le temps de s’éduquer sur les meilleures pratiques peut vous épargner beaucoup de temps, d’efforts et de maux de tête par la suite.

Nous espérons que cette collection de meilleures pratiques vous aidera à vous diriger sur la bonne voie pour créer des sites web fonctionnels et accessibles pour les années à venir. Bonne chance !

Salman Ravoof

Salman Ravoof est un développeur web autodidacte, un écrivain, un créateur et un grand admirateur des logiciels libres. Outre la technologie, il est passionné par la science, la philosophie, la photographie, les arts, les chats et la nourriture. Apprenez-en plus sur son site web, et connectez-vous avec Salman sur X.