teknik CSS yang diketahui

Hei!

Cuma saya ingin berkongsi teknik CSS saya. Saya menghadapi ramai rakan sekerja tidak mengetahuinya. Mungkin awak juga. Saya harap ia akan menarik untuk anda.

Cara menulis CSS bergantung pada bilangan anak

Penyelesaian pertama

.uia-control {
  display: inline-flex;
  gap: 1rem;
  /* remaining CSS */
}

Penyelesaian saya

.uia-control {
  display: inline-flex;
  /* remaining CSS */
}

.uia-control:has(> :nth-child(2)) {
  gap: 1rem;
}

Saya terpaksa mentakrifkan jurang sentiasa. Walaupun elemen itu hanya mempunyai satu elemen anak. Kita boleh mengelakkannya dengan :has()! Saya adakah gap digunakan jika uia-control mempunyai sekurang-kurangnya 2 anak ?

Buat perubahan di satu tempat dengan sifat tersuai

Penyelesaian pertama

.banner {
  height: 2rem;
  position: fixed;
}

.content {
  padding-top: 2rem;
}

Penyelesaian saya

:root {
  --page-banner-height: 2rem;
}

.banner {
  height: var(--page-banner-height);
  position: fixed;
}

.content {
  padding-top: var(--page-banner-height);
}

Adakah anda perlu membuat elemen dengan pergantungan pada CSS elemen lain? Anda harus menggunakan sifat tersuai! Ia menyelamatkan anda daripada carian yang tidak berkesudahan. Buat perubahan di satu tempat ?

CSS tanpa kebergantungan pesanan

Penyelesaian pertama

.heading_size-l {
  font-size: 2rem;
}

.heading {
  font-size: 1rem;
}

Penyelesaian saya

.heading_size-l {
  --heading-font-size: 2rem;
}

.heading {
  font-size: var(--heading-font-size, 1rem);
}

Masalah dengan susunan peraturan dengan kekhususan yang sama dapat dilihat apabila kita mempunyai satu komponen dengan beberapa pengubahsuaian. Orang ramai, ia boleh dielakkan. Sifat tersuai CSS akan membantu ?

Letakkan pertanyaan media pada diet

Penyelesaian pertama

.intro__heading {
  font-size: 2rem;
}

.intro__description {
  font-size: 1rem;
}

@media (width >= 641px) {
  .intro__heading {
    font-size: 3rem;
  }

  .intro__description {
    font-size: 2rem;
  }  
}

Penyelesaian saya

.intro__heading {
  font-size: var(--intro-heading-font-size, 2rem);
}

.intro__description {
  font-size: var(--intro-description-font-size, 1rem);
}

@media (width >= 641px) {
  .intro {
    --intro-heading-font-size: 3rem;
    --intro-description-font-size: 2rem;
  }  
}

Kita perlu menulis banyak peraturan dengan menggunakan pertanyaan media. Itulah sebabnya kod mengembang. Nah, sifat tersuai mengekalkan saiz kod ?

P.S. Jika anda suka, anda akan mendapat lebih banyak lagi dengan melanggan surat berita saya.

Atas ialah kandungan terperinci teknik CSS yang diketahui. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!