Ce qu'il faut et ne pas faire en CSS - Partie 1 : La sélection CSS

Alen Grakalic

CSS Globe démarre une série de petits articles appelés "Ce qu'il faut et ne pas faire en CSS". Ces séries ont pour but de pointer les mauvaises habitudes lorsqu'on utilise le CSS et en général les standards du Web. On tentera de répondre aux questions les plus fréquentes relatives au CSS. Cette première partie portera sur la sélection CSS.

- Titre : Ce qu'il faut et ne pas faire en CSS - Partie 1 : La sélection CSS

- Auteur : Alen Grakalic

- Parution : 9 juin 2008

- Mise à jour : 31 décembre 2012

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2008 Alen Grakalic. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Introduction

- II. Classes & Id

- III. Les classes multiples

- IV. Les sélecteurs de types

- V. Les sélecteurs descendants

- VI. Les combinaisons

- VII. Support multi-navigateur et multi-plateforme

- VIII. Résumé

- IX. Remerciements

I - Introduction

La sélection d'un élément est le processus de base pour appliquer un style en CSS. Si vous ne ciblez pas un certain élément vous ne pourrez pas le styliser, n'est-ce pas ? Cet article peut vous aider à corriger des erreurs que vous auriez pu commettre mais aussi à répondre aux questions relatives aux meilleures pratiques pour l'utilisation des sélecteurs en CSS.

Comme vous le savez, il y a plusieurs types de sélecteurs CSS. Nous nous focaliserons sur leur utilisation pratique.

II - Classes & Id

<p class="signature">...</p>
<ul id="nav">...</ul>

N'utilisez pas des noms de classes trop détaillés comme "red", "blueDot" ou "roundedTop". Je n'utiliserai même pas de noms comme "left", "right" ou "large". Pourquoi ? Eh bien, imaginez que vous ayez conçu 2 colonnes sur votre site, une colonne nommée "left" (gauche) et l'autre nommée "right" (droite) et qu'à un moment vous deviez intervertir la position des colonnes. Votre client pourrait ne pas aimer votre thème bleu et vouloir le changer, eh bien vous êtes coincé avec un bouton de classe "blueSmall" (class="blueSmall")...

Le nom des classes devraient donc décrire le sens et le but du contenu mais pas son apparence. Ainsi au lieu d'utiliser un div avec id="left" aouter un div avec class="main" voire même class="primary". Essayez le même nom de classe sur différents éléments, dans diverses situations. Les noms n'ont pas besoin d'être liés à un seul type d'élément. Vous pouvez utiliser class="first" sur le premier élément du menu ainsi que le premier paragraphe de votre contenu. Lorsqu'il faut choisir entre un nom de classe ou un id, déterminez si l'élément à styliser est vraiment unique. Dans ce cas, utilisez : id. S'il n'est pas unique utilisez les classes.

Cela vous évite d'utiliser plein d'id uniquement pour vos styles.

III - Les classes multiples

<button class="image submit">

Les noms de classes multiples sur un seul élément peuvent être une bonne façon d'optimiser votre CSS et d'éviter des noms de classes complexes pour le balisage.

J'utilise fréquemment une définition de classe, class="image", qui possède un style général pour la technique de remplacement d'images. Puis j'ajoute des caractéristiques aux autres classes où je décris l'image à utiliser, je définis la largeur etc.

IV - Les sélecteurs de types

a {color:#ff0;}

J'utilise toujours les sélecteurs de types au début de mes CSS, pour définir ou réinitialiser le style par défaut de certains éléments. Personnellement je ne crois pas à la puissance du sélecteur universel (à moins d'être utilisé en bas de hiérarchie). Si vous prévoyez d'utiliser des resets, utilisez ceux appropriés, c'est-à-dire le reset d'Eric Meyer.

V - Les sélecteurs descendants

Utilisez-les ! Quand vous les maîtriserez vous trouverez que votre travail est beaucoup plus aisé contrairement à l'utilisation d'une centaine de noms de classes dans chaque partie de votre document. J'utilise fréquemment quelque chose comme #main p a pour rajouter un lien souligné que j'avais enlevé dans la réinitialisation.

VI - Les combinaisons

#main h2.title span

Ce type de sélecteur vous permet de cibler avec précision un élément.

Le principe que j'utilise est le suivant : J'essaye de déterminer le conteneur le plus petit dans la hiérarchie qui possède des éléments non répétitifs. J'ajoute un nom de classe à ce conteneur et j'y indique les éléments cibles avec des sélecteurs de même type que ceux décrits plus haut. Si vous avez une balise h2 que vous utilisez pour les titres, et que celle-ci possède seulement un span, il n'y a aucune utilité à ajouter un nom de classe à ce span. Vous pouvez la cibler avec un sélecteur de combinaison, comme vu précédemment.

VII - Support multi-navigateur et multi-plateforme

Certains sélecteurs ne sont pas pris en charge par certains navigateurs, vous ne devez donc pas compter sur eux. C'est-à-dire, que vous ne pouvez compter que sur le pseudo-élément ":first-child " pour avoir les coins du haut arrondis, sachant qu'ils ne sont pas supportés par IE6. En vérité de nombreux utilisateurs utilisent toujours IE6 et il faut vivre avec ça.

VIII - Résumé

À faire

- Lorsque vous choisissez d'utiliser des noms de classes, utilisez des noms qui décrivent le sens et le but du contenu, et pas son apparence.

- Utilisez quelques noms de classes et utilisez-les sur divers éléments.

- Utilisez des sélecteurs de type pour (ré)initialiser le style par défaut. Si vous le souhaitez, utilisez des techniques de réinitialisation appropriées (mentionnées ci-dessus).

- Utilisez des noms de classes multiples sur un seul élément pour optimiser votre CSS.

- Utilisez des combinaisons de sélecteurs et ciblez précisément votre élément.

À ne pas faire

- Utiliser pas des noms de classes comme "red", "blueDot" etc.

- Utiliser pas des noms de classes compliqués ou des id comme "sideIntroSecondaryContentTop". Utilisez plutôt des sélecteurs descendants.

- Utiliser pas de sélecteur universel pour la réinitialisation du document.

- Utiliser pas des sélecteurs qui sont dépendant des navigateurs.

- Utiliser pas des noms de classes qui ne sont pas indispensables.

IX - Remerciements

Tous mes remerciements à RideKick pour sa relecture.