Les développeurs web cherchent souvent des moyens efficaces de gérer et d’appliquer les styles CSS.
Sans une stratégie appropriée, le code CSS peut rapidement devenir redondant et difficile à maintenir.
L’article explore l’utilisation des attributs class en CSS, offrant des solutions pour appliquer des styles partagés efficacement.
Lancez votre carrière de développeur web avec une formation pratique.
Introduction aux attributs class CSS
Les attributs class en CSS sont utilisés pour définir des styles généraux et partagés à plusieurs éléments dans une même page. Contrairement aux sélecteurs id, qui sont unique à chaque élément, une classe peut être attribués à plusieurs éléments dans une page, ce qui permet à tous les éléments portant cette classe d’hériter les mêmes styles.
L’un des avantages des classes est qu’elles sont réutilisables : une classe permet de réutiliser le même style sur plusieurs éléments sans répéter le code CSS, et flexible : avec les classes, il est facile de modifier le style global d’un type d’élément sans devoir éditer de nombreux fichiers HTML ou CSS.
Ils permettent aussi de de préparer des styles CSS en avance, sans forcément connaître tous les éléments HTML auxquels ils seront appliqués. Nous pouvons créer des règles CSS pour des classes au tout début du développement de notre projet, puis attribuer régulièrement ces classes aux éléments HTML.
Syntaxe et sélecteurs class CSS
Syntaxe : Déclarer un sélecteur de classe précédé par un point(.) puis le nom de la classe
.valeur_de_l’identifiant {declarations CSS}
Exemples de réutilisation CSS
Voici un exemple qui utilistre l’utilisation des sélecteur class:
L’exemple ci-dessouns montre que les sélecteurs de classe permettent de cibler plusieurs éléments HTML et leur appliquer un style commun comme les éléments H1 et H2 qui partagent la même classe titre, ce qui signifie qu’ils auront le même style.
Même chose pour les paragraphes qui utilisent la même class.
Cependant si on utilise un sélecteur ID, celui-ci il ne peut cibler qu’un seul élément unique sur la page, ce qui nécessite de définir un ID pour chaque élément. L’utilisation du sélecteur class permet d’éviter cette redondance, en appliquant un style commun pour plusieurs éléments.
HTML:
<body>
<h1 class="titre">Titre de la page</h1>
<p class="vert"> un paragraphe 1</p>
<p class="vert"> un paragraphe 2 </p>
<p class="blue"> un paragraphe 3</p>
<h2 id="soustitre-de-la-page" class="rb-heading-index-5 titre">sous-titre de la page </h2>
<p class="blue">un paragraphe 4</p>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"e850cd0aec","url":"https:\/\/blog.alphorm.com\/attributs-class-css-styles-partages","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
CSS:
. .titre{
color: blue;
}
.vert {
color: brown;
}
.blue{
color: purple;
}
Résultat :
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment les classes CSS améliorent-elles la réutilisation du code ?
Quelle est la différence entre un sélecteur class et un sélecteur ID en CSS ?
Comment déclarer un sélecteur de classe en CSS ?
Quels sont les avantages des classes CSS ?
Comment les classes CSS sont-elles utilisées dans un projet de développement web ?
Conclusion
Les classes CSS simplifient la gestion des styles en permettant leur réutilisation et leur modification globale. En quoi les classes CSS peuvent-elles transformer votre approche du design web ?
