Pembantu utiliti tak terhingga yang cekap menggunakan sifat tersuai CSS dan Calc ()

Baru -baru ini saya menulis gelung SASS yang sangat asas yang mengeluarkan pelbagai kelas padding dan margin utiliti. Tidak ada yang istimewa, hanya peta sass dengan 11 nilai jarak, gelung digunakan untuk membuat kelas padding dan margin di setiap sisi. Seperti yang akan kita lihat, ini berfungsi, tetapi akhirnya akan menghasilkan jumlah CSS yang saksama. Kami akan refactornya untuk menyesuaikan sifat menggunakan CSS dan menjadikan sistem lebih ringkas.

Inilah pelaksanaan SASS yang asal:

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

Kod ini berfungsi dengan baik dan mengeluarkan semua kelas utiliti yang diperlukan. Walau bagaimanapun, ia juga boleh menjadi kembung dengan cepat. Dalam kes saya, mereka adalah kira -kira 8.6kb apabila tidak dikompresi dan kurang daripada 1kb selepas mampatan. (Brotli adalah 542 bait, gzip adalah 925 bait.)

Oleh kerana mereka sangat berulang, mampatan berfungsi hebat, tetapi saya masih tidak dapat menyingkirkan perasaan bahawa semua kelas ini berlebihan. Juga, saya bahkan tidak membuat sebarang titik putus kecil/sederhana/besar yang agak tipikal untuk kelas penolong jenis ini.

Berikut adalah contoh buatan versi responsif selepas menambah kelas kecil/sederhana/besar. Kami akan menggunakan semula peta hentian ruang $ yang ditakrifkan sebelum ini dan memasukkan kod pendua ke dalam 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>

Ia adalah kira -kira 41.7kb apabila tidak dikompresi (Brotli adalah kira -kira 1kb dan Gzip adalah kira -kira 3kb). Ia masih memampatkan dengan baik, tetapi ia agak tidak masuk akal.

Saya tahu bahawa atribut data-* boleh dirujuk dari CSS menggunakan fungsi [attr() , jadi saya tertanya-tanya jika ia mungkin menggunakan data-m="1" calc() dan attr() margin: calc(attr(data-m) * 0.25rem) -sama, membuat penolong utiliti jarak yang dikira secara dinamik melalui atribut ( data-* dalam kenaikan data-m="1@md" ). Ini boleh menjadi sangat kuat.

Tetapi akhir cerita adalah: anda tidak boleh (pada masa ini) menggunakan attr() dengan sebarang atribut kecuali atribut content . Terlalu buruk. Tetapi semasa mencari maklumat attr() dan calc() , saya dapati komen menarik ini oleh Simon Rigét pada Stack Overflow, yang mencadangkan menetapkan pembolehubah CSS secara langsung dalam sifat gaya sebaris. Ahha!

Oleh itu, perkara berikut boleh dilakukan:<div style="--p: 4;"> , dan kemudian dalam 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">Salin selepas log masuk</div></div> <p> <code>padding: 1rem !important; style="--p: 4;"

... Sekarang anda mempunyai pembantu raksasa kelas utiliti jarak berskala.

Inilah yang kelihatan seperti dalam 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>

Ini sangat mirip dengan gelung sass pertama di atas, tetapi tidak ada 11 gelung - tetapi ia tidak terhingga. Ia kira -kira 1.4kb tidak dikompresi, Brotli adalah 226 bait dan gzip adalah 284 bait.

Sekiranya anda ingin memperluaskannya ke titik putus, mesej yang tidak disenangi adalah bahawa anda tidak boleh meletakkan watak "@" dalam nama pembolehubah CSS (walaupun peliknya dibenarkan menggunakan emojis dan lain-lain aksara UTF-8). Jadi, anda mungkin dapat menetapkan nama pembolehubah seperti P_SM atau SM_P. Anda perlu menambah beberapa pembolehubah CSS tambahan dan beberapa pertanyaan media untuk mengendalikan semua ini, tetapi ia tidak akan berkembang dengan pesat seperti nama kelas CSS tradisional yang dibuat menggunakan sass untuk gelung.

Berikut adalah versi responsif yang setara. Kami akan menggunakan Sass Mixin sekali lagi untuk mengurangkan pertindihan:

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

Kira -kira 6.1kb tidak dikompresi, Brotli adalah 428 bait dan gzip adalah 563 bait.

Saya rasa menulis seperti<div style="--px:2; --my:4;"> Adakah HTML ini menyenangkan mata, atau ergonomik pemaju yang baik ... tidak, tidak istimewa. Tetapi adakah pendekatan ini boleh dilaksanakan dalam beberapa kes, seperti jika anda (atas sebab tertentu) memerlukan CSS yang sangat sedikit, atau tidak memerlukan fail CSS luaran sama sekali? Ya, sudah tentu saya fikir ia boleh. Perlu diingatkan di sini bahawa pembolehubah CSS yang diberikan dalam gaya sebaris tidak bocor. Mereka hanya bertindak pada elemen semasa dan tidak mengubah nilai pembolehubah global. Terima kasih Tuhan! Satu perkara yang pelik yang saya dapati setakat ini ialah Devtools (sekurang -kurangnya dalam Chrome, Firefox, dan Safari) tidak akan melaporkan gaya menggunakan teknik ini dalam tab Gaya Pengiraan.<p> Ia juga patut disebutkan bahawa saya telah menggunakan padding tradisional dan sifat margin serta -top, -right, -bottom dan -left, tetapi anda boleh menggunakan sifat logik yang setara seperti padding -block dan padding -inline. Dengan selektif mencampurkan dan memadankan sifat logik dan tradisional, juga mungkin untuk mengurangkan beberapa bait. Dengan cara ini, saya berjaya memampatkan Brotli hingga 400 bait dan gzip ke 521 bait.</p> <h3> Kes penggunaan lain</h3> <p> Ini seolah -olah paling sesuai untuk perkara -perkara dengan perkadaran tambahan linear (itulah sebabnya padding dan margin nampaknya menjadi kes penggunaan yang baik), tetapi saya dapat melihat bahawa ini mungkin berfungsi untuk lebar dan ketinggian (bilangan lajur dan/atau lebar) dalam sistem grid. <strong>Mungkin</strong> ia berfungsi untuk tipografi (tetapi mungkin tidak).</p> <p> Saya sangat prihatin dengan saiz fail, tetapi mungkin terdapat beberapa kegunaan lain di sini yang saya tidak fikirkan. Mungkin <strong>anda</strong> tidak akan menulis kod anda dengan cara ini, tetapi alat CSS kritikal mungkin refactor kod untuk menggunakan kaedah ini.</p> <h3> Menggali lebih mendalam</h3> <p> Apabila saya menggali ke dalamnya, saya mendapati bahawa Ahmad Shadeed membincangkan <code>calc() dengan tugasan pembolehubah CSS dalam gaya inline, terutamanya untuk saiz avatar. Artikel Miriam Suzanne mengenai Smashing Magazine pada tahun 2019 tidak menggunakan calc() tetapi berkongsi beberapa ciri menakjubkan yang dapat dicapai menggunakan tugasan berubah -ubah dalam gaya inline.