私のCSSアーキテクチャのコンセプト - それは人によって異なり、ベストなものはなく、適切なものだけがある

はじめに<br />私はフロントエンド分野でかなり長い間働いており、CSS分野でも長い間働いてきました。振り返ってみると、画像なしで三角形を実装する方法、IEで半透明効果を実現する方法など、一度習得したら決して忘れないスキルと知識がたくさんあります。しかし、実際のプロジェクト実装では、常に挫折と要約が必要であり、その後再び挫折と要約を繰り返し、ゆっくりと自分に合った方法を見つけ、この方法に従って開発することで、半分の労力で2倍の結果を達成できます。この記事は、CSS 全体の大まかな方向性を踏まえた内容であるため、後者に属します。初心者や実践的なプロジェクト経験が十分でない学生の方は、わからない部分があってもあまり気にしないことをお勧めします。読み飛ばしたり、メッセージを残して質問したりすることができます。経験豊富な人の中には、不満を抱いたり、自分とは違うと感じる人もいるかもしれませんが、CSS アーキテクチャは人によって、またプロジェクトによって異なるということをお伝えしたいと思います。最適なものはなく、適切なものだけがあるのです。

セマンティクスから始める<br />「CSS Zen Garden」などの優れた本を読むと、HTML セマンティクスが必ず冒頭で言及されていることがわかります。セマンティック HTML とは何ですか?実は、とても簡単です。HTML にはタグがほとんどありません。table タグは表に、p タグは記事の段落に、h シリーズタグはタイトルに使用します。a を除くすべての div+span を HTML ページ全体で使用しないでください。 XHTML はタグの定義に一定の制限があるため、HTML5 では多くの構造化タグが追加されました。この観点から、HTML のセマンティクス化も非常に重要であり、標準として確立されています。

なぜ HTML をセマンティックにする必要があるのでしょうか?
厳密に言えば、これは前の段落に含めるべきものです。分離しているのは、この記事の目的と密接に関係しているからです。しかし、今はまだ言えません。皆さんをハラハラさせたいわけではないのですが、今さら言うと、分かりやすく説明するのが難しく、皆さんが困惑してしまうでしょう。辛抱強く読み続ければ、理解できるようになります。

画像とテキスト---私のCSSアーキテクチャコンセプト

（図１）

（図2 ）

図 1 は現在のプロジェクトの CSS ディレクトリ構造で、図 2 は MindManager から取得したスクリーンショットです。どちらの図も、次の記事で大いに役立ちます。図2より:
1.CSSユニバーサルライブラリ（global.css）：このスタイルシートは、すべてのWebサイトで使用できます。Webサイトであれば、このスタイルシートをインポートできます。これには、CSS リセットスタイル、CSS レイアウトスタイル、マージン、フォント、フォントサイズ、配置など、CSS のすべての側面が含まれます。CSS ユニバーサルライブラリは、CSS スタイル分離の原則を直接反映したものです (ここで説明するスタイル分離と次に説明するスタイル結合の原則は、2 つの比較的複雑な概念です。これらを十分に理解するには、別の記事で説明する必要があります。幸いなことに、そのような記事はまだあります。時間があれば、フロントエンドの専門家である Zhang Xinxu のブログ記事「CSS スタイルの分離と再分離、CSS スタイルのマージとモジュール化」を読むことができます。私の CSS ユニバーサルライブラリは、インターネットで入手できるものと似ています。必要な場合は、Zhang Xinxu の関連記事で直接見つけることができます。以下に、私の CSS ユニバーサルライブラリのスクリーンショットを添付します。

2. ウェブサイトの一般的な CSS (ktv_style.css): このスタイルシートは、スタイルの組み合わせの原則に従います。このスタイルシートにはどのようなスタイルを入れることができますか?これは、ウェブサイト全体の共通モジュールです。ウェブサイト上の共通テキストとリンクテキストの色、トップレベルのナビゲーション、境界線、共通タイトル、ウェブサイトの下部、コメント機能モジュールなどです。このスタイルシートはウェブサイト全体に影響します。1つのスタイルを変更すると、すべてのページがそれに応じて変更されます。したがって、このスタイルを変更するときは注意が必要です。
3. シングルページ CSS (pages ディレクトリの下にあるすべてのスタイルシート): index.css などのホームページスタイルシートと同様に、各ページには独立したスタイルシートがあります。これは、名前の変更によって発生するスタイルの競合の問題を解決するためです。この問題は、プロジェクトが大きくなり、ページ構造が複雑になるにつれて、ますます顕著になります。ページが異なるスタイルシートを呼び出した後は、HTML ページで同じスタイル名が使用されていても競合は発生しません。
4. プラグインが使用する CSS: このディレクトリで使用する CSS は、基本的に参照先の JS プラグインの関連スタイルシートです。フォルダに分けられているのは、メンテナンスの便宜を図るためです。
上記 4 つのポイントは、私の CSS アーキテクチャを大まかに説明したものです。各ポイントを詳しく説明すると、前の 1 つまたは 2 つのポイントで説明したスタイルの分離と組み合わせの原則など、話すことがたくさんあることになります。この記事を完全に理解できない場合は、まず関連記事を読むことをお勧めします。この記事はこれで終わりですか？答えはノーです。

スタイルシートをモジュール化します<br />ここからは、HTML をセマンティックにする必要がある理由について説明します。
div を記述し、スタイル名を定義し、div 内に別のタグを記述し、別のスタイル名を定義し、対応する CSS 内にスタイルを記述する習慣がありますか?はい、行ったことがない人はいないでしょう！しかし、これは良いアプローチではないと思います。悪い点は2つあります:
1. スタイルの命名を考えるのに多くのエネルギーを費やす必要があります。命名というのは本当に嫌なものです。
2. この記述方法を放棄し、モジュール処理スタイルシートに切り替えると、HTML のセマンティック原則を徐々に受け入れるようになります。これは嘘ではありません、続けてください。

スタイルシートをモジュール化する方法
モジュールの意味: 私の理解では、モジュールとは、同じビジネスロジックと同じまたは類似の機能を備えた要素の集合であり、ユーザーはこれらの要素をまとめる必要があると考えます。たとえば、Weibo ホームページにログインした後の「興味があるかもしれない人」セクション:

このようなモジュールには、タイトルバー、シンプルリストなどがあります。
このモジュールの Weibo の処理コードは Firebug で確認できます。かなり複雑です。このモジュールのコードをレイアウトすると、非常にシンプルになります。次のように記述します。

コードをコピー

コードは次のとおりです。

<div class="friend_love">
<h2>興味があるかもしれない人々</h2>
<ul>
<li></li>
</ul>
<em>誰かを探す</em>
<span></span>
<a class=”more”>詳細</a>
</div>

なぜこのように書いたのか理解できるかどうか確認してください。スタイルの命名を含め、コードのすべての行が考慮されます。 Weibo のフロントエンドスタッフが優秀ではないと言っているわけではありません。フロントエンドコードの記述は、プロジェクト計画とバックエンドデータのプレゼンテーションに応じて調整する必要があります。ただし、フロントエンドの記述だけを行う場合は、最初に記述するコードは十分にシンプルで、明確なセマンティクスを持つ必要があります。上記の HTML コードを使用して、独自のスタイルをレイアウトできます。

コードをコピー

コードは次のとおりです。

.friend_love h2{}
.friend_love ul{}
.friend_love em{}
.friend_love スパン{}
.friend_love .more{}

スタイルシートにコメントを記入することもできます: /*friend_love*/;
このようなモジュールを別のページで呼び出す必要がある場合は、コピーするだけで十分です。このようなモジュールと 2 つのスタイル名がある場合でも、名前の付け方にまだ不安がありますか?おそらく、em 要素には float:left スタイルを入力するだけで十分でしょう。そうであれば、このスタイルを記述する必要すらありません。global.css の構造タグでスタイルを呼び出すだけです: <em class=”fl”></div>。なぜ fl なのでしょうか? global.css の左フローティングスタイルの定義を参照してください。

前にも述べたように、CSS アーキテクチャは人によってもプロジェクトによっても異なります。成熟度や妥当性はまだ検証されていない私のアプローチを採用する理由はありません。ただ、使用可能で使いやすいと思うだけです。私はただ、いくつかのアイデアを提案しているだけです。

<<: MySQL パーティションテーブルに関するパフォーマンスバグ

>>: Chromeの最小フォントサイズ制限12pxに対する最終的な解決策