| |
css_guidelines:ids_in_css [2016/08/10 16:58] – created leo | css_guidelines:ids_in_css [2016/08/10 16:59] (current) – leo |
---|
====== IDs in CSS ====== | ====== IDs in CSS ====== |
| |
If we want to keep specificity low, which we do, we have one really quick-win, simple, easy-to-follow rule that we can employ to help us: avoid using IDs in CSS. | Si nous voulons garder la spécifité basse, ce qui est le cas, il existe une règle simple, facile et immédiate que nous pouvons respecter pour nous aider : éviter d'utiliser les Id en CSS. |
| |
Not only are IDs inherently non-reusable, they are also vastly more specific than any other selector, and therefore become specificity anomalies. Where the rest of your selectors are relatively low specificity, your ID-based selectors are, comparatively, much, much higher. | Non seulement les Id sont par nature non réutilisables, mais elles sont aussi largement plus spécifiques que tout autre sélecteur, et deviennent donc des anomalies en terme de spécificité. Alors que le reste des sélecteurs conservent une spécificité très basse, les sélecteurs basés sur des Id sont comparativement beaucoup, beaucoup plus spécifique. |
| |
In fact, to highlight the severity of this difference, see how one thousand chained classes cannot override the specificity of a single ID: jsfiddle.net/0yb7rque. (Please note that in Firefox you may see the text rendering in blue: this is a known bug, and an ID will be overridden by 256 chained classes.) | En fait, pour expliciter cette différence, regarder comment mille classes chaînées ne peuvent pas overrider la spécificité d'un seul ID : jsfiddle.net/0yb7rque. (Notez qu'il est possible que le texte soit rendu en bleu dans firefox, c'est un bug connu, et un Id sera overridden par 256 classes chaînées.) |
| |
> N.B. It is still perfectly okay to use IDs in HTML and JavaScript; it is only in CSS that they prove troublesome. | N.B. Il est toujours totalement correct d'utiliser des Id en HTML et en JavaScript; c'est uniquement en CSS qu'ils se montrent problématiques. |
| |
It is often suggested that developers who choose not to use IDs in CSS merely "don’t understand how specificity works". This is as incorrect as it is offensive: no matter how experienced a developer you are, this behaviour cannot be circumvented; no amount of knowledge will make an ID less specific. | Il est parfois suggérer que les développeurs qui choisissent de na pas utiliser d'Id dans leur CSS "ne comprennent pas comment la spécificité fonctionne". C'est aussi incorrect que grossier : quelque soit l'expérience d'un développeur, ce comportement ne peux être contourné; aucun niveau de connaissance ne rendra les Id moins spécifiques. |
| |
Opting into this way of working only introduces the chance of problems occurring further down the line, and—particularly when working at scale—all efforts should be made to avoid the potential for problems to arise. In a sentence: | Opter pour cette manière de travailler introduit uniquement des chances que les problèmes arrivent plus tard, et — particulièrement when working at scale— tous les efforts devraient être produits pour éviter que les probèmes potentiels arrivent. En une phrase : |
| |
It is just not worth introducing the risk. | Cela ne vaut pas le coup d'introduire le risque. |