インラインCSSカスタムプロパティとcalc（）を使用した効率的な無限ユーティリティヘルパー

最近、複数のパディングとマージンユーティリティクラスを出力する非常に基本的なSASSループを書きました。特別なものはなく、11の間隔値を持つSASSマップだけで、ループを使用して、両側にパディングとマージンのクラスを作成します。ご覧のとおり、これは機能しますが、最終的にはかなりの量のCSSが生成されます。 CSSを使用してプロパティをカスタマイズし、システムをより簡潔にするためにリファクタリングします。

これが元のSASS実装です：

 <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>

このコードはうまく機能し、必要なすべてのユーティリティクラスを出力します。ただし、すぐに肥大化することもあります。私の場合、圧縮されていない場合は約8.6kbで、圧縮後1kb未満です。 （Brotliは542バイト、GZIPは925バイトです。）

それらは非常に反復的であるため、圧縮はうまく機能しますが、これらのクラスのすべてが冗長であるという感覚を取り除くことはできません。また、このタイプのヘルパークラスにかなり典型的な小さな/中/大きなブレークポイントを作成しませんでした。

小/中/大型クラスを追加した後のレスポンシブバージョンの人為的な例です。以前に定義された$ Space-Stopsマップを再利用し、重複コードをMixinに入れます

<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>

圧縮されていない場合は約41.7kbです（Brotliは約1kb、GZIPは約3kbです）。それでもよく圧縮されますが、少しばかげています。

data-*属性は[attr()関数を使用してCSSから参照できることを知っているので、 calc()とattr()を一緒に使用することが可能かどうか疑問に思っています。 data-* margin: calc(attr(data-m) * 0.25rem) （例えば、 data-m="1"またはdata-m="1@md" ）。 0.25remの増分でのスケール）。これは非常に強力です。

しかし、ストーリーの終わりは、 content属性を除く任意の属性を使用して（現在） attr()を使用することはできません。残念な。しかし、 attr()およびcalc()情報を検索している間、SimonRigétによるスタックオーバーフローに関するこの興味深いコメントを見つけました。これは、インラインスタイルのプロパティにCSS変数を直接設定することを示唆しています。ああ！

したがって、以下を実行できます。<div style="--p: 4;"> 、そして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">ログイン後にコピー</div></div> <p> <code>style="--p: 4;"たとえば、 padding: 1rem !important; 。

…これで、無限にスケーラブルなスペースユーティリティクラスモンスターアシスタントができました。

これがCSSのどのように見えるかです：

 <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>

これは上記の最初のSASSループに非常に似ていますが、11のループはありませんが、無限です。約1.4kbの非圧縮で、Brotliは226バイト、GZIPは284バイトです。

これをブレークポイントに拡張したい場合、不幸なメッセージは、CSS変数名に「@」文字を配置できないということです（奇妙なことに、絵文字やその他のUTF-8文字を使用することは許可されています）。したがって、P_SMやSM_Pなどの変数名を設定できる場合があります。これらすべてを処理するには、いくつかの追加のCSS変数とメディアクエリを追加する必要がありますが、ループ用のSASSを使用して作成された従来のCSSクラス名のように指数関数的に成長することはありません。

以下は、同等のレスポンシブバージョンです。 SASS Mixinを再度使用して重複を減らします。

 <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>

約6.1kbが圧縮され、Brotliは428バイト、GZIPは563バイトです。

私は書くようだと思います<div style="--px:2; --my:4;">このHTMLは目を喜ばせますか、それとも優れた開発者の人間工学的です...いいえ、特別ではありません。しかし、このアプローチは、（何らかの理由で）CSSを必要としない場合、または外部CSSファイルをまったく必要としない場合など、場合によっては実行可能ですか？はい、もちろんできると思います。ここでは、インラインスタイルで割り当てられたCSS変数が漏れないことをここで指摘する価値があります。それらは現在の要素にのみ作用し、グローバル変数の値を変更しません。ああ、助かった！私がこれまでに見つけた奇妙なことの1つは、DevTools（少なくともChrome、Firefox、およびSafariで）が[Compute Styles]タブでこの手法を使用してスタイルを報告しないことです。<p>また、従来のパディングとマージンプロパティ、および-top、right、-bottom、および左を使用したことも言及する価値がありますが、パディングブロックやパディングインラインなどの同等の論理プロパティを使用できます。論理的および従来の特性を選択的に混合して一致させることにより、数バイトを減らすことさえ可能です。このようにして、Brotliを400バイト、GZIPに521バイトに圧縮することができました。</p> <h3 id="その他のユースケース">その他のユースケース</h3> <p>これは、線形増分比率（そのため、パディングとマージンが良いユースケースのように見える理由）のあるものに最適なようですが、グリッドシステムの幅と高さ（列の数や幅の数）で機能する可能性があることがわかります。<strong>たぶん</strong>それはタイポグラフィで働いています（ただし、そうではありません）。</p> <p>私はファイルのサイズについて非常に心配していますが、私が考えていなかった他のいくつかの用途があるかもしれません。この方法でコードを書き込むことはない<strong>かも</strong>しれませんが、重要なCSSツールはこの方法を使用するためにコードをリファクタリングする可能性があります。</p> <h3 id="深く掘り下げます">深く掘り下げます</h3> <p>私がそれを掘り下げたとき、Ahmad Shadededは<code>calc()とインラインスタイルのCSS変数割り当て、特にアバターサイズの混合について議論したことがわかりました。 2019年のSmashing Magazineに関するMiriam Suzanneの記事はcalc()を使用していませんが、インラインスタイルの可変割り当てを使用して達成できる驚くべき機能を共有しています。