0

私は、Angular Material が使用するレイアウト システムについて考えてきました。ここでは、(ディレクティブを使用して) レイアウトを作成する単純な属性を適用します。

<div layout="row">
    <div flex>One</div>
    <div flex>Two</div>
    <div flex>Three</div>
</div>

クリーンであるだけでなく、一連のクラスを適用するだけの Bootstrap の方法と比較して、これはマークアップで行っていることの意味論的な記述であると彼らは主張しています。

<div class="row">
    <div class="col-xs-4">One</div>
    <div class="col-xs-4">Two</div>
    <div class="col-xs-4">Three</div>
</div>

はい、フレックスボックスとフロートベースのグリッドが同じではないことは知っています。ここでのポイントは、クラスベースではなく属性ベースのレイアウトを作成し、クラス内のスタイリング宣言をそのアイテムの特定のスタイル専用にすることです。「Bootstrap はセマンティックの反対です」という議論を何千回も聞いてきましたが、これは非セマンティックではなく実装の容易さを提供することを目的としていると思います。

この概念を利用すると、理論的には CSS で非常によく似たことができます。

<div data-row>
    <div data-col-xs="4">One</div>
    <div data-col-xs="4">Two</div>
    <div data-col-xs="4">Three</div>
</div>

またはdata-flex、あなたのボートが浮かぶものなら何でもできます。ポイントは、これらの属性が有効な HTML であり、IE7+ で動作し、スタイルにのみ関連するマークアップでスタイルを作成するというテーマにも従っていることです。ここでの欠点は、クラスよりも遅い属性セレクターを使用することです (わずかですが、それでも)。

私の質問:

  • これは実際、よりセマンティックなレイアウト方法ですか?
  • セマンティックであることは、CSS パフォーマンスの (小さいながらも) コストに見合うだけの価値がありますか?

これは意見を掘り下げている可能性があることは承知していますが、これが特定のもの（Angular Material、さらにはWebコンポーネントなど）の方向性であることを考えると、これは有効なプラクティスの質問でもあると思います. そうではなく、別の StackExchange サイトに属すべきだと思われる場合は、お知らせください。喜んで移動させていただきます。

4

0 に答える 0