Tailwind vs Semantic CSS: A Deep Dive into Website Design
タイトル：Tailwind vs Semantic CSS：ウェブサイトデザインの深層ダイブ
タグ：Tailwind, Semantic CSS, デザイン, パフォーマンス, フロントエンド
最近、Hacker Newsで話題となっている記事があります。それは、TailwindとSemantic CSSの2つのウェブサイトデザインを比較したものです。この記事では、その内容を要約し、私自身の印象を含めた興味深いブログ投稿を作成します。
この研究では、商用のTailwind “spotlight” テンプレートと、同じデザインを持つSemantic CSSとNueサーバーコンポーネントで作成されたサイトを比較しています。私たちは、ウェブサイトの内部構造とそれぞれの構築方法について詳しく見ていきます。
結果として、Semantic CSSのバージョンは8倍小さく、レンダリングが高速で、変更や拡張が容易です。
主な違いは、Tailwindが「ユーティリティ」クラス名を使用し、Nueがセマンティックなクラス名を使用していることです。つまり、Nueはnav、button、.galleryなどの要素に意味を与え、外部のスタイルシートでそれらをスタイリングします。一方、Tailwindはマークアップ上で要素を直接インラインでスタイリングします。
HTMLのマークアップの最初の要素に進むことで、HTMLのマークアップの違いを簡単に確認できます。
Semantic CSSのバージョンは、.navなどの高レベルのセマンティックなコンポーネントを利用しているため、外部のCSSがbody > headerなどのCSSセレクタで要素を対象にできます。一方、Tailwindはユーティリティファーストのアプローチのため、CSSセレクタのパワーが不足しており、Tailwind固有のクラス構文を使用して要素を包み込み、要素を埋める必要があります。
フロントページの完全なHTMLソースコードは次のとおりです。
タイトルはSemantic CSSのバージョンは8Kであり、Tailwindは75Kの非圧縮HTMLであることを示しています。つまり、同じデザインをレンダリングするために、TailwindとNext.jsはSemantic CSSのバージョンに比べて9倍ものHTMLが必要です。
TailwindのText to HTML Ratioはわずか2.3％であり、「非常に低い」とSiteGuruによって評価されます。一方、Semantic CSSのRatioは20.3％であり、「良い」と評価されます。
次に、CSSコーディングの違いについて調べてみましょう。
青色はSemantic CSS、灰色はユーティリティクラス、黒枠は主要なCSS（ページのレンダリングを高速化します）を示しています。
いくつかのキーポイント：
Tailwind CSSは7倍大きいです：33K vs 4.6K。全体的に、Tailwindを使用してページをレンダリングするためには、Semantic CSSに比べて8倍ものHTML/CSSコードが必要です（108K vs 12.6K）。最も驚くべきことは、TailwindがSemanticアプローチ自体よりも多くのグローバル/セマンティックCSSを使用していることです。
セマンティックCSSのほとんどは他のページでも再利用できるものであり、CSSの一部はフロントページに特化しています。すでに基盤ができているため、新しいページを作成するのは簡単です。
「Spotlight」は、ベースデザインを拡張したテーマです。新しいテーマ（Spotlightテーマなど）を作成するために使用できる、非常にミニマリスティックなベースバージョンのウェブサイトもあります。
テーマや「スキン」は、セマンティックCSSの強力なコンセプトです。別のCSSと交換するか、ベースバージョンを上書きすることで、デザインを変更することができます。TailwindではCSSのデザインはマークアップに結びついているため、デザインを変更する場合はマークアップを編集し、以前の作業を上書きする必要があります。
ページのレンダリング速度を測定する2つの指標は、最初のコンテンツの表示（FCP）と最大コンテンツの表示（LCP）です。セマンティックバージョンは、両方の指標ともモバイルとPCの両方で高速です。
セマンティックバージョンが速い理由は2つあります：
最初のリクエストで最初のビューポートのすべてのアセットを取得するために、主要なCSSがHTMLページにインラインで埋め込まれています。これは、認識されるページの読み込み体験のための最も重要なパフォーマンス最適化です。
最初のリクエストは14K未満であり、最初のTCPパケットの最大サイズです。
開発者コンソールのプレビュータブは、FCPのデバッグに便利です。
Tailwindの主なベストプラクティスは、タイトなカップリングです。つまり、構造とスタイリングが結びついています。セマンティックアプローチはその逆です：構造とスタイリングが緩く結びついています。フロントページのギャラリーコンポーネントを調べて、それがどういう意味を持つのか見てみましょう。
セマンティックバージョンでは、ギャラリーのデザインを自由に変更することができます。コンポーネントに名前を付け、外部でスタイリングすることができます。一方、Tailwindではスタイルを構造から分離することはできません。
もっと具体的な例を見てみましょう。両実装の「Uses」または「Setup」ページを見てみましょう。
Tailwindを使用する場合、適切なHTML構造を作成するためにJavaScriptコンポーネントを作成する必要があります。セマンティックバージョンでは、生成されるHTMLがセマンティックであり、CSSセレクタで外部のスタイリングを行うため、カスタムのJSXコンポーネントの代わりにMarkdownを使用することができます。
緩いカップリングにより、コンテンツを最初に考えることができます。すべての状況に対してコンポーネントを作成する必要はありません。外部のCSSを使用して重い作業を行うことができます。
しかし、…
物事に名前を付けることはスキルです。繰り返すものに名前を付けるのです。JavaScriptの関数名やFigmaのコンポーネント名を考えてみてください。CSSクラス名にも同じことが言えます。名前を付けることがうまくなれば、繰り返すことから再利用することに移行できます。つまり、次のような形に移行することができます。
コンポーネントにならなくても、次のようになります。
タイトなカップリングのことを「共有」と言います。スタイリングはプレゼンテーションに結びつけられるべきだという考え方を促進する用語です。繰り返すことと再利用すること。上記を参照してください。
Tailwindは、カラー、スペーシング、レスポンシブデザインについて優れたデフォルトを持っています。これは、おおよそTailwind CSSファイルの3％程度です。必要に応じて、これらのデフォルトをセマンティックなデザインシステムにコピーすることも簡単です。
はい。Tail
注意
- この記事はAI(gpt-3.5-turbo)によって自動生成されたものです。
- この記事はHackerNewsに掲載された下記の記事を元に作成されています。
Tailwind vs. Semantic CSS - 自動生成された記事の内容に問題があると思われる場合にはコメント欄にてご連絡ください。