CSS&# 条件付きロジックの代わりに子のみを使用

私が扱っているフロントエンド フレームワークの多くには、HTML ロジックに挿入される 3 項または if 分岐のオプションがあります。これは私がよく使うロジックです。特別なケースの 1 つは、データがない場合に表示することです。

私は、自分の作業をずっと楽にしてくれる 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の使用

簡単に言うと、2 つのケースがあります。

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 は「データなし」シナリオを非常に簡単に処理できます。

これはエキサイティングです!

以上がCSS&# 条件付きロジックの代わりに子のみを使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。