Kita mungkin membutuhkan sesuatu antara akar “elemen dasar” dan unit CSS relatif – Beragampengetahuan

CSS memberi kita nilai root dan relatif.

• Nilai root seperti rem Dan rlh – Mereka ditulis :root Pemilih (paling umum html elemen).
• Nilai relatifnya seperti em,,,,, lh,,,,, ch Ada berbagai yang lain – mereka bersama font-size Dalam elemen tertentu.

Saya telah menyadari bahwa mungkin kita perlu memiliki unit antara root dan nilai relatif. Memiliki unit seperti itu memungkinkan kita untuk ukuran tanpa kompleksitas em atau lh menghitung.

Izinkan saya memberi Anda contoh: prosa

Awal tahun ini, Jen Simmons menulis tentang penggunaannya lh Pemodelan Peralatan margin Dan padding Untuk lebih baik mencetak ritme vertikal.

p { margin-block: 1lh; } 

Kita dapat memperluas konsep lebih lanjut untuk memasukkan semua ruang lain di sekitar teks. Salah satu cara untuk melakukan ini adalah teknologi “lobotomisasi burung hantu” yang dipopulerkan oleh Heydon Pickering belum lama ini.

* + * {
  margin-top: 1lh;
}

Hari ini, kita juga bisa menggunakannya :not(:first-child) Untuk mencapai efek yang sama – ini mungkin lebih mudah dibaca.

*:not(:first-child) {
  margin-top: 1lh;
}

Seringkali, kita perlu membatasi pemilih ini sehingga tidak meluap di mana -mana dan memecahkan sisa halaman. Kelas yang hebat adalah .prose.

.prose {
  *:not(:first-child) {
    margin-top: 1lh;
  }
}

Ini sederhana dan bagus – tetapi apa yang terjadi jika Anda memasukkan ukuran tata letak lainnya? Anda akan segera melihat dekomposisi ini (karena 1lh satu <h2> Elemen bisa sangat besar).

Salah satu cara di sekitar masalah ini adalah dengan menggunakan Flexbox pada elemen induk. Dengan melakukan ini kita bisa mengatur gap tiba 1lh Dan kita tidak harus menghadapinya 1lh Mengubah h2 elemen. (Bonus, kita tidak harus berurusan dengan margin crash.)

.prose {
  display: flex; 
  flex-direction: column;
  gap: 1lh;
}

Tapi kami memperkenalkan pertanyaan baru di sini: Dekat kekacauan.

Konten berikut <h2> milik <h2>. Tapi konten di atas <h2> Itu milik judul bagian sebelumnya. Idealnya, kita harus membuat jarak yang unik untuk mengklarifikasi hubungan mereka.

Cara termudah adalah dengan menambahkan sedikit margin di atas <h2>.

Tapi kami tidak bisa menambahkan margin di atasnya <h2> Dan lh sejak lh Nilai terbuka <h2> Akan berbeda dari elemen di sekitarnya.

Kami harus menggunakan beberapa penipuan CSS dan margin-bottom (atau setara logis) elemen di atas <h2>. Di sini kami baru saja mengatur margin-bottom tiba 1lh Karena kami menggunakan Flexbox, kami tidak harus berurusan dengan margin crash. (Jika Anda harus berurusan dengan margin crash, Anda harus mengaturnya margin-bottom tiba 2lh)

Apakah ada cara yang lebih baik? Oke, itulah tujuan artikel ini!

Namun, sebelum kita pergi ke sana, mari kita pertimbangkan UI dengan masalah yang sama, sehingga Anda dapat mulai melihat konsekuensi yang lebih besar dari masalah ini (dan pentingnya solusinya).

Berikut adalah contoh kedua: komponen kartu

Sekarang, misalkan kita memiliki komponen kartu yang dibagi menjadi dua bagian, judul dan konten.

Dalam komponen -komponen ini, judulnya biasanya memiliki gaya yang berbeda font-size Bandingkan konten.

Untuk membuat kartu seperti ini, penanda termudah mungkin:

<div class="card">
  <h2 class="title">Card Title</h2>
  <div class="content">Card Content</div>
</div>

Sayangnya, kami tidak dapat menggunakannya lh Buat unit pengisian dalam kartu – hal itu akan menghasilkan margin <h2> Elemen (luar biasa) tidak proporsional!

Tentu saja, ada banyak cara untuk menangani situasi ini.

Salah satu cara yang mungkin adalah mengubah markup sehingga <h2> Tinggal di <header> elemen. Saat kami melakukan ini, kami bisa <header>memotong ekspansi 1lh pertanyaan.

<div class="card">
  <header class="title">
    <h2>Card Title</h2>
  </header>
  <div class="content">Card Content</div>
</div>

Memecahkan masalah saat mengubah tag, yang tidak ideal – karena kami mungkin tidak ingin membuat tambahan header Elemen kecuali perlu…

Oke, cara lain yang mungkin adalah menggunakan nilai root yang serupa rlh. Ini memungkinkan <h2> Dan content Untuk menggunakan unit dasar yang sama, Anda dapat membuat pengisi yang sama.

Tetapi jika .card Perlu diperluas ke berbeda font-size nilai. Bayangkan Anda ingin membuat kartu yang lebih kecil – sekarang 1rlh Karena nilai pengisian terlalu proporsional dengan konten, itu tidak terlihat benar.

Apa yang bisa kita lakukan?

Solusi yang mudah adalah berubah padding Tergantung pada nilai varian pendukung komponen – tetapi ini sedikit hardcoded dan tidak terlalu ramah …

.card-sm { --padding: 0.75rlh; }
.card-md { --padding: 1rlh; }
.card-lg { --padding: 1.25rlh; }

Pilihan lain apa?

Di sinilah perantara antara root dan unit relatif mungkin berguna.

Unit internal yang nyaman

Bagian ini murni CSS spekulatif untuk menggambarkan suatu titik. Kami akan mengambil cara mudah untuk benar -benar berlatih di bagian akhir hari ini, jadi tunggu dan ikuti secara konseptual untuk saat ini.

Misalkan kita memiliki sel untuk mendapatkan nilai referensi dari elemen yang ditentukan. Kami menyebutnya base Unit, karena kurangnya nama yang lebih baik.

• Jadi, 1 base Sel ukuran font mungkin 1bem.
• dan 1 base Unit tinggi garis mungkin 1blh.

Sangat mudah saat ini.

Bayangkan kita dapat menggunakan unit dasar ini untuk membentuk kartu. Maka kita bisa menggunakan 1blh Mengukur pengisi, yang lainnya akan berukuran tepat:

.card {
  > * { padding: 1blh; }  
}

.card-sm { font-size: 0.8em; }
.card-md { font-size: 1em; }
.card-lg { font-size: 1.2em; }

bersorak?

Ikat ini .prose Misalnya, ada kemungkinan bahwa ia dapat menyelesaikan kekacauan kedekatan dengan baik tanpa mengompleksikan pemilih kami:

.prose {
  h2:not(:first-child) {
    margin-top: 2blh;
  }
}

Bagaimana ini bisa bekerja?

Untuk membuat fitur ini mudah ditambahkan ke CSS modern, saya dapat memikirkan dua cara yang mungkin:

1. Pasang ke kueri kontainer.
2. Mendefinisikan sintaksis mirip dengan penentuan posisi jangkar.

Metode kueri kontainer

Kami sudah memiliki sesuatu yang serupa cqw Dan cqh Menunjukkan lebar kontainer dan nilai tinggi kontainer. Katakanlah kita bisa memilikinya cqem (Kueri kontainer em) unit atau cqlh (Container Query-Line-Height).

Metode ini memiliki kelemahan.

Pertama, wadah perlu didefinisikan dalam elemen induk. Ini membutuhkan lebih banyak markup dan membuat kode agak kompleks dan tidak intuitif. Kode berikut mungkin merupakan implementasi yang mungkin:

<div class="container">
  <div class="card">
    <h2 class="title">Card Title</h2>
    <div class="content">Card Content</div>
  </div>
</div>

.container {
  container-type: inline-size; 
}

.card {
  > * { padding: 1cqbl; }
}

Menangani wadah bersarang tidak menjadi masalah, karena kita selalu dapat mengaturnya container-name Kami ingin mewarisi. Namun, jika kami ingin menggunakan referensi kontainer yang berbeda, tabrakan dapat terjadi cqbl Dan cqw.

Membayangkan:

<!-- We might want to inherit the cqem or cqbl from here -->
<div class="container-base">

  <!-- But we might need cqw or cqh from here -->
  <div class="two-column-grid"> 
    <div class="card">...</div>
    <div class="card">...</div>
  </div>

</div>

Agak dibatasi oleh tabrakan kontainer.

Sintaks penentuan posisi jangkar

Dalam hal ini, pertama -tama kami memutuskan dasar untuk mewarisi. Kita bisa menyebutnya base-anchoratau semacamnya.

Di sini kita dapat mengatur nama jangkar dasar secara eksplisit, dan bahkan menyimpannya sebagai none Jika kami tidak ingin menamainya. Elemen yang tersisa di dalam kemudian dapat diwarisi dari nilai dasar ini segera:

.card {
  base-anchor: --card; /* or perhaps none */
  > * { padding: 1blh; }
}

Jika kita perlu merujuk jangkar ini dari komponen yang sama sekali tidak terkait, kita dapat memanfaatkan nama jangkar, lakukan saja ini:

.far-away-comp {
  base-name: --card; 
  /* Then use blh from here */
}

Jangkar ganda

Salah satu aspek menarik yang dapat saya pikirkan adalah case penggunaan ganda anchor potensial base Komponen dapat mewarisi mereka font-size atau nilai dari basis lain atau elemen induknya.

Fleksibilitas ini memungkinkan kami untuk membuat perubahan komponen berdasarkan ukuran font tanpa mengandalkan kompleksitas em menghitung.

Berikut adalah contoh dari apa yang saya bicarakan:

.prose {
  base-anchor: --prose;
  font-size: 1em;
  line-height: 1.5;
}

/* Inherits font-size from .prose */
/* This is automatic if base-name is not provided */
.card {
  base-anchor: none;
  base-name: --prose;

  /* In this case, 1blh could be 1.5em */
  > * { padding: 1blh; }
}

/* After inheriting the font size, since we have a base-anchor in the card, we adjust the font-size value accordingly, so: 
  - 1bem would mean 0.8em further in the card
  - 1blh could then mean 0.8 * 1.5em = 1.2em 
*/
.card.card-sm {
  font-size: 0.8em;
}

Menawan, kan? Ini membawa kemungkinan baru saat membuat komponen yang dapat digunakan kembali.

Berlatihlah hari ini

Izinkan saya menyebutkan kata pengantar bagian ini untuk fakta -fakta berikut bem Dan blh Itu tidak ada hari ini. Jadi setiap implementasi yang dapat saya pikirkan hanyalah ukuran menginap yang tidak sempurna.

Hari ini, kami yakin kami bisa menggunakannya em Unit untuk tujuan ini – Tapi ini membutuhkan lebih banyak perhitungan karena em Ini adalah kerabat, bukan unit dasar.

Langkah pertama adalah mengkonfirmasi base Elemen – dan base Ukuran font – kita bisa mengaturnya base-size milik:

.card { 
  --base-size: 1em; 
  font-size: var(--base-size);
}

.card-sm { 
  --base-size: 0.8em; 
}

Lalu kita bisa mensimulasikan bem (menurut em) Unit diharapkan dengan mengalokasikan font-size Dan base-size:

.card {
  h2 {
    --font-size: 2em;
    font-size: calc(var(--font-size) / var(--base-size));  
  }
}

Sayangnya, kode di atas tidak dapat digunakan karena kami tidak dapat menjalankannya calc() Membagi nilai unit. Oleh karena itu, yang terbaik yang bisa kita lakukan --base-size.

Saat kita melakukan ini, kita perlu mengeksekusi yang lain calc() Buat aktual pada elemen dasar font-size milik:

.card { 
  --base-size: 1; 
  font-size: calc(var(--base-size) * 1em);
}

Lalu kami menjalankan hal yang sama calc() ada <h2> Buat ukuran fontnya:

.card {
  h2 {
    --font-size: 2;
    font-size: calc(var(--font-size) / var(--base-size) * 1em);  
  }
}

Semuanya mulai menjadi sedikit “ugh”.

Tidak ada yang menginginkan semua kode boilerplate ini. Oleh karena itu, yang terbaik adalah mengabstraksi dengan mixin atau bahkan fitur. Jika Anda menggunakan Sass, Anda mungkin membayangkan sesuatu seperti ini:

@mixin base-anchor() {
  font-size: calc(var(--base-size) * 1em);
}

Jika Anda menggunakan tailwinds, mungkin Anda dapat membayangkan bahwa utilitas Tailwinds dapat melakukan hal yang sama. Bagaimanapun, utilitas tailwind dapat dilihat sebagai campuran hibrida yang nyaman.

@utility base-anchor {
  font-size: calc(var(--base-size) * 1em);
}

Kami kemudian dapat menerapkan utilitas ini ke elemen dasar. Kode terlihat agak bersih:

.card {
  @apply base-anchor; 
  --base-size: 1; 
}

.card-sm { --base-size: 0.8; }

untuk <h2>kami dapat membuat utilitas lain untuk melakukan perhitungan bagi kami. Sepertinya ini:

@utility text-relative {
  font-size: calc(var(--text-size) / var(--base-size) * 1em);
}

Kemudian kita dapat menggunakan utilitas seperti ini:

.card .title {
  @apply text-relative;
  --text-size: 2; 
}

Sekarang, Hitung padding Kartu kartu .title Elemen, kita perlu membalikkan font-size mendapatkan base-size nilai. Yang terbaik adalah melakukannya dengan fitur CSS, yang tidak didukung secara luas hari ini, tetapi semoga segera!

@function --bem(--multiplier) {
  result: calc(var(--text-size / var(--base-size) * 1em * --multiplier));
}

Maka kita bisa menggunakan --bem Hitung isi pada judul kartu:

.card .title {
  /* ... */
  padding-block: --bem(0.5);
  padding-inline: --bem(1);
}

Kami sebutkan di atas lh Nilai dapat digunakan untuk margin dan bantalan, karena mempertahankan ritme vertikal. Jadi, mengapa tidak membuatnya --blh Apakah fungsinya sama?

Dalam hal ini kita bisa menambahkan --leading Fungsinya bisa dari:

@function --blh(--multiplier, --lh-multiplier) {
  result: calc(
    var(
      --text-size / var(--base-size) * 1em * --multiplier *
        var(--lh-multiplier, var(--leading))
    )
  );
}

Maka kita bisa menggunakan --blh Seperti ini:

.card .title {
  /* ... */
  padding-block: --blh(0.5);
  padding-inline: --blh(1);
}

Dalam semangat hari ini

Kami tidak dapat menggunakannya --bem Dan --blh Dalam produksi, semua browser belum tersedia karena fitur CSS belum tersedia. Dengan semangat produksi bem Bekerja Sekarangkami dapat membuat utilitas untuk menghitung --base-font-size Dari --font-size.

Perhatikan bahwa variabel baru ini disebut --base-font-sizeTIDAK --base-sizesejak --base-size Digunakan. (Kami tidak dapat mengganti variabel CSS.)

/* I multiplied the value by 1em here to make it easy for you to use the value */
@utility base-font-size {
  --base-font-size: calc(var(--base-size) / var(--font-size) * 1em);
}

Kami juga dapat membuat utilitas yang disebut base-line-height Dapatkan nilai line-height. Saat kita melakukan ini, jika kita juga lulus --leading Berubah:

@utility base-line-height {
  --base-leading: calc(var(--base-font-size)* var(--leading));
}

Maka kita bisa menggunakan calc ada --base-leading Untuk mendapatkan nilai yang kami inginkan:

.card .title {
  @apply text-relative;
  @apply base-font-size;
  @apply base-line-height;
  --font-size: 2; 
  padding-inline: var(--base-line-height);
  padding-block: calc(var(--base-line-height) * 0.5);
}

Satukan semua ini

Pertama, mari kita ringkas utilitas dan fungsi yang diperlukan ke dalam implementasi saat ini:

/* The necessary utilities */
@utility base-anchor {
  font-size: calc(var(--base-size) * 1em);
}

@utility text-relative {
  font-size: calc(var(--font-size) / var(--base-size) * 1em);
}

/* To use this today */
@utility base-font-size {
  --base-font-size: calc(var(--base-size) / var(--font-size) * 1em);
}

@utility base-line-height {
  --base-line-height: calc(var(--base-font-size)* var(--leading));
}

/* Easier usage when CSS Functions become available */
@function --bem(--multiplier) {
  result: calc(var(--font-size / var(--base-size) * 1em * --multiplier));
}

@function --blh(--multiplier, --lh-multiplier) {
  result: calc(
    var(
      --font-size / var(--base-size) * 1em * --multiplier *
        var(--lh-multiplier, var(--leading))
    )
  );
}

Sekarang .card Kode untuk mengimplementasikan fungsionalitas tailwind yang sedang kita bicarakan. Anda dapat melihatnya di tempat kerja di sini.

/* What we can actually use today */
.card {
  @apply base-anchor;
  --base-size: 1;
  --leading: 1.5;
  
  > * { padding: 1lh; }

  .title {
    @apply text-relative;
    @apply base-font-size;
    @apply base-line-height;
    --font-size: 2; 
    padding-inline: var(--base-line-height);
    padding-block: calc(var(--base-line-height) * 0.5);
  }
}

.card-sm {
  --base-size: 0.8;
  .title {
    --font-size: 1.2;
  }
}

/* What we can use when CSS Functions are available */
.card {
  @apply base-anchor;
  --base-size: 1;
  
  > * { padding: calc(--blh(1)); }

  .title {
    @apply text-relative;
    --text-size: 2; 
    padding-block: calc(--blh(0.5));
  }
}

Itu masih belum sebagus bem Dan blh Versi yang saya tunjukkan di atas, tetapi setidaknya, kami menerapkan beberapa jenis fungsi, bukan? Dan itu terlihat cukup bagus!

Gunakan dengan lab yang brilian hari ini

Gaya luar biasa – cabang labz indah yang menangani desain dan gaya – berisi kode yang dapat Anda gunakan hari ini.

Kami juga termasuk --bem Dan --blh Versi, jika Anda ingin bermain dengan mereka juga.

Untuk menggunakan gaya yang sangat baik, unduh perpustakaan dan impor base-font-size Dokumen, lakukan pekerjaan di atas yang baru saja Anda lihat!

npm i @splendidlabz/styles

@import '@splendidlabz/styles/typography/base-font-size.css'

Itu saja!

Sekarang, jika Anda tertarik pada semua alat yang saya masak untuk membuat pengembangan web lebih mudah, Anda dapat menikmati diskon burung awal untuk paket Pro Splendid hari ini-semua pembaca-trik CSS tersedia!

(Saya mungkin menambahkan opsi seumur hidup ke paket gaya karena berkembang sepenuhnya. Tapi itu bisa sekitar satu tahun atau lebih.)

Oke, cukup promosi. Ayo kembali ke sini.

Bagaimana pendapat Anda tentang unit ini antara root dan nilai relatif?

Saya ragu untuk menyebutnya “dasar” em Karena “dasar” dapat berarti banyak hal. Tapi itu juga kedengarannya benar.

• Melakukan bem Dan blh Apakah masuk akal bagi Anda?
• Apakah Anda pikir saya pikir aspek desain ini terlalu banyak?
• Mungkin Anda memiliki nama yang lebih baik?

Saya ingin mendengar dari Anda, jadi jangan ragu untuk membagikan pemikiran Anda di bawah ini!