Wenn Sie sich gegen die Verwendung von Inline-Styles sträuben, verschieben Sie einfach das style-Attribut in das class-Attribut! Stellen Sie dann sicher, dass CSS vorhanden ist, das, Sie wissen schon, das tut, was es auf der Verpackung verspricht.
Okay, lasst mich eintauchen und den Witz komplett ruinieren.
- Zuerst einmal ist das ein Witz, also tut das bitte nicht wirklich. Mir macht selbst der gelegentliche Inline-Stil für einmalige Dinge nichts aus, aber das hier ist nicht so.
- Für mich ist das Seltsamste der Punkt (
.) selbst. Das Maskieren der ungewöhnlicheren Zeichen mit einem Backslash () fühlt sich normal an, aber was hat es mit diesem Punkt auf sich? UPDATE: Das liegt am Leerzeichen. Es sind zwei Klassen im HTML, nicht eine. Dumm gelaufen. - Der kleine Punkt-Trick funktioniert nicht, wenn das folgende Zeichen eine Zahl ist (z.B.
.padding:.1rem;). UPDATE: Weil Klassen, die mit einer Zahl beginnen, ungültig sind. Dumm gelaufen. - Sie können die Maskierung und Trickserei vermeiden, wenn Sie einen Attributselektor wie
[class*="display: flex;"]verwenden. - Das erinnert mich an die Forschung von Mathias Bynens: CSS-Zeichen-Escape-Sequenzen. Aber... das scheint nicht mehr zu funktionieren? Ich frage mich, ob die Browser sich geändert haben oder ob das Werkzeug defekt ist und nicht mehr das ausgibt, was es sollte (z.B. sieht
.color\3A \ #f06d06richtig aus?).
Hier ist das ganze Herumspielen
Der Punkt ist da, weil zwei Klassen angewendet werden, getrennt durch ein Leerzeichen:
display:undflex;.Das ist im Grunde kein Unterschied zu (in CSS) etwas wie, z.B.,
.post.has-thumbnail { display: block; }.Ja! Uff. So eine Kopfnuss. Danke.
Bezüglich des Punktzeichens ist das
class-Attribut eine durch Leerzeichen getrennte Liste, sodass das Element zwei Klassennamen hat:display:undflex;.Das erklärt auch das Problem mit Zahlen:
1rembeginnt mit einer Zahl, daher ist es kein gültiger Klassenname.Nun, Leute verwenden Klassen wie .align-left und .bg-red. Das ist nicht viel schlimmer.
Nun, ist das nicht atomar.
Danke für die Erwähnung meiner alten Forschung + Werkzeug :) Um Ihre Frage zu beantworten, das Werkzeug ist immer noch korrekt.
Das von Ihnen im Demo verwendete Markup ist
Hier ist ein direkter Link zum Werkzeug mit der Eingabe aus Ihrer Demo: https://mothereff.in/css-escapes#0color%3A%20%23bada55%3B Es zeigt eine rote Warnung: „Leerzeichen sind nicht erlaubt!“, da es darauf ausgelegt ist, jeweils einen Bezeichner zu maskieren. Aber das Beispiel verwendet zwei Klassennamen statt einem!
Ähnlich wie
<div class="foo bar">zwei verschiedene Klassennamenfooundbaranwendet, wendet<div class="color: #bada55;">zwei verschiedene Klassennamencolor:und#bada55;an.Sie können das Werkzeug verwenden, um diese separat zu maskieren.
color:wird zucolor\3A(es könnte auchcolor\:sein, da die Unterstützung für IE < 8 heutzutage keine Rolle mehr spielt) und#bada55;wird zu\#bada55\;.Um die Demo zu korrigieren, gibt es ein paar Optionen
Verwenden Sie
id="…"anstelle vonclass="…"(da nurclassdurch Leerzeichen getrennt sein kann). Dies würde jedoch dazu führen, dass das HTML ungültig ist, da IDs keine Leerzeichen enthalten dürfen, aber zumindest die Formatierung würde funktionieren.Wählen Sie basierend auf den beiden Klassennamen aus:
.color\3a.#bada55\;Entfernen Sie das Leerzeichen, sodass nur ein einzelner Klassenname angewendet wird.
LOL über das SEHR ROT
Leerzeichen sind nicht erlaubt!DAS ERKLÄRT ES.
Gleicher Grund, warum ich beim
.in den anderen maskierten Selektoren einen Gehirnaussetzer hatte.Ich nehme das als sarkastisches Spaßmachen über all die „revolutionären“ CSS-Bibliotheken/Frameworks, die versuchen, die Verwendung einfacher/leichter/besser zu machen (wie Tachyons, all die seltsamen CSS-in-JS-Bibliotheken usw.).
Das ist im Grunde TailwindCSS, ehrlich gesagt
Demnächst in einem CSS-Framework in Ihrer Nähe!
Sehen Sie, das ergibt tatsächlich Sinn! Was sie im Artikel gemacht haben, scheint völlig sinnlos zu sein, weil genauso viel Arbeit in das HTML-Dokument gesteckt wird und genauso viel Unordnung darin herrscht, als wenn sie das style-Attribut verwendet hätten (plus die zusätzliche Arbeit im CSS-Dokument, das auch schwer zu lesen ist, wenn man CSS nicht wirklich versteht). Ich dachte: „Wenn man das Ganze nicht tippen will, weist man einfach eine Klasse mit einem normalen Namen zu! Und wenn man das Ganze tippen will, was spricht dagegen, style zu verwenden?“ Aber wenn das, was in Ihrem Kommentar steht, tatsächlich verfügbar sein wird, ist das ehrlich gesagt ideal. Wenn nur eine Eigenschaft gesetzt werden muss, sodass eine Klasse nicht lohnt, aber man das style-Attribut nicht mag (ich mag es selbst nicht), wäre es erstaunlich, diese eine Eigenschaft direkt setzen zu können!
Haben Sie von Tailwind CSS gehört?
Genau, das ist im Grunde, wie Leute heutzutage coole CSS schreiben
Ich rufe die Polizei!
Go gor it
Ich liebe das so sehr und plane, es für all meine Projekte zu verwenden. Allerdings frustriert es mich, dass ich das CSS von Hand schreiben muss.
Hier ist eine großartige JS-Funktion, die das Stylesheet dynamisch für Sie erstellt. Schreiben Sie einfach Ihr HTML wie beschrieben und fügen Sie dies unten auf Ihrer Seite hinzu.
Heutzutage habe ich angefangen, Escape-Zeichen zu verwenden.
.width-100\% { width: 100%; }
.width-50\% { width: 50%; }
Vollbreite Div
Halbbreite Div
Ich werde jetzt auch Kellen Greens Trick in Betracht ziehen.
Klassen, die mit einer Zahl beginnen, sind an sich perfekt gültig. Es ist nur der Klassenselektor, der nicht damit beginnen kann. Sie müssen die Zahl maskieren, indem Sie ihr
\3voranstellen, sodass der Selektor.padding\:.\31rem\;lauten sollte.Schauen Sie sich einfach TailwindCSS an und ersparen Sie sich die Mühe, möglicherweise in ein schwarzes Loch der Experimente zu geraten :)
Es gibt tatsächlich einige Vorteile dieser Art von CSS. Atomic CSS oder Utility CSS wird immer beliebter... Aber mit einer Lernkurve. Und man verliert den Bezug zu CSS, da man ständig eine Utility-Klasse verwendet. CoCreateCSS generiert das CSS automatisch und dynamisch, ohne Lernkurve. Wenden Sie einfach class=”display:flex flex-wrap:wrap …” oder eine beliebige andere Klasse an und es wird automatisch generiert. Nur 11,2 KB im Gegensatz zu Tailwind +1 MB... es ist noch in Arbeit, also entschuldigen Sie etwaige defekte Links zu Dokumentation und Demos.
https://ws.cocreate.app/docs/utility
https://github.com/CoCreate-app/CoCreateCSS
Wenn Sie Tailwind richtig verwenden, schrumpft das 1 MB schnell. Die Build-Schritte von Tailwind entfernen ungenutzte Klassen (und wie Sie sich vorstellen können, gibt es viele...)
Ich bin gleichzeitig erstaunt und verängstigt.
Ja, das ultimative Utility-Klassen-System! Tailwind, schluck das!
CSS und HTML handeln von Semantik.
Erklären Sie, was Sie erreicht haben, indem Sie Farbe und Größe in className erwähnen, wenn Sie dies nach ein oder zwei Tagen in eine andere Farbe und Größe ändern müssen...
Nee. Falscher Ansatz. HTML-Markup sollte nicht für das Styling zuständig sein.
Machen die nicht bereits etwas Ähnliches mit TailWindCSS? Tailwind hat einfach bessere Klassennamen LOL.