Cara menggunakan css line-height unit

Menggunakan unit Pixel (px) maupun persentase (%) adalah hal yang biasa dalam beberapa kasus, yang jadi masalah adalah ketika menggunakan unit yang absolut bukan relatif.

Contoh Buruk

p {
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 8px;
}

Masalah dan solusinya

• Menggunakan unit relatif memastikan bahwa situs web menskalakan secara proporsional sesuai dengan pilihan font Anda, dan sesuai dengan pilihan ukuran layar dan tingkat zoom pengguna.
• Rumus untuk menghitung nilai rem adalah size / base-font-size (dalam kasus ini adalah 16), singkatnya 8/16 = 0,5. Jika Anda tidak ingin menggunakan kalkulator setiap kali membutuhkan unit baru, gunakan Sass dan buat mixin. Lihat disini caranya.

Contoh Baik

body {
  font-size: 16px;
  /* lebih baik biarkan browsers menentukan base font size, biasanya 16px */
}

p {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 0.5em;
}

Sumber

• CSS Units: Which Ones To Use And Avoid
• CSS values and units
• Building Resizeable Components with Relative CSS Units

2.Variasi Font

Variabel Font mungkin bs sangat berguna, tapi menggunakan font-variation-settings yang tidak perlu dapat merusak tampilan.

Contoh Buruk

CSS:

.bold {
  font-variation-settings: 'wght'700;
}

.italic {
  font-variation-settings: 'ital'1;
}

HTML:

<span class="italic bold">italic bold?</span>

Anda pasti berfikir teks tersebut akan menjadi tebal dan miring, faktanya hal tersebut tidak akan terjadi

Masalah dan solusinya

• font-variation-settings tidak akan menambahkan, jadi ketika beberapa aturan tumpang tindih, aturan tersebut akan saling menggantikan.
• Solusi umum untuk itu adalah menggunakan variabel CSS, tetapi Anda pasti tidak ingin repot-repot hanya untuk mendefinisikan font-weight dengan cara yang berlebihan.
• Mendefinisikan ulang font-weight, font-stretch atau font-style dengan cara ini tidak menghasilkan apapun, font variabel dapat menangani properti ini.

Seperti yang saya kutip

Jika memungkinkan, penulis biasanya harus menggunakan […] properti ini untuk kasus khusus di mana penggunaannya adalah satu-satunya cara untuk mengakses variasi font tertentu yang jarang digunakan. Misalnya, lebih disarankan gunakan font-weight: 700 ketimbang font-variation-settings: ‘wght’ 700

Contoh Baik

Hanya gunakan font properties

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

Sumber

• Variable fonts guide

3.Spesifikasi

Terlalu berlebihan menentukan aturan CSS mana yang diterapkan oleh browser. Pengembang sering kali menulis selector yang terlalu spesifik hanya agar 10.000% yakin aturan mereka akan berlaku.

Contoh Buruk

div#my-popup div span.my-radiocheckbox-label-text {
  color: #666;
}

#some-id .label {
  color: #111 !important;
}

Masalah dan solusi

• Aturan yang terlalu ditentukan akan mengarah pada pengelolaan yang sulit dan keterbacaan kode, sementara tidak ada manfaat nyata.
• Jika ingin menggunakan kembali kode yang ada, hindari menggunakan ID untuk styling : seperti yang ditunjukkan oleh namanya, ini adalah pengenal unik, tidak dapat diulang dalam halaman. Jika Anda memerlukan bantuan dengan penamaan selector dan menghindari konflik style, coba gunakan BEM atau metodologi penamaan serupa lainnya.

CSS adalah singkatan dari Cascading Style Sheets, yang berarti, jika Anda menerapkan warna yang berbeda untuk teks beberapa kali di CSS Anda dengan kekhususan yang sama, selector yang berada di bagian bawah sumber yang akan diterapkan. Misalnya, pada kode di bawah ini, warna font akan menjadi hitam:

.label-color {
  color: red;
}

.label-color {
  color: black;
}

Sumber

• Specificity on MDN
• Specifics on CSS Specificity
• CSS Specificity: Things You Should Know
• Specificity Calculator

4.font-family

Menentukan font utama untuk hampir setiap selector bukanlah cara yang baik, namun masih banyak mengalami masalah ini.

Contoh Buruk

.my-class-1 {
  font-family: Roboto;
}

.my-class-2 {
  font-family: Roboto;
}

p {
  font-family: Roboto;
}

.my-class-3 {
  font-family: Roboto;
}

footer {
  font-family: Roboto;
}

Masalah dan solusi

• Menduplikasi impor font-family hanya menyebabkan sulitnya perawatan. Jika karena alasan tertentu Anda ingin mengubah font situs web Anda, lakukanlah di setiap baris, atau di seluruh file.
• Jika Anda menambahkan nama font secara manual, ada kemungkinan besar Anda salah ketik dan browser akan memuat font yang berbeda (misalnya Ariel, bukan Arial …).
• Kutipan tidak diperlukan, tetapi ini merupakan cara yang baik untuk digunakan, terutama jika nama font mengandung spasi.
• Selalu tambahkan opsi fallback. Jika Roboto tidak tersedia, font sans serif yang ditentukan oleh user agent akan digunakan. Perhatikan, Roboto bukan nama font, jadi jangan gunakan tanda kutip!
• Jika Anda ingin menggunakan jenis font yang berbeda untuk tajuk Anda, tautan, apa pun, cara terbaik untuk menyimpan namanya sebagai variabel CSS.

Contoh Baik

body {
  font-family: "Roboto", sans-serif;
}

Contoh Baik Lainnya

:root {
  --heading-font-family: "Georgia", "Times New Roman", "Times", serif;
}

.title {
  font-family: var(--heading-font-family);
}

Sumber

• font-family on MDN

5.Prefix

Vendor browser terkadang menambahkan prefiks (awalan) ke properti CSS dan JavaScript API eksperimental atau nonstandar, sehingga pengembang dapat bereksperimen dengan ide-ide baru sementara – secara teori – mencegah eksperimen mereka diutamakan dan kemudian merusak kode pengembang selama proses standarisasi.

Contoh Buruk

body {
  font-size: 16px;
  /* lebih baik biarkan browsers menentukan base font size, biasanya 16px */
}

p {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 0.5em;
}

Masalah dan solusi

• Menambahkan awalan yang tidak perlu membuat kode Anda lebih sulit untuk dibaca dan dikelola. Ukuran file juga bisa bertambah tanpa alasan.
• Jika tidak yakin properti mana yang memerlukan awalan, dan mana yang tidak, gunakan caniuse.com. Dengan alat ini Anda dapat memeriksa dukungan keseluruhan untuk setiap properti.
• Jika tidak ingin mengotak-atik prefiks, Anda dapat menggunakan Autoprefixer dalam proses build.
• Vendor browser sedang bekerja untuk berhenti menggunakan prefiks vendor untuk fitur eksperimental. Pengembang web telah menggunakannya di situs Web produksi, meskipun sifatnya eksperimental. Hal ini mempersulit vendor browser untuk memastikan kompatibilitas dan bekerja pada fitur-fitur baru; itu juga berbahaya bagi browser kecil yang akhirnya terpaksa menambahkan awalan dari browser lain untuk memuat situs web populer (Sumber: MDN).

Contoh Baik

body {
  font-size: 16px;
  /* lebih baik biarkan browsers menentukan base font size, biasanya 16px */
}

p {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 0.5em;
}

Sumber

• Vendor prefix

6.Link

Salah satu kesalahan paling umum: menyetel warna untuk tautan, tetapi tidak menambahkan status :hover, :focus dan :active.

Contoh Buruk

body {
  font-size: 16px;
  /* lebih baik biarkan browsers menentukan base font size, biasanya 16px */
}

p {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 0.5em;
}

Masalah dan solusi

• Tanpa status yang hilang tersebut, tautan kita tidak akan dapat diakses, pengguna mungkin bingung saat menavigasi situs web kita dengan mouse atau keyboard, karena mereka tidak akan dapat mengidentifikasi apa yang dapat diklik dan apa yang tidak.
• Secara default, browser menyetel text-decoration: underline; ke tautan, tetapi menghapus properti ini juga dapat menyebabkan kebingungan
• Coba gunakan warna yang sesuai dengan desain Anda tetapi tetap memperjelas apakah teks dapat diklik. Di blog ini, warna biru muda konsisten untuk item yang dapat diklik.

Contoh Baik

body {
  font-size: 16px;
  /* lebih baik biarkan browsers menentukan base font size, biasanya 16px */
}

p {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 0.5em;
}

Sumber

• Styling links
• CSS and JavaScript accessibility best practices

7.z-index

z-index adalah sesuatu yang dapat membuat kita frustasi. Jumlah digit adalah cara pengembang mencoba memposisikan div di atas konten, tetapi kadang gagal total.

Line height CSS untuk apa?

Apa itu Line height HTML?