Si vous envisagez d'utiliser CSS de manière régulière, vous devez développer une compréhension de la spécificité et de son application.
Outre les flotteurs et les positions, la spécificité peut être l'une des choses les plus difficiles à laquelle il faut s'habituer, sans parler du maître. Les sélecteurs que vous utilisez dans votre CSS ont tous des poids différents et ceux-ci sont contrôlés par la spécificité. C'est pourquoi parfois, lorsque vous appliquez une règle à un élément, cela ne se reflète pas dans votre conception.
Si vous avez déjà utilisé le mot-clé! Redouté pour pirater votre CSS, cet article est pour vous.
Pour que vos bases soient solides, vous devez savoir comment le navigateur lit réellement les CSS et comment les règles sont remplacées.
Tout d'abord, le navigateur va lire une feuille de style de haut en bas, ce qui signifie qu'avec ce code:
/*Line 10*/ul li a {color: red;}/*Line 90*/ul li a {color: blue;}La règle que vous avez spécifiée à la ligne 10 sera remplacée et cette balise d'ancrage sera bleue car le navigateur considérera les règles plus bas dans votre CSS pour obtenir une priorité plus élevée.
Cela fonctionne également avec la commande réelle que vous importez vos fichiers CSS, par exemple:
Puisque vous avez placé le fichier custom.css après le style.css, tout ce que vous écrivez dans le fichier style.css (actualisant pour le moment, le poids des sélecteurs) sera remplacé et remplacé par ce qui se trouve dans le fichier custom.css, cette technique est souvent utilisée par les créateurs de thèmes pour donner à l'utilisateur de la place pour ajouter leurs propres styles sans changer le fichier principal. (Notez toutefois que custom.css ne remplace pas complètement style.css, seules les règles spécifiquement remplacées seront remplacées.)
Tout ce qui précède ne s'applique que si vous utilisez le même poids sur chaque sélecteur. Si vous spécifiez des identifiants, des classes ou des éléments d'empilement, vous leur donnez du poids, et c'est la spécificité.
Il existe quatre catégories qui définissent le niveau de spécificité d'un sélecteur: les styles en ligne (ceux-ci sont parfois utilisés par JavaScript), les ID, les classes et les éléments. Comment mesurer la spécificité? La spécificité est mesurée en points, la valeur la plus élevée étant appliquée.
Sachant cela, si vous utilisez un sélecteur comme celui-ci:
#content .sidebar .module li aSon poids total est de 122 points (100 + 10 + 10 + 1 +1), qui est un identifiant, deux classes et deux éléments.
ul li a {color: red;}Ce sélecteur aura un poids de 3, ce qui signifie que juste en ajoutant une classe ailleurs, vous pouvez la remplacer.
.content #sidebar {width: 30%;}Ce sélecteur a un poids de 110 points principalement à cause de l'ID qui ajoute 100 points au total de 110.
.post p:first-letter {font-size: 16px;}Ce sélecteur a un poids de 12 points, puisque le pseudo-élément: la première lettre ne pèse que 1 point, de même que la balise p.
p {font-family: Helvetica, arial, sans-serif;}Ce sélecteur ne pèse que 1 point, ce type de sélecteur doit être utilisé en haut de la page lorsque vous marquez les styles de base qui peuvent être remplacés ultérieurement pour des zones spécifiques.
Gardez toujours à l'esprit que pour remplacer un sélecteur d'ID, vous devez écrire 256 classes pour le même élément, comme ceci:
#title {font-weight: bold;}.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {font-weight: normal;}Ce n'est que de cette façon que le second sélecteur battra celui qui utilise l'ID.
La spécificité n'est pas un aspect flashy du CSS, mais à mon avis, c'est le domaine le plus négligé. Obtenir votre spécificité correcte vous aide non seulement à éviter les bogues, mais cela accélèrera votre développement et votre site final.
Est-ce que vous utilisez trop d'ID lors de l'écriture de CSS? Vous êtes-vous déjà replié sur! Important? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image de précision via Shutterstock.