nicht angemeldet
!important und AMP
Gunnar Bittersmann
!important und AMP
Gunnar Bittersmann
Rolf BAuf AMP-Seiten kann man nicht !important verwenden. Fällt jemandem was besseres ein als statt
.foo { bar: baz !important }
nun
.foo.foo.foo.foo.foo.foo.foo { bar: baz }
zu schreiben?
LLAP 🖖
PS: Der Hinweis, den AMP-Zirkus nicht mitzumachen, könnte von mir sein. Das wird aber manche Stakeholder nicht überzeugen.
--
Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
-
Hallo Gunnar,
auf der Suche nach dem SpeciFISHity Cartoon fand ich das hier 😉
Wenn ein Schwarm Hechte genügt, warum dann gleich nuken? Aber sind alle Browser wirklich so doof, dass sie die Wiederholung nicht bemerken und .foo.foo.foo.foo.foo.foo.foo als Specifishity 0-7-0 akzeptieren?
Rolf
--
sumpsi - posui - clusi-
@@Rolf B
Du hattest den alt-Text vergessen. Ich hab den mal ergänzt.
Es geht nicht darum, mit
!importantschlechtes CSS zu fixen; sondern darum,!importantsinnvoll einzusetzen.Auch ein Harry Roberts (a/k/a/ @csswizardry) sagt nicht: “Never use
!important”; er sagt: “Never use!importantin anger!”Wenn ein Schwarm Hechte genügt, warum dann gleich nuken?
Weil du niemals sicher sein kannst, wie groß der Schwarm sein muss. Reichen 3 Hechte? 7? 12?
Außerdem ist die Realität kein Dorfteich, sondern ein Haifischbecken. Sobald ein Hai auftaucht, genügt kein Schwarm Hechte.
Aber sind alle Browser wirklich so doof, dass sie die Wiederholung nicht bemerken und .foo.foo.foo.foo.foo.foo.foo als Specifishity 0-7-0 akzeptieren?
Warum doof? Die Spec sagt: “count the number of class selectors, attributes selectors, and pseudo-classes in the selector”. Sie sagt nicht: “count the number of different class selectors”.
Doof wäre ein Browser, der sich nicht an die Spec hielte.
LLAP 🖖
--
Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.-
Hallo Gunnar,
count the number of
differentclass selectorsok, wenn das bewusst so gemeint ist, dann ist's gut.
Aber die Schwäche deines Vorschlags hast Du ja klar identifiziert. Die Haifische. Über die kommst du mit noch so vielen Hechten nicht weg, da hilft nur Schiff oder Nuke. Letzeres ist keine Option, und das Schiff (=inline style) willst Du sicher auch nicht.
Da bleibt dann nur, ein leckeres Dressing über die Kröte zu kippen und sie zu schlucken, wenn's denn AMP sein soll/muss. Solange sich keine Haie in die Nähe schleichen, kannst Du es ja per Crowd-Classing lösen. Was besseres wüsste ich auch nicht.
Rolf
--
sumpsi - posui - clusi -
@@Gunnar Bittersmann
Es geht nicht darum, mit
!importantschlechtes CSS zu fixen; sondern darum,!importantsinnvoll einzusetzen.Ein Beispiel dafür sind Helferklassen wie
visally-hidden:.visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px) !important; padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden !important; white-space: nowrap !important; }Wenn man dann sowas wie
.foo .bar { padding: 1em; }hat, muss für das visuell versteckte Element
<div class="foo"> <div class="bar visually-hidden">…</div> </div>natürlich
padding: 0gelten.Blödes AMP, das.
LLAP 🖖
--
Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an. -
@@Gunnar Bittersmann
Weil du niemals sicher sein kannst, wie groß der Schwarm sein muss. Reichen 3 Hechte? 7? 12?
Außerdem ist die Realität kein Dorfteich, sondern ein Haifischbecken. Sobald ein Hai auftaucht, genügt kein Schwarm Hechte.
Deshalb werde ich nun nicht
.foo.foo.foo.foo.foo.foo.foo { bar: baz }verwenden, sondern
<html id="root">/* specificity hack because of important flag not working with AMP */ #root#root#root .foo { bar: baz }LLAP 🖖
--
Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.-
@@Gunnar Bittersmann
<html id="root">/* specificity hack because of important flag not working with AMP */ #root#root#root .foo { bar: baz }Rolf brachte mich in einem anderen Thread auf noch was Besseres:
.foo:not(#none):not(#none):not(#none) { bar: baz }Da braucht man keinen Nachfahrenselektoren (was den Präprozessor-Code einfacher macht) und ist nicht von einer ID bei einem anderen Element (dem Wurzelelement) abhängig.
Man muss nur aufpassen, dass man nicht tatsächlich mal die ID
nonevergibt.Oder man wählt gleich einen Selektor mit einer sehr unwahrscheinlichen ID, bspw.
.foo:not(#\#):not(#\#):not(#\#) { bar: baz }LLAP 🖖
--
Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
-
-
-
Hi there,
auf der Suche nach dem SpeciFISHity Cartoon fand ich das hier 😉
Das ist natürlich völliger Unfug, wie alle diese "Regeln" mit endgültigem Wahrheitsanspruch. Es mag vielleicht das eigene grottige CSS nicht verbessern, aber sehr oft kommt man in die Situation, wo man die Stylesheetvorstellungen anderer "overrulen" muß. Und da ist !important ungemein praktisch...
-
@@klawischnigg
aber sehr oft kommt man in die Situation, wo man die Stylesheetvorstellungen anderer "overrulen" muß.
Das wäre dann “in anger”.
Und da ist !important ungemein praktisch...
praktisch ≠ gut
LLAP 🖖
--
Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an. -
Hallo klawischnigg,
Das ist natürlich völliger Unfug
wie jedes Plakat ist es plakativ und vereinfacht die Wahrheit.
Man kann es auch so deuten: Wenn dein CSS schlecht ist, ist der flächendeckende Einsatz von !important nicht die Lösung.
Wichtig ist hier das Wort Wenn. Der Umkehrschluss, dass !important ein Smell für schlechtes CSS ist, ist nicht gültig.
Rolf
--
sumpsi - posui - clusi-
Man kann es auch so deuten: Wenn dein CSS schlecht ist, ist der flächendeckende Einsatz von !important nicht die Lösung.
CSS ist entweder schlecht oder schlechter. Der Unterschied ist, dass schlechtes CSS eine Lebensdauer von 3-5 Jahren hat, schlechteres CSS eine Lebensspanne von 1-3 Jahren. Danach haben sich so viele technischen Schulden angehäuft, dass eine Wartung der Code-Basis faktisch nicht mehr möglich ist und man wieder von vorne anfangen muss. Ich glaube inzwischen auch nicht mehr, dass man dem überhaupt mit Architektur und Disziplin entgegen wirken kann. Die gute Nachricht ist, dass das auch ungefähr der Dauer eines Modezyklus' im Netz entspricht. Es steht also vermutlich sowieso schon ein Redesign an und man kann sich von den Altlasten befreien.
Das ist natürlich überspitzt formuliert, ich glaube aber darin steckt ein Funke Wahrheit. CSS wird nicht für die Ewigkeit gemacht.
-
-
-
@@Rolf B
auf der Suche nach dem SpeciFISHity Cartoon […]
Wenn ein Schwarm Hechte genügt, warum dann gleich nuken?
Für Mitlesende: SpeciFISHity
LLAP 🖖
--
Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
-
-
Hi there,
PS: Der Hinweis, den AMP-Zirkus nicht mitzumachen, könnte von mir sein. Das wird aber manche Stakeholder nicht überzeugen.
Interessant, das kannte ich noch gar nicht. Ist das die Weiterentwicklung von "mobile-first" zu "mobile-only"...?
-
@@klawischnigg
Ist [AMP] die Weiterentwicklung von "mobile-first" zu "mobile-only"...?
Eher zu Google-only. 🤮
LLAP 🖖
--
Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
-
-
Um die Lesbarkeit zu verbessern und weil es mit Sass o.ä. einfacher ist, schreibe ich:
[class].foo { bar: baz }wobei
[class]beliebig wiederholt werden kann, um den Score zu erhöhen.