Nur untergeordnetes CSS statt bedingter Logik

In vielen Frontend-Frameworks, mit denen ich arbeite, gibt es Optionen für Ternäre oder If-Zweige, die in die HTML-Logik eingefügt werden. Das ist eine Logik, die ich oft verwende. Ein besonderer Fall ist die Anzeige, wenn keine Daten vorhanden sind.

Ich bin gerade auf ein CSS-Muster gestoßen, das mein Leben viel einfacher macht: die :only-child-Pseudoklasse.

Reagieren

In React würde ich „so etwas“ wie folgt machen ...

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

Eckig

In Angular würde ich „so etwas“ machen ...

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

Verwendung von CSS

Um es einfach auszudrücken: Ich habe zwei Fälle.

1. Es liegen keine Daten vor.
2. Es gibt Daten.

<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>

Verwendung einer einfachen CSS-Klasse .single ...

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

Dieses CSS könnte vereinfacht werden zu ...

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

Hier ist das Ergebnis des obigen Codes ...

Zusammenfassung

Wie Sie sehen, müsste ich die Handhabung der Daten auf die Tabellenebene verlagern, aber das CSS ist ziemlich einfach, um ein „Keine Daten“-Szenario zu handhaben.

Das ist aufregend!

Das obige ist der detaillierte Inhalt vonNur untergeordnetes CSS statt bedingter Logik. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!