{"id":8587,"date":"2018-11-08T10:30:44","date_gmt":"2018-11-08T09:30:44","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=8587"},"modified":"2025-08-20T17:17:19","modified_gmt":"2025-08-20T15:17:19","slug":"bonnes-pratiques-css-feuille-style","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/","title":{"rendered":"Guide CSS&nbsp;: 10 bonnes pratiques \u00e0 respecter dans votre feuille de style"},"content":{"rendered":"<p>En tant que web designer vous \u00eates souvent amen\u00e9 \u00e0 cr\u00e9er ou modifier un fichier CSS. Mais avec les \u00e9volutions et les mises \u00e0 jour de ce langage il est parfois difficile de d\u00e9cider de la meilleure \u00e9criture \u00e0 adopter.<\/p>\n<p>Dans ce guide, nous allons vous donner les bonnes pratiques \u00e0 respecter pour que votre fichier <a href=\"https:\/\/graphiste.com\/blog\/sites-animations-css\" target=\"_blank\" rel=\"noopener\">CSS<\/a> n\u2019impacte pas la qualit\u00e9 du site que vous d\u00e9veloppez.<\/p>\n<h2>1. Ins\u00e9rer le reset CSS<\/h2>\n<p>L\u2019un des plus gros d\u00e9fis lors du d\u00e9veloppement d\u2019un site web est la compatibilit\u00e9 entre les diff\u00e9rents navigateurs.<\/p>\n<p>Le reset CSS est une feuille de style qui r\u00e9duit consid\u00e9rablement ces erreurs d\u2019incompatibilit\u00e9 gr\u00e2ce \u00e0 un style g\u00e9n\u00e9ral d\u00e9finit, mais facilement personnalisable.<\/p>\n<p><a href=\"https:\/\/necolas.github.io\/normalize.css\/\" target=\"_blank\" rel=\"noopener\">Normalize.css<\/a> est un reset moderne et assez pr\u00e9cis bas\u00e9 sur le HTML 5.<\/p>\n<p>Vous devez ins\u00e9rer la feuille de style de ce reset CSS dans la section &lt;head&gt;, avant la d\u00e9finition de vos styles.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-8647 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/11\/reset-css.png\" alt=\"Reset CSS\" width=\"800\" height=\"235\" \/><\/p>\n<h2>2. Organiser les \u00e9l\u00e9ments<\/h2>\n<p>Pour mieux s\u2019y retrouver vous devez organiser les \u00e9l\u00e9ments de votre feuille de style. Cela signifie que l\u2019ordre doit \u00eatre logique.<\/p>\n<p>Vous commencerez par les \u00e9l\u00e9ments du &lt;body&gt;, puis ceux du &lt;header&gt;, de la &lt;nav&gt; et du &lt;footer&gt;.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-8648 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/11\/organisation-feuille-css.png\" alt=\"Organiser feuille CSS\" width=\"800\" height=\"295\" \/><\/p>\n<h2>3. Respecter les conventions d\u2019\u00e9criture pour les IDs et classes<\/h2>\n<p>Il est important de nommer correctement vos IDs et classes. Ils doivent notamment&nbsp;:<\/p>\n<ul>\n<li>\u00catre durables<\/li>\n<li>Repr\u00e9senter clairement l\u2019\u00e9l\u00e9ment en question<\/li>\n<\/ul>\n<p>Par exemple, vous \u00e9viterez de nommer une classe \u00ab\u00a0title-red\u00a0\u00bb car le jour o\u00f9 la couleur du titre change le nom de la classe ne repr\u00e9sentera plus l\u2019\u00e9l\u00e9ment.<\/p>\n<blockquote><p>Restez coh\u00e9rent dans les noms de vos \u00e9l\u00e9ments. Par exemple utilisez le m\u00eame caract\u00e8re pour s\u00e9parer deux mots&nbsp;: \u00ab\u00a0.secondary-nav\u00a0\u00bb, ou \u00ab\u00a0.secondaryNav\u00a0\u00bb.<\/p><\/blockquote>\n<h2>4. Regrouper les IDs et Classes d\u2019un m\u00eame composant<\/h2>\n<p>Si un composant HTML comporte diff\u00e9rents IDs et classes il est pr\u00e9f\u00e9rable de les regrouper dans votre fichier CSS. S\u2019il y a une erreur vous pourrez plus facilement la retrouver.<\/p>\n<p>Par exemple, pour un composant ayant pour classe \u00ab\u00a0cylinder\u00a0\u00bb puis deux div ayant respectivement pour ID \u00ab\u00a0front \u00bb et \u00ab\u00a0back \u00bb vous organiserez votre code de la fa\u00e7on suivante&nbsp;:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-8649 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/11\/regroupement-css.png\" alt=\"Regroupement CSS\" width=\"394\" height=\"181\" \/><\/p>\n<h2>5. Utiliser le code hexad\u00e9cimal des couleurs<\/h2>\n<p>Pour donner une couleur \u00e0 un \u00e9l\u00e9ment deux choix s\u2019offrent \u00e0 vous&nbsp;:<\/p>\n<ul>\n<li>Soit vous utilisez le nom de la couleur&nbsp;: color: green<\/li>\n<li>Soit vous utilisez le code hexad\u00e9cimal&nbsp;: color: #008000<\/li>\n<\/ul>\n<p>En revanche, nous vous conseillons d\u2019utiliser le code hexad\u00e9cimal car il est 4 \u00e0 5 fois plus rapide \u00e0 charger que le nom de la couleur.<\/p>\n<h2>6. Utiliser les pr\u00e9fixes CSS des navigateurs<\/h2>\n<p>Chaque navigateur poss\u00e8de sont lot de sp\u00e9cificit\u00e9s au niveau des styles.<\/p>\n<p>Depuis l\u2019arriv\u00e9e de CSS3, vous devez ins\u00e9rer les pr\u00e9fixes vendeurs dans votre feuille CSS pour que chaque navigateur prenne en compte les fonctionnalit\u00e9s et styles que vous impl\u00e9mentez. Sans cela, vous risquez de rencontrer des erreurs.<\/p>\n<p>Voici la liste des principaux pr\u00e9fixes vendeurs&nbsp;:<\/p>\n<ul>\n<li>Chrome&nbsp;: -webkit-<\/li>\n<li>Safari&nbsp;: -webkit-<\/li>\n<li>iOS&nbsp;: -webkit-<\/li>\n<li>Firefox&nbsp;: -moz-<\/li>\n<li>Opera&nbsp;: -o-<\/li>\n<\/ul>\n<h2>7. Apporter des informations sur la feuille de style<\/h2>\n<p>Au fil du temps vous ne serez pas la seule personne \u00e0 utiliser la feuille de style CSS sur laquelle vous travaillez.<\/p>\n<p>Il est donc important d\u2019inclure les mentions suivantes&nbsp;:<\/p>\n<ul>\n<li>L\u2019auteur<\/li>\n<li>L\u2019URL<\/li>\n<li>Le nom du th\u00e8me s\u2019il y en a un<\/li>\n<li>Une description<\/li>\n<li>Des tags<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-8650 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/11\/information-feuille-css.png\" alt=\"Informations feuille CSS\" width=\"567\" height=\"194\" \/><\/p>\n<p>Lorsqu\u2019une autre personne utilisera le fichier, elle sera ainsi en mesure de contacter le cr\u00e9ateur pour \u00e9ventuellement obtenir des informations suppl\u00e9mentaires.<\/p>\n<h2>8. Ins\u00e9rer des commentaires et annotations<\/h2>\n<p>Pour une meilleure organisation et pour s\u2019y retrouver plus facilement il est recommand\u00e9 d\u2019ins\u00e9rer des commentaires et des annotations dans votre feuille de style.<\/p>\n<p>Les commentaires peuvent par exemple d\u00e9limiter les diff\u00e9rentes parties et les annotations apporter des pr\u00e9cisions sur un style en particulier.<\/p>\n<p>En cas d\u2019erreur, vous pourrez atteindre rapidement la partie concern\u00e9e dans votre fichier.<\/p>\n<h2>9. Compresser le fichier CSS<\/h2>\n<p>Votre fichier CSS peut avoir un impact sur la vitesse de chargement du site \u00e0 cause des sauts de ligne, des espaces, des styles redondants, etc.<\/p>\n<p>Si vous constatez que le temps de chargement est anormal, compressez votre fichier CSS avec l\u2019outil <a href=\"https:\/\/csscompressor.com\/\" target=\"_blank\" rel=\"noopener\">CSS Compressor<\/a> par exemple.<\/p>\n<h2>10. V\u00e9rifier et valider le code CSS<\/h2>\n<p>Pour v\u00e9rifier que votre feuille de style est bien construite vous pouvez utiliser le <a href=\"https:\/\/jigsaw.w3.org\/css-validator\/\" target=\"_blank\" rel=\"noopener\">service de validation CSS du W3C<\/a>.<\/p>\n<p>En utilisant cet outil vous pourrez \u00e9galement vous rendre compte des \u00e9ventuelles erreurs pr\u00e9sentent ce qui vous fera gagner beaucoup de temps.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-8651 size-full\" src=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/11\/validation-css.png\" alt=\"Validation code CSS\" width=\"800\" height=\"179\" \/><\/p>\n<p>Si vous connaissez d\u2019autres bonnes pratiques en CSS n\u2019h\u00e9sitez pas \u00e0 les partager en commentaires&nbsp;\ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En tant que web designer vous \u00eates souvent amen\u00e9 \u00e0 cr\u00e9er ou modifier un fichier CSS. Mais avec les \u00e9volutions et les mises \u00e0 jour de ce langage il est parfois difficile de d\u00e9cider de la meilleure \u00e9criture \u00e0 adopter. Dans ce guide, nous allons vous donner les bonnes pratiques \u00e0 respecter pour que votre [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":8652,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[31,27],"tags":[],"class_list":["post-8587","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","category-webdesign"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Guide CSS : 10 bonnes pratiques \u00e0 respecter dans votre feuille de style - Graphiste Blog<\/title>\n<meta name=\"description\" content=\"En tant que web designer vous \u00eates souvent amen\u00e9 \u00e0 cr\u00e9er ou modifier un fichier CSS. Mais avec les \u00e9volutions et les mises \u00e0 jour de ce langage il est\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guide CSS : 10 bonnes pratiques \u00e0 respecter dans votre feuille de style - Graphiste Blog\" \/>\n<meta property=\"og:description\" content=\"En tant que web designer vous \u00eates souvent amen\u00e9 \u00e0 cr\u00e9er ou modifier un fichier CSS. Mais avec les \u00e9volutions et les mises \u00e0 jour de ce langage il est\" \/>\n<meta property=\"og:url\" content=\"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/\" \/>\n<meta property=\"og:site_name\" content=\"Graphiste.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/graphistesfreelances\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-08T09:30:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-20T15:17:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/11\/graphiste-bonnes-pratiques-css-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"850\" \/>\n\t<meta property=\"og:image:height\" content=\"423\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Thomas Lazzaroni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@totolazza\" \/>\n<meta name=\"twitter:site\" content=\"@Graphistecom\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas Lazzaroni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/\"},\"author\":{\"name\":\"Thomas Lazzaroni\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\"},\"headline\":\"Guide CSS&nbsp;: 10 bonnes pratiques \u00e0 respecter dans votre feuille de style\",\"datePublished\":\"2018-11-08T09:30:44+00:00\",\"dateModified\":\"2025-08-20T15:17:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/\"},\"wordCount\":800,\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/11\/graphiste-bonnes-pratiques-css-1.jpg\",\"articleSection\":[\"HTML &amp; CSS\",\"Webdesign\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/\",\"url\":\"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/\",\"name\":\"Guide CSS : 10 bonnes pratiques \u00e0 respecter dans votre feuille de style - Graphiste Blog\",\"isPartOf\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/11\/graphiste-bonnes-pratiques-css-1.jpg\",\"datePublished\":\"2018-11-08T09:30:44+00:00\",\"dateModified\":\"2025-08-20T15:17:19+00:00\",\"description\":\"En tant que web designer vous \u00eates souvent amen\u00e9 \u00e0 cr\u00e9er ou modifier un fichier CSS. Mais avec les \u00e9volutions et les mises \u00e0 jour de ce langage il est\",\"breadcrumb\":{\"@id\":\"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/#primaryimage\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/11\/graphiste-bonnes-pratiques-css-1.jpg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/11\/graphiste-bonnes-pratiques-css-1.jpg\",\"width\":850,\"height\":423},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/graphiste.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webdesign\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML &amp; CSS\",\"item\":\"https:\/\/graphiste.com\/blog\/webdesign\/html-css\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Guide CSS&nbsp;: 10 bonnes pratiques \u00e0 respecter dans votre feuille de style\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/graphiste.com\/blog\/#website\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"name\":\"Graphiste.com\",\"description\":\"graphiste\",\"publisher\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/graphiste.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/graphiste.com\/blog\/#organization\",\"name\":\"Graphiste.com\",\"url\":\"https:\/\/graphiste.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"contentUrl\":\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg\",\"width\":1,\"height\":1,\"caption\":\"Graphiste.com\"},\"image\":{\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/graphistesfreelances\",\"https:\/\/x.com\/Graphistecom\",\"https:\/\/www.linkedin.com\/company\/graphiste-com\/\",\"https:\/\/fr.pinterest.com\/Graphiste_Com\",\"https:\/\/www.instagram.com\/graphiste_com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5\",\"name\":\"Thomas Lazzaroni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g\",\"caption\":\"Thomas Lazzaroni\"},\"description\":\"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/\",\"https:\/\/x.com\/totolazza\"],\"url\":\"https:\/\/graphiste.com\/blog\/author\/thomas\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Guide CSS : 10 bonnes pratiques \u00e0 respecter dans votre feuille de style - Graphiste Blog","description":"En tant que web designer vous \u00eates souvent amen\u00e9 \u00e0 cr\u00e9er ou modifier un fichier CSS. Mais avec les \u00e9volutions et les mises \u00e0 jour de ce langage il est","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/","og_locale":"fr_FR","og_type":"article","og_title":"Guide CSS : 10 bonnes pratiques \u00e0 respecter dans votre feuille de style - Graphiste Blog","og_description":"En tant que web designer vous \u00eates souvent amen\u00e9 \u00e0 cr\u00e9er ou modifier un fichier CSS. Mais avec les \u00e9volutions et les mises \u00e0 jour de ce langage il est","og_url":"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/","og_site_name":"Graphiste.com","article_publisher":"https:\/\/www.facebook.com\/graphistesfreelances","article_published_time":"2018-11-08T09:30:44+00:00","article_modified_time":"2025-08-20T15:17:19+00:00","og_image":[{"width":850,"height":423,"url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/11\/graphiste-bonnes-pratiques-css-1.jpg","type":"image\/jpeg"}],"author":"Thomas Lazzaroni","twitter_card":"summary_large_image","twitter_creator":"@totolazza","twitter_site":"@Graphistecom","twitter_misc":{"\u00c9crit par":"Thomas Lazzaroni","Dur\u00e9e de lecture estim\u00e9e":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/#article","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/"},"author":{"name":"Thomas Lazzaroni","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5"},"headline":"Guide CSS&nbsp;: 10 bonnes pratiques \u00e0 respecter dans votre feuille de style","datePublished":"2018-11-08T09:30:44+00:00","dateModified":"2025-08-20T15:17:19+00:00","mainEntityOfPage":{"@id":"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/"},"wordCount":800,"publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"image":{"@id":"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/11\/graphiste-bonnes-pratiques-css-1.jpg","articleSection":["HTML &amp; CSS","Webdesign"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/","url":"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/","name":"Guide CSS : 10 bonnes pratiques \u00e0 respecter dans votre feuille de style - Graphiste Blog","isPartOf":{"@id":"https:\/\/graphiste.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/#primaryimage"},"image":{"@id":"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/#primaryimage"},"thumbnailUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/11\/graphiste-bonnes-pratiques-css-1.jpg","datePublished":"2018-11-08T09:30:44+00:00","dateModified":"2025-08-20T15:17:19+00:00","description":"En tant que web designer vous \u00eates souvent amen\u00e9 \u00e0 cr\u00e9er ou modifier un fichier CSS. Mais avec les \u00e9volutions et les mises \u00e0 jour de ce langage il est","breadcrumb":{"@id":"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/#primaryimage","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/11\/graphiste-bonnes-pratiques-css-1.jpg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/11\/graphiste-bonnes-pratiques-css-1.jpg","width":850,"height":423},{"@type":"BreadcrumbList","@id":"https:\/\/graphiste.com\/blog\/bonnes-pratiques-css-feuille-style\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/graphiste.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Webdesign","item":"https:\/\/graphiste.com\/blog\/webdesign\/"},{"@type":"ListItem","position":3,"name":"HTML &amp; CSS","item":"https:\/\/graphiste.com\/blog\/webdesign\/html-css\/"},{"@type":"ListItem","position":4,"name":"Guide CSS&nbsp;: 10 bonnes pratiques \u00e0 respecter dans votre feuille de style"}]},{"@type":"WebSite","@id":"https:\/\/graphiste.com\/blog\/#website","url":"https:\/\/graphiste.com\/blog\/","name":"Graphiste.com","description":"graphiste","publisher":{"@id":"https:\/\/graphiste.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/graphiste.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/graphiste.com\/blog\/#organization","name":"Graphiste.com","url":"https:\/\/graphiste.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","contentUrl":"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/07\/logo-blog-graphiste.svg","width":1,"height":1,"caption":"Graphiste.com"},"image":{"@id":"https:\/\/graphiste.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/graphistesfreelances","https:\/\/x.com\/Graphistecom","https:\/\/www.linkedin.com\/company\/graphiste-com\/","https:\/\/fr.pinterest.com\/Graphiste_Com","https:\/\/www.instagram.com\/graphiste_com\/"]},{"@type":"Person","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/cc3b0a678aeffcae19ecc599eaf679e5","name":"Thomas Lazzaroni","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/graphiste.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7306fb87b7017ab0955d07c2f2b771ac79e91965a2fca514df0c043f7c087fd2?s=96&d=mm&r=g","caption":"Thomas Lazzaroni"},"description":"Depuis plus de 10 ans, je contribue \u00e0 faire rayonner nos sites en imaginant des strat\u00e9gies qui renforcent notre visibilit\u00e9 et notre position de r\u00e9f\u00e9rence.","sameAs":["https:\/\/www.linkedin.com\/in\/thomaslazzaroni\/","https:\/\/x.com\/totolazza"],"url":"https:\/\/graphiste.com\/blog\/author\/thomas\/"}]}},"_links":{"self":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/8587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/comments?post=8587"}],"version-history":[{"count":0,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/posts\/8587\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media\/8652"}],"wp:attachment":[{"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/media?parent=8587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/categories?post=8587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphiste.com\/blog\/wp-json\/wp\/v2\/tags?post=8587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}