{"id":503,"date":"2022-04-15T12:00:48","date_gmt":"2022-04-15T10:00:48","guid":{"rendered":"https:\/\/jagullo.fr\/blog\/?p=503"},"modified":"2022-09-23T08:05:47","modified_gmt":"2022-09-23T06:05:47","slug":"la-surcharge-des-classes-css","status":"publish","type":"post","link":"https:\/\/jagullo.fr\/blog\/la-surcharge-des-classes-css\/","title":{"rendered":"La surcharge des classes CSS"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Optimiser son CSS pour am\u00e9liorer son score SEO<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Aujourd&rsquo;hui il est imp\u00e9ratif de prendre en compte <strong>l&rsquo;optimisation d&rsquo;une feuille de styles<\/strong> pour am\u00e9liorer son classement dans les moteurs de recherche. La rapidit\u00e9 de chargement d&rsquo;une page web va d\u00e9pendre de la taille des feuilles CSS charg\u00e9es et du temps que le navigateur va mettre \u00e0 les interpr\u00e9ter. Plus le code CSS est optimis\u00e9, plus les moteurs de recherche vont attribuer une meilleure note au site Internet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sur WordPress il est possible de personnaliser un th\u00e8me avec un th\u00e8me enfant. Apr\u00e8s avoir cr\u00e9\u00e9 la feuille de styles associ\u00e9e, on peut d\u00e9finir de nouveaux styles et mettre \u00e0 jour certains \u00e9l\u00e9ments du th\u00e8me parent. Si un d\u00e9veloppeur web souhaite modifier une r\u00e8gle, il peut utiliser l&rsquo;inspecteur afin d&rsquo;identifier la r\u00e8gle \u00e0 modifier puis la surcharger dans le fichier CSS du th\u00e8me enfant. Bien comprendre comment surcharger une r\u00e8gle permet d&rsquo;optimiser son code aussi bien pour la maintenance que pour le SEO.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/04\/compilation-less-sass.jpg\" alt=\"Comprendre la surcharge des styles CSS pour optimiser le chargement\" class=\"wp-image-987\" width=\"720\" height=\"480\" srcset=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/04\/compilation-less-sass.jpg 960w, https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/04\/compilation-less-sass-300x200.jpg 300w, https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2022\/04\/compilation-less-sass-768x512.jpg 768w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption>Comprendre la surcharge des styles CSS pour optimiser le chargement<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Comment surcharger un s\u00e9lecteur<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Pour modifier la couleur d&rsquo;un titre dans un th\u00e8me WordPress on peut d\u00e9terminer dans un premier temps via l&rsquo;inspecteur la r\u00e8gle qui lui ai appliqu\u00e9 et faire un peu de d\u00e9veloppement pour la surcharger. Apr\u00e8s avoir identifi\u00e9 la r\u00e8gle il suffit de la copier\/coller dans le fichier style.css du th\u00e8me enfant. Une mauvaise pratique est de mettre le mot cl\u00e9 <strong>!important<\/strong> \u00e0 la fin de chaque r\u00e8gle. Cette pratique n&rsquo;est pas optimis\u00e9e et il suffit simplement d&rsquo;indiquer un ou plusieurs \u00e9l\u00e9ments juste avant la classe que l&rsquo;on souhaite modifier.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Titre h3 surcharg\u00e9 en bleu et centr\u00e9<\/h3>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>&lt;style&gt;\n\/* le th\u00e8me parent poss\u00e8de la r\u00e8gle : h3{color:rgba(0,0,0,.75);} *\/\n.post-content h3{color:#1961c7;text-align:center;} \/* on surcharge en ajoutant .post-content *\/\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<style>\n.post-content h3{color:#1961c7;text-align:center;}\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\">Comprendre la priorit\u00e9 des s\u00e9lecteurs<\/h2>\n\n\n\n<p class=\"list-heading wp-block-paragraph\">On appelle <strong>sp\u00e9cificit\u00e9<\/strong> la priorit\u00e9 des s\u00e9lecteurs qui sont interpr\u00e9t\u00e9s par le navigateur. La priorit\u00e9 se d\u00e9termine en fonction du type de s\u00e9lecteur et de son nombre d&rsquo;\u00e9l\u00e9ments. Plus une r\u00e8gle poss\u00e8de d&rsquo;\u00e9l\u00e9ment plus elle sera consid\u00e9r\u00e9e prioritaire par le navigateur. Attention cependant \u00e0 ne pas utiliser un trop grand nombre d&rsquo;\u00e9l\u00e9ments, car cela consomme plus de ressources pour analyser le code et ralentira donc le rendu de la page surtout pour les mobiles. Il existe 3 grands types de s\u00e9lecteurs qu&rsquo;un d\u00e9veloppeur peut utiliser pour d\u00e9finir une r\u00e8gle CSS :<\/p>\n\n\n\n<ul class=\"list-no-bottom wp-block-list\"><li><strong>S\u00e9lecteur d&rsquo;identifiant :<\/strong> #id<\/li><li><strong>S\u00e9lecteur de classe :<\/strong> .classe<\/li><li><strong>S\u00e9lecteur de balise :<\/strong> span, div, etc&#8230;<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Le s\u00e9lecteur d&rsquo;identifiant sera prioritaire sur la classe qui sera prioritaire sur la balise. Enfin en dernier recours on peut utiliser le mot cl\u00e9 <strong>!important<\/strong> qui prendra le dessus si 2 r\u00e8gles ont exactement les m\u00eames s\u00e9lecteurs. Le mot <strong>!important<\/strong> est comme dit plus haut dans l&rsquo;article \u00e0 utiliser en dernier recours. Il vaut mieux ajouter des \u00e9l\u00e9ments avant la classe pour la surcharger ce qui permettra une meilleure maintenabilit\u00e9 du code.<\/p>\n\n\n\n<pre class=\"wp-block-code language-css\"><code>&lt;style&gt;\n\/* Priorit\u00e9 des s\u00e9lecteurs sur un paragraphe *\/\np{font-size:1.2em!important;} \/* priorit\u00e9 niveau 1 *\/\n#paragraph{font-size:1.2em;} \/* priorit\u00e9 niveau 2 *\/\n.paragraph{font-size:1.2em;} \/* priorit\u00e9 niveau 3 *\/\np{font-size:1.2em;} \/* priorit\u00e9 niveau 4 *\/\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Des ressources pour apprendre le CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Il existe beaucoup de ressources sur Internet pour <strong>apprendre le d\u00e9veloppement CSS<\/strong> et qui traitent des s\u00e9lecteurs et des priorit\u00e9s. Sur le site de <a data-type=\"URL\" data-id=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\" href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\" target=\"_blank\" rel=\"noreferrer noopener\">MDN<\/a> ou de <a data-type=\"URL\" data-id=\"https:\/\/www.w3schools.com\/css\/default.asp\" href=\"https:\/\/www.w3schools.com\/css\/default.asp\" target=\"_blank\" rel=\"noreferrer noopener\">w3Schools<\/a> il y a de tr\u00e8s bons tutoriels pour se former ou r\u00e9viser ses connaissances. Il est important de garder en t\u00eate l&rsquo;optimisation des feuilles de styles pour qu&rsquo;elles soient interpr\u00e9t\u00e9es plus rapidement dans le navigateur du client et charger la page HTML au plus vite. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Les pr\u00e9processeurs <\/strong>comme LESS et SASS sont des technologies \u00e0 \u00e9tudier pour cr\u00e9er des projets de plus grandes envergures \u00e0 partir d&rsquo;un langage dynamique. En effet, ces pr\u00e9processeurs ajoutent de nombreuses fonctions \u00e0 CSS et apportent plus de flexibilit\u00e9 au\u00a0d\u00e9veloppeur web.<\/p>\n\n\n\n<link rel=\"stylesheet\" href=\"\/blog\/wp-content\/themes\/Extra-child\/assets\/css\/prism.css\">\n<script src=\"\/blog\/wp-content\/themes\/Extra-child\/assets\/js\/prism.js\"><\/script>\n<div class=\"list-tags\"><a href=\"https:\/\/jagullo.fr\/blog\/tag\/css-sass-less\/\" class=\"link-tag\" title=\"CSS \/ SASS \/ LESS\">CSS \/ SASS \/ LESS<\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>Optimiser son CSS pour am\u00e9liorer son score SEO Aujourd&rsquo;hui il est imp\u00e9ratif de prendre en compte l&rsquo;optimisation d&rsquo;une feuille de styles pour am\u00e9liorer son classement dans les moteurs de recherche. La rapidit\u00e9 de chargement d&rsquo;une page web va d\u00e9pendre de la taille des feuilles CSS charg\u00e9es et du temps que le navigateur va mettre \u00e0 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":987,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[24],"tags":[28],"class_list":["post-503","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriels","tag-css-sass-less","et-has-post-format-content","et_post_format-et-post-format-standard"],"_links":{"self":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/503","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/comments?post=503"}],"version-history":[{"count":3,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/503\/revisions"}],"predecessor-version":[{"id":1027,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/503\/revisions\/1027"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/media\/987"}],"wp:attachment":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/media?parent=503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/categories?post=503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/tags?post=503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}