Anak tunggal CSS dan bukannya Logik Bersyarat

Dalam kebanyakan rangka kerja bahagian hadapan yang saya gunakan, terdapat pilihan untuk ternaries atau if-cawangan yang disuntik ke dalam logik HTML. Ini logik yang saya banyak gunakan. Satu kes tertentu adalah untuk menunjukkan apabila tiada data.

Saya baru sahaja terjumpa corak CSS yang menjadikan hidup saya lebih mudah: kelas pseudo :anak tunggal.

Bertindak balas

Dalam React, saya akan melakukan "sesuatu" seperti ini ...

{
  data.length === 0
    ? <div>Nothing to show.</div>
    : <TableWithRecords />
}

bersudut

Dalam Angular, saya akan melakukan "sesuatu" seperti ini ...

@if (data.length === 0) {
   <div>Nothing to show.</div>
} @else {
   <TableWithRecords />
}

Menggunakan CSS

Ringkasnya, saya ada dua kes.

1. Tiada data.
2. Ada data.

<h2>No Data Showing</h2>
<ul>
  <li class="handle-no-data">Nothing to show.</li>
  <!-- <li>Data here</li> -->
</ul>

<h2>Data Showing</h2>
<ul>
  <li class="handle-no-data">Nothing to show.</li>
  <li>Data here</li>
</ul>

Menggunakan kelas CSS ringkas .single ...

.handle-no-data:not(:only-child) {
  display: none;
}
.handle-no-data:only-child {
  display: flex;
}

CSS ini boleh dipermudahkan kepada ...

.handle-no-data {
  &:not(:only-child) {
    display: none;
  }
  &:only-child {
    display: flex;
  }
}

Inilah hasil kod di atas ...

Ringkasan

Seperti yang anda lihat, saya perlu mengalihkan pengendalian data ke tahap jadual, tetapi CSS agak lurus ke hadapan untuk mengendalikan senario "tiada data".

Ini menarik!

Atas ialah kandungan terperinci Anak tunggal CSS dan bukannya Logik Bersyarat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!