Helah CSS odern yang perlu anda ketahui

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 kami mempunyai satu komponen dengan beberapa pengubahsuaian. Orang ramai, ia boleh dielakkan. Ciri 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 ?

Kotak pilihan tersuai adalah pada steroid dengan :has()

Penyelesaian pertama

.cb__input:checked + .cb__label::before {
  /* CSS of the custom checkbox is here */
}

Penyelesaian saya

.cb:has(:checked) .cb__label::before {
  /* CSS of the custom checkbox is here */
}

Penggabung saudara seterusnya mempunyai satu kelemahan. Ia rosak jika susunan unsur diubah. :telah memecahkan isu ini ?

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

Atas ialah kandungan terperinci Helah CSS odern yang perlu anda ketahui. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!