Effiziente Helfer für unendliche Versorgung mit Inline -CSS -benutzerdefinierten Eigenschaften und Calc ()

Kürzlich habe ich eine sehr einfache Sass -Schleife geschrieben, die mehrere Polster- und Margin -Dienstprogrammklassen ausgibt. Nichts Besonderes, nur eine Sass -Karte mit 11 Abstandswerten und Schleifen werden verwendet, um die Klasse von Polsterung und Rändern auf jeder Seite zu erstellen. Wie wir sehen werden, funktioniert dies, wird aber schließlich eine ganze Menge CSS produzieren. Wir werden es neu neu gestalten, um Eigenschaften mit CSS anzupassen und das System prägnanter zu gestalten.

Hier ist die ursprüngliche SASS -Implementierung:

 <code>$space-stops: ( '0': 0, '1': 0.25rem, '2': 0.5rem, '3': 0.75rem, '4': 1rem, '5': 1.25rem, '6': 1.5rem, '7': 1.75rem, '8': 2rem, '9': 2.25rem, '10': 2.5rem, ); @each $key, $val in $space-stops { .p-#{$key} { padding: #{$val} !important; } .pt-#{$key} { padding-top: #{$val} !important; } .pr-#{$key} { padding-right: #{$val} !important; } .pb-#{$key} { padding-bottom: #{$val} !important; } .pl-#{$key} { padding-left: #{$val} !important; } .px-#{$key} { padding-right: #{$val} !important; padding-left: #{$val} !important; } .py-#{$key} { padding-top: #{$val} !important; padding-bottom: #{$val} !important; } .m-#{$key} { margin: #{$val} !important; } .mt-#{$key} { margin-top: #{$val} !important; } .mr-#{$key} { margin-right: #{$val} !important; } .mb-#{$key} { margin-bottom: #{$val} !important; } .ml-#{$key} { margin-left: #{$val} !important; } .mx-#{$key} { margin-right: #{$val} !important; margin-left: #{$val} !important; } .my-#{$key} { margin-top: #{$val} !important; margin-bottom: #{$val} !important; } }</code>

Dieser Code funktioniert gut und gibt alle erforderlichen Dienstprogrammklassen aus. Es kann jedoch auch schnell aufgebläht werden. In meinem Fall sind sie bei unkomprimiertem und weniger als 1 KB nach der Komprimierung etwa 8,6 KB. (Brotli ist 542 Bytes, Gzip ist 925 Bytes.)

Da sie sehr wiederholt sind, funktioniert die Komprimierung großartig, aber ich kann das Gefühl, dass alle diese Klassen überflüssig sind, immer noch nicht loswerden. Außerdem habe ich nicht einmal kleine/mittlere/große Haltepunkte gemacht, die für diese Art von Helferklasse ziemlich typisch sind.

Hier ist ein künstliches Beispiel für eine reaktionsschnelle Version nach dem Hinzufügen einer kleinen/mittleren/großen Klasse. Wir werden die zuvor definierte Karte $ space-stops wiederverwenden und den doppelten Code in den Mixin einfügen

 <code>@mixin finite-spacing-utils($bp: '') { @each $key, $val in $space-stops { .p-#{$key}#{$bp} { padding: #{$val} !important; } .pt-#{$key}#{$bp} { padding-top: #{$val} !important; } .pr-#{$key}#{$bp} { padding-right: #{$val} !important; } .pb-#{$key}#{$bp} { padding-bottom: #{$val} !important; } .pl-#{$key}#{$bp} { padding-left: #{$val} !important; } .px-#{$key}#{$bp} { padding-right: #{$val} !important; padding-left: #{$val} !important; } .py-#{$key}#{$bp} { padding-top: #{$val} !important; padding-bottom: #{$val} !important; } .m-#{$key}#{$bp} { margin: #{$val} !important; } .mt-#{$key}#{$bp} { margin-top: #{$val} !important; } .mr-#{$key}#{$bp} { margin-right: #{$val} !important; } .mb-#{$key}#{$bp} { margin-bottom: #{$val} !important; } .ml-#{$key}#{$bp} { margin-left: #{$val} !important; } .mx-#{$key}#{$bp} { margin-right: #{$val} !important; margin-left: #{$val} !important; } .my-#{$key}#{$bp} { margin-top: #{$val} !important; margin-bottom: #{$val} !important; } } } @include finite-spacing-utils; @media (min-width: 544px) { @include finite-spacing-utils($bp: '_sm'); } @media (min-width: 768px) { @include finite-spacing-utils($bp: '_md'); } @media (min-width: 1024px) { @include finite-spacing-utils($bp: '_lg'); }</code>

Es ist ungefähr 41,7 KB, wenn sie nicht komprimiert sind (Brotli ist ungefähr 1 KB und GZIP ist ungefähr 3 KB). Es komprimiert immer noch gut, aber es ist ein wenig lächerlich.

Ich weiß, dass data-* von CSS unter Verwendung der [attr() -Funktion verwiesen werden kann. Ich frage mich, ob es möglich ist calc() attr() verwenden, und erstellen Sie zusammen einen dynamisch berechneten Abstands-Utility-Helfer durch data-* (z. B. data-m="1" oder data-m="1@md" ) und dann in margin: calc(attr(data-m) * 0.25rem) ). Dies kann sehr mächtig sein.

Das Ende der Geschichte ist jedoch: Sie können nicht (derzeit) attr() mit einem Attribut außer content verwenden. Schade. Bei der Suche nach Informationen attr() und calc() fand ich diesen interessanten Kommentar von Simon Rigét zum Stapelüberlauf, der darauf hindeutet, dass CSS -Variablen direkt in den Eigenschaften von Inline -Stil festgelegt werden. Ahhh!

Daher kann Folgendes durchgeführt werden:<div style="--p: 4;"> und dann in CSS:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code&gt;:root { --p: 0; } [style*='--p:'] { padding: calc(0.25rem * var(--p)) !important; }&lt;/code&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> In <code>style="--p: 4;" padding: 1rem !important;

… Jetzt haben Sie einen unendlich skalierbaren Monster -Assistenten der Utility -Klasse.

So könnte es in CSS aussehen:

 <code>:root { --p: 0; --pt: 0; --pr: 0; --pb: 0; --pl: 0; --px: 0; --py: 0; --m: 0; --mt: 0; --mr: 0; --mb: 0; --ml: 0; --mx: 0; --my: 0; } [style*='--p:'] { padding: calc(0.25rem * var(--p)) !important; } [style*='--pt:'] { padding-top: calc(0.25rem * var(--pt)) !important; } [style*='--pr:'] { padding-right: calc(0.25rem * var(--pr)) !important; } [style*='--pb:'] { padding-bottom: calc(0.25rem * var(--pb)) !important; } [style*='--pl:'] { padding-left: calc(0.25rem * var(--pl)) !important; } [style*='--px:'] { padding-right: calc(0.25rem * var(--px)) !important; padding-left: calc(0.25rem * var(--px)) !important; } [style*='--py:'] { padding-top: calc(0.25rem * var(--py)) !important; padding-bottom: calc(0.25rem * var(--py)) !important; } [style*='--m:'] { margin: calc(0.25rem * var(--m)) !important; } [style*='--mt:'] { margin-top: calc(0.25rem * var(--mt)) !important; } [style*='--mr:'] { margin-right: calc(0.25rem * var(--mr)) !important; } [style*='--mb:'] { margin-bottom: calc(0.25rem * var(--mb)) !important; } [style*='--ml:'] { margin-left: calc(0.25rem * var(--ml)) !important; } [style*='--mx:'] { margin-right: calc(0.25rem * var(--mx)) !important; margin-left: calc(0.25rem * var(--mx)) !important; } [style*='--my:'] { margin-top: calc(0.25rem * var(--my)) !important; margin-bottom: calc(0.25rem * var(--my)) !important; }</code>

Dies ist der ersten Sass -Schleife oben sehr ähnlich, aber es gibt keine 11 Schleifen - aber es ist unendlich. Es ist ungefähr 1,4 KB unkomprimiert, Brotli ist 226 Bytes und Gzip 284 Bytes.

Wenn Sie dies auf einen Haltepunkt ausdehnen möchten, ist die unglückliche Nachricht, dass Sie das "@" -Scharakter nicht in den CSS-Variablennamen einfügen können (obwohl es seltsamerweise Emojis und andere UTF-8-Zeichen verwenden darf). Möglicherweise können Sie Variablennamen wie P_SM oder SM_P festlegen. Sie müssen einige zusätzliche CSS -Variablen und einige Medienabfragen hinzufügen, um all dies zu behandeln, aber es wird nicht exponentiell wachsen, wie der herkömmliche CSS -Klassenname, der mit einem SASS für Schleife erstellt wurde.

Das Folgende ist die äquivalente reaktionsschnelle Version. Wir werden Sass Mixin erneut verwenden, um die Duplikation zu verringern:

 <code>:root { --p: 0; --pt: 0; --pr: 0; --pb: 0; --pl: 0; --px: 0; --py: 0; --m: 0; --mt: 0; --mr: 0; --mb: 0; --ml: 0; --mx: 0; --my: 0; } @mixin infinite-spacing-utils($bp: '') { [style*='--p#{$bp}:'] { padding: calc(0.25rem * var(--p#{$bp})) !important; } [style*='--pt#{$bp}:'] { padding-top: calc(0.25rem * var(--pt#{$bp})) !important; } [style*='--pr#{$bp}:'] { padding-right: calc(0.25rem * var(--pr#{$bp})) !important; } [style*='--pb#{$bp}:'] { padding-bottom: calc(0.25rem * var(--pb#{$bp})) !important; } [style*='--pl#{$bp}:'] { padding-left: calc(0.25rem * var(--pl#{$bp})) !important; } [style*='--px#{$bp}:'] { padding-right: calc(0.25rem * var(--px#{$bp})) !important; padding-left: calc(0.25rem * var(--px)#{$bp}) !important; } [style*='--py#{$bp}:'] { padding-top: calc(0.25rem * var(--py#{$bp})) !important; padding-bottom: calc(0.25rem * var(--py#{$bp})) !important; } [style*='--m#{$bp}:'] { margin: calc(0.25rem * var(--m#{$bp})) !important; } [style*='--mt#{$bp}:'] { margin-top: calc(0.25rem * var(--mt#{$bp})) !important; } [style*='--mr#{$bp}:'] { margin-right: calc(0.25rem * var(--mr#{$bp})) !important; } [style*='--mb#{$bp}:'] { margin-bottom: calc(0.25rem * var(--mb#{$bp})) !important; } [style*='--ml#{$bp}:'] { margin-left: calc(0.25rem * var(--ml#{$bp})) !important; } [style*='--mx#{$bp}:'] { margin-right: calc(0.25rem * var(--mx#{$bp})) !important; margin-left: calc(0.25rem * var(--mx#{$bp})) !important; } [style*='--my#{$bp}:'] { margin-top: calc(0.25rem * var(--my#{$bp})) !important; margin-bottom: calc(0.25rem * var(--my#{$bp})) !important; } } @include infinite-spacing-utils; @media (min-width: 544px) { @include infinite-spacing-utils($bp: '_sm'); } @media (min-width: 768px) { @include infinite-spacing-utils($bp: '_md'); } @media (min-width: 1024px) { @include infinite-spacing-utils($bp: '_lg'); }</code>

Ungefähr 6,1 KB sind unkomprimiert, Brotli ist 428 Bytes und GZIP 563 Bytes.

Ich denke, schreibe wie wie<div style="--px:2; --my:4;"> Ist das HTML angenehm für das Auge oder eine gute Entwicklerergonomie ... nein, nicht etwas Besonderes. Aber ist dieser Ansatz in einigen Fällen machbar, z. B. wenn Sie (aus irgendeinem Grund) nur sehr wenig CSS benötigen oder überhaupt keine externen CSS -Dateien benötigen? Ja, natürlich denke ich, dass es kann. Es lohnt sich darauf zu zeigen, dass CSS -Variablen, die in Inline -Stilen zugewiesen sind, nicht auslaufen. Sie reagieren nur auf das aktuelle Element und ändern den Wert der globalen Variablen nicht. Gott sei Dank! Eine seltsame Sache, die ich bisher gefunden habe, ist, dass Devtools (zumindest in Chrome, Firefox und Safari) keine Stile mit dieser Technik auf der Registerkarte Rechenstile melden.<p> Es ist auch erwähnenswert, dass ich die traditionellen Polster- und Randeigenschaften sowie -Top, -Right, -Bottom und -Left verwendet habe. Durch selektives Mischen und Anpassen logischer und traditioneller Eigenschaften ist es sogar möglich, einige Bytes zu reduzieren. Auf diese Weise gelang es mir, Brotli auf 400 Bytes und Gzip auf 521 Bytes zu komprimieren.</p> <h3> Andere Anwendungsfälle</h3> <p> Dies scheint am besten zu linearen inkrementellen Proportionen zu passen (deshalb scheinen Polsterung und Rand ein guter Anwendungsfall zu sein), aber ich kann sehen, dass dies für Breite und Höhe (Anzahl der Spalten und/oder Breite) in einem Gittersystem funktioniert. <strong>Vielleicht</strong> funktioniert es für Typografie (aber vielleicht auch nicht).</p> <p> Ich bin sehr besorgt über die Dateigröße, aber hier kann es einige andere Verwendungszwecke geben, an die ich nicht gedacht habe. Vielleicht schreiben <strong>Sie</strong> Ihren Code auf diese Weise nicht, aber das kritische CSS -Tool kann den Code für diese Methode neu umrüsten.</p> <h3> Tiefer graben</h3> <p> Als ich tiefer grabe, stellte ich fest, dass Ahmad Shaded Mixing <code>calc() mit CSS -Variablenzuordnungen in Inline -Stilen, insbesondere für Avatargrößen, diskutierte. Miriam Suzannes Artikel über das Smashing Magazine im Jahr 2019 verwendet calc() jedoch nicht einige erstaunliche Funktionen, die mithilfe von variablen Zuordnungen in Inline -Stilen erreicht werden können.