Ich habe mich neulich mit Eric Meyer unterhalten und mich an eine Geschichte von Eric Meyer aus meiner prägenden Zeit erinnert. Ich habe einen Blogbeitrag über CSS-Spezifität geschrieben, und Eric hat sich die Zeit genommen, auf die irreführende Natur davon hinzuweisen (ich erinnere mich, dass ich ihn eilig aktualisiert habe). Was war so irreführend? Die Art und Weise, wie ich Spezifität als ein Zahlensystem zur Basis 10 darstellte.
Nehmen wir an, Sie wählen ein Element mit ul.nav. Ich habe in dem Beitrag angedeutet, dass die Spezifität dieses Selektors 0011 (im Wesentlichen elf) war, was eine Zahl im Basis-10-System ist. Also habe ich gesagt, Tags = 0, Klassen = 10, IDs = 100 und ein Stilattribut = 1000. Wenn die Spezifität in einem Basis-10-Zahlensystem wie diesem berechnet würde, hätte ein Selektor wie ul.nav.nav.nav.nav.nav.nav.nav.nav.nav.nav.nav (11 Klassennamen) eine Spezifität von 0111, was dasselbe wäre wie ul#nav.top. Das stimmt nicht. Die Realität ist, dass es (0, 0, 11, 1) vs. (0, 1, 0, 1) wäre, wobei letzteres leicht gewinnt.
Diese kommagetrennte Syntax, wie ich sie gerade verwendet habe, löst zwei Probleme
- Sie suggeriert kein Basis-10-Zahlensystem (oder irgendein Zahlensystem)
- Sie hat ein deutliches und lesbares Aussehen
Ich mag das (X, X, X, X)-Aussehen. Ich könnte mir vorstellen, es auf (X, X, X) zu beschränken, da ein Stilattribut nicht gerade ein *Selektor* ist und normalerweise nicht in denselben Gesprächen behandelt wird. Die Klammern machen es für mich klarer, aber ich könnte mir auch eine X-X-X (durch Bindestriche getrennte) Syntax vorstellen, die diese nicht benötigen würde, oder eine (X / X / X) Syntax, die wahrscheinlich von den Klammern profitieren würde.
Selectors Level 3 verwendet kurzzeitig Bindestriche. Level 2 verwendete sowohl Bindestriche als auch Kommas an verschiedenen Stellen.
Jedenfalls bekomme ich offenbar alle halbe Jahrzehnt den Drang, das zu erwähnen.
Ähnlich wie Semver, es überschlägt sich nicht in den aussagekräftigeren Teil, es ergibt absolut Sinn
Man könnte eine Punktnotation verwenden, und dann würde die Idee, dass eine größere Zahl spezifischer ist, zutreffen.
1.0.1 vs. 0.11.1
Stimme zu. Ähnlich wie bei der Versionsnummer.
Coole Zeitreise, danke für den Spaß mit CSS-Spezifität! Ich schlage vor, Das ist ein sehr nützliches Werkzeug zur allgemeinen Abwägung der Spezifität eines gegebenen Selektors zu ersetzen. Das Modell wird, wie Sie sagen, versagen, wenn wir mit einer festen 10 statt mit der "breiten" Basis im CSS-Spezifitätsalgorithmus berechnen. Ein Faktor, der meiner Meinung nach die Angelegenheit für die Leute noch mehr verwässert hat als das Konzept eines breiten Algorithmus, ist, wie die `!important`-Deklaration in die Gewichtungsberechnungen einfließt. Dies hat zu einer Übernutzung dieser Deklaration zur Lösung von Spezifitätskonflikten geführt, die, wenn sie im CSS mit einem spezifischeren Selektor gelöst werden, die `!important`-Deklaration für den beabsichtigten Zweck verwendet werden kann: Um sicherzustellen, dass meine User-Style-Sheet-Regeln die Autor-Regeln tatsächlich überschreiben, normalerweise weil ich ein #A11Y-Anliegen habe und meine persönlichen Stile aus Notwendigkeit anwende. Andernfalls ist die Eleganz des Cascades gebrochen. Einige Benutzer möchten immer noch integrierte saubere CSS-Ansätze für Skalierbarkeit verwenden. Danke, dass Sie mich wieder für Spezifität begeistert haben, aus irgendeinem Grund ein lang anhaltender Zauber, geboren aus meinen eigenen DOH!-Momenten aus den schlechten alten Tagen
Toller Artikel. Ich habe immer gedacht, dass das Schreiben der Spezifität ohne Trennzeichen mehrdeutig sein könnte und Probleme verursachen könnte. Danke, dass Sie das hier veröffentlicht haben.
Ich stimme auch zu, dass wir Inline-Stile aus der Berechnung entfernen können – zur Kürze –, so wie wir es mit dem Schlüsselwort `!important` tun, da beides alles andere negiert. Und meistens werden sie nicht (oder sollten nicht) verwendet. Außerdem ist (X, X, X) einfach lesbarer als (X, X, X, X, X).
Übrigens – `ul#nav.top` hat eine Spezifität von (0, 1, 1, 1), nicht „(0, 1, 0, 1)“.