CSS 的 only-child 替代条件逻辑

在我使用的许多前端框架中，都有将三元组或 if 分支注入 HTML 逻辑的选项。这是我经常使用的逻辑。一种特殊情况是显示没有数据的情况。

我刚刚偶然发现了一个可以让我的生活变得更轻松的 CSS 模式：:only-child伪类。

反应

在 React 中，我会做这样的“事情”...

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

角度

在 Angular 中，我会做这样的“事情”......

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

使用 CSS

简单来说，我有两个案例。

1. 没有数据。
2. 有数据。

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

使用简单的 CSS 类.single...

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

此 CSS 可以简化为...

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

这是上面代码的结果...

概括

正如您所看到的，我必须将数据的处理移至表格级别，但 CSS 非常简单，可以处理“无数据”的情况。