{"id":60048,"date":"2022-07-28T08:39:14","date_gmt":"2022-07-28T07:39:14","guid":{"rendered":"https:\/\/kinqsta.com\/fr\/?p=60048&preview=true&preview_id=60048"},"modified":"2024-08-22T09:43:54","modified_gmt":"2024-08-22T08:43:54","slug":"meilleurs-pratiques-css","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/fr\/blog\/meilleurs-pratiques-css\/","title":{"rendered":"14 meilleures pratiques CSS pour les d\u00e9butants"},"content":{"rendered":"

Lorsque vous vous lancez dans la conception de sites web, un \u00e9l\u00e9ment cl\u00e9 pour que tout fonctionne correctement et ressemble \u00e0 ce que vous voulez est le CSS. C’est l’abr\u00e9viation de Cascading Style Sheets (feuilles de style en cascade), et elles fonctionnent en vous permettant de styliser les \u00e9l\u00e9ments HTML<\/a> comme vous le souhaitez.<\/p>\n

Et bien que vous puissiez exp\u00e9rimenter le CSS de plusieurs fa\u00e7ons – le plus souvent en ligne – il existe une meilleure fa\u00e7on de proc\u00e9der. Et cela s’inscrit dans une s\u00e9rie de bonnes pratiques que vous devriez suivre pour vous assurer que votre code<\/a> est fonctionnel, d\u00e9pourvu d’encombrement inutile et bien organis\u00e9.<\/p>\n

Aujourd’hui, nous allons mettre en lumi\u00e8re 14 meilleures pratiques CSS pour les d\u00e9butants, mais m\u00eame les professionnels exp\u00e9riment\u00e9s devraient parfois r\u00e9viser les bases.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Consultez notre guide vid\u00e9o avec les meilleures pratiques CSS pour les d\u00e9butants<\/a><\/strong>
\n<\/kinsta-video><\/p>\n

1. Organiser la feuille de style<\/h2>\n

Votre premier ordre du jour lorsque vous appliquez les meilleures pratiques CSS est d’organiser vos feuilles de style. La mani\u00e8re dont vous aborderez cette t\u00e2che d\u00e9pendra de votre projet, mais en r\u00e8gle g\u00e9n\u00e9rale, vous voudrez respecter les principes d’organisation suivants :<\/p>\n

Soyez coh\u00e9rent<\/h3>\n

Quelle que soit la fa\u00e7on dont vous choisissez d’organiser votre CSS, veillez \u00e0 ce que vos choix soient coh\u00e9rents dans l’ensemble de la feuille de style ainsi que sur l’ensemble de votre site web.<\/p>\n

Qu’il s’agisse de la d\u00e9nomination des classes, de l’indentation des lignes ou de la structure des commentaires, la coh\u00e9rence de l’ensemble vous permettra de suivre plus facilement votre travail. De plus, cela vous garantit que les modifications ult\u00e9rieures ne seront pas un casse-t\u00eate.<\/p>\n\n

Utilisez les sauts de ligne \u00e0 profusion<\/h3>\n

Bien que le CSS fonctionne m\u00eame s’il est visuellement laid, il est pr\u00e9f\u00e9rable pour vous et pour tous les autres d\u00e9veloppeurs qui travailleront avec votre code que vous utilisiez beaucoup de sauts de ligne pour que chaque extrait de code soit s\u00e9par\u00e9 et lisible.<\/p>\n

En g\u00e9n\u00e9ral, il est pr\u00e9f\u00e9rable de placer chaque paire de propri\u00e9t\u00e9s et de valeurs sur une nouvelle ligne<\/a>.<\/p>\n

\"Code
Code CSS<\/figcaption><\/figure>\n

Cr\u00e9ez de nouvelles sections l\u00e0 o\u00f9 cela a du sens<\/h3>\n

Encore une fois, la fa\u00e7on dont vous configurez vos feuilles de style d\u00e9pendra largement du type de site sur lequel vous travaillez. Mais en r\u00e8gle g\u00e9n\u00e9rale, c’est une bonne id\u00e9e de cr\u00e9er des sections pour les styles tels qu’ils seront utilis\u00e9s. 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\u00eame cr\u00e9er des sections pour des pages sp\u00e9cifiques qui peuvent avoir un style diff\u00e9rent du reste, comme la boutique ou la FAQ.<\/p>\n

Commentez votre code<\/h3>\n

M\u00eame si vous \u00eates le seul \u00e0 voir votre CSS, il est toujours bon d’\u00eatre minutieux avec vos commentaires. Les commentaires ressembleront \u00e0 ce qui suit :<\/p>\n

\/* Ceci est l'aspect standard d'un commentaire CSS *\/<\/code><\/pre>\n
Il est ainsi plus facile pour vous de comprendre d’un coup d’\u0153il la relation entre chaque section sans avoir \u00e0 \u00e9plucher chaque ligne par la suite.<\/p>\n
Les commentaires peuvent vous aider \u00e0 d\u00e9finir les sections, mais vous pouvez \u00e9galement les utiliser pour donner un aper\u00e7u des d\u00e9cisions que vous avez prises – surtout si vous pensez que vous risquez d’oublier plus tard.<\/p>\n
Utilisez des feuilles de style distinctes pour les projets plus importants<\/h3>\n
Cela ne s’applique pas \u00e0 tous les sites web, mais si vous avez un site de grande taille n\u00e9cessitant beaucoup de CSS sp\u00e9cifiques, l’utilisation de plusieurs feuilles de style est une bonne id\u00e9e. Personne – y compris vous – ne devrait avoir \u00e0 faire d\u00e9filer les pages pendant un temps super long pour trouver la seule ligne de code dont vous avez besoin.<\/p>\n
\u00c9vitez les tracas et cr\u00e9ez des feuilles de style distinctes pour les diff\u00e9rentes sections du site – surtout si elles auront des styles enti\u00e8rement diff\u00e9rents.<\/p>\n
Par exemple, vous pouvez cr\u00e9er une feuille de style pour les styles g\u00e9n\u00e9raux et une autre pour votre boutique en ligne<\/a> avec un style d\u00e9di\u00e9 aux descriptions de produits, aux en-t\u00eates ou aux prix.<\/p>\n
2. CSS en ligne vs. CSS externe vs. CSS interne<\/h2>\n
Il existe trois types diff\u00e9rents de CSS avec lesquels vous pouvez \u00eatre amen\u00e9 \u00e0 travailler lors de la cr\u00e9ation 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.<\/p>\n