Differences

This shows you the differences between two versions of the page.

--- css_guidelines:specificity [2016/08/10 16:57] – created leo
+++ css_guidelines:specificity [2016/08/10 17:01] (current) – leo
@@ Line 3: / Line 3: @@
 ====== Specificity ======
-As we’ve seen, CSS isn’t the most friendly of languages: globally operating, very leaky, dependent on location, hard to encapsulate, based on inheritance… But! None of that even comes close to the horrors of specificity.
+comme nous l'avons vu, CSS n'est pas le langage le plus sympatique: opérant globalement, fuyant de partout, dépendant de la localisation, difficile à encapsuler, basé sur l'héritage… Mais ! rien de tout cela n'approche les horreurs de la spécificité.
-No matter how well considered your naming, regardless of how perfect your source order and cascade are managed, and how well you’ve scoped your rulesets, just one overly-specific selector can undo everything. It is a gigantic curveball, and undermines CSS’ very nature of the cascade, inheritance, and source order.
+Quels que soient les efforts que vous aurez mis dans votre nommage, aussi parfaite soit l'ordre de vos source, la gestion de votre cascade, et comment vous aurez géré la portée de vos bases de règle, une seule base de règle trop spécifique peut réduire cela à néant. c'est un énomre piège qui sape la nature profonde du CSS de cascade, héritage, et ordre des sources.
-The problem with specificity is that it sets precedents and trumps that cannot simply be undone. If we take a real example that I was responsible for some years ago:
+Le problème avec la spécificité est qu'il établi des précédents et cartes (trumps ?) qui ne peuvent être surpassés simplement. Si nous prenons un exemple réel dont je fus responsable il y a quelques années :
 <code>
@@ Line 13: / Line 13: @@
 </code>
-Not only does this exhibit poor Selector Intent—I didn’t actually want every table in the #content area, I wanted a specific type of table that just happened to live there—it is a hugely over-specific selector. This became apparent a number of weeks later, when I needed a second type of table:
+Non seulement cela montre une piètre Selector Intent — Je ne souhaitais pas en effet sélectionner toutes les table de la zone #content, je voulais sélectionner un type spécifique de table qui se trouver être là — ce qui est un sélecteur totalement sur-spécifique. cela apparut quelques semaines plus tard lorsque j'eu besoin d'un second type de table:
 <code>
@@ Line 24: / Line 24: @@
 </code>
-The first selector was trumping the specificity of the one defined after it, working against CSS’ source-order based application of styles. In order to remedy this, I had two main options. I could
+Le premier sélecteur surpassait la spécifité de celui défini après it, à l'encontre du principe d'ordre des sources de CSS concernant l'application des styles. Pour remédier à ça, j'avais deux options principales, je pouvais :
-  - refactor my CSS and HTML to remove that ID;
+  - refactorer mon CSS et HTML pour enlever cet ID ;
-  - write a more specific selector to override it.
+  - écrire un CSS plus spécifique pour overrider la première règle.
-Unfortunately, refactoring would have taken a long time; it was a mature product and the knock-on effects of removing this ID would have been a more substantial business cost than the second option: just write a more specific selector.
+Malheureusement, la refactorisation aurait pris trop de temps, il s'agissait d'un produit mûr et les répercussions de la suppression de l'Id aurait au des business cost plus substantiels que la seconde option : écrire simplement un sélecteur plus spécifique.
 <code>
@@ Line 37: / Line 37: @@
 </code>
-Now I have a selector that is even more specific still! And if I ever want to override this one, I will need another selector of at least the same specificity defined after it. I’ve started on a downward spiral.
+J'avais alors un sélécteur encore plus spécifique ! Et si je voulais l'overrider, j'aurais à écrire un sélecteur avec au moins le même degré de spécificité et définit après celui-di. J'avais démarré une spirale sans fin.
-Specificity can, among other things,
+La spécificité peut, entre autre choses :
-  - limit your ability to extend and manipulate a codebase;
+  - limiter votre capacité à étendre et manipluer une base de code;
-  - interrupt and undo CSS’ cascading, inheriting nature;
+  - interrompre et revenir sur la nature de la cascade CSS;
-  - cause avoidable verbosity in your project;
+  - causer une verbosité évitable dans votre projet;
-  - prevent things from working as expected when moved into different environments;
+  - empêcher mes choses de fontcionner comme prévu lorsque déplacer dans un environnement différent.
-  - lead to serious developer frustration.
+  - engendrer une sérieuse frustration du développeur.
-All of these issues are greatly magnified when working on a larger project with a number of developers contributing code.
+Tout ces problèmes sont grandement amplifiés lorsque l'on travaille sur un grand projet avec plusieurs développeurs contribuant au code.
 ===== Keep It Low at All Times =====
-The problem with specificity isn’t necessarily that it’s high or low; it’s the fact it is so variant and that it cannot be opted out of: the only way to deal with it is to get progressively more specific—the notorious specificity wars we looked at above.
+Le problème avec la spécificité n'est pas nécessairement qu'elle soit haute ou basse; c'est le fait qu'elle soit si variable et qu'on ne puisse pas choisir de ne pas s'y soumettre : le seul moyen de la gérer est d'être progressivement plus spécifique — les fameuses guerres de spécificité que nous avons regardées d'en haut.
-One of the single, simplest tips for an easier life when writing CSS—particularly at any reasonable scale—is to keep always try and keep specificity as low as possible at all times. Try to make sure there isn’t a lot of variance between selectors in your codebase, and that all selectors strive for as low a specificity as possible.
+Un des seuls et plus simples trucs pour se simplifier la vie en écrivant des CSS — en particulier à une taille raisonnable — est de toujours essayer de conserver la spécificité aussi basse que possible. Essayez de vous assurer qu'il n'y a que peu de variance entre les sélecteurs de votre base de code, et que les sélecteurs ont une spécificité aussi réduite que possible.
-Doing so will instantly help you tame and manage your project, meaning that no overly-specific selectors are likely to impact or affect anything of a lower specificity elsewhere. It also means you’re less likely to need to fight your way out of specificity corners, and you’ll probably also be writing much smaller stylesheets.
+S'en tenir à cela vous aidera à maîtriser et gérer votre projet, signifiant qu'aucun sélecteur sur-spécifique ne risquera d'impacter ou affecter quoi que ce soit de plus basse spécificité où que ce soit. Cela signifieras aussi que vous risquez moins d'avoir à vous battre pour des histoires de spécificités, et aussi probablement que vous écrirez des feuilles de style bien plus petites.
-Simple changes to the way we work include, but are not limited to,
+des changement simples à notre manière de travailler incluent, mais ne se limitent pas à :
-  - not using IDs in your CSS;
+    ne pas utiliser d'ID dans votre CSS;
-  - not nesting selectors;
+    ne pas nicher de sélecteurs;
-  - not qualifying classes;
+    ne pas qualifier les classes;
-  - not chaining selectors.
+    ne pas chaîner les sélecteurs.
-Specificity can be wrangled and understood, but it is safer just to avoid it entirely.
+La spécificité peut être discutée et comprise, mais il est plu ssimple de l'éviter complètement.