CSS コンポーネント Thinking_html/css_WEB-ITnose

なぜコンポーネント化なのか?

階層化された設計、コードの再利用、冗長性の削減

メンテナンスが容易で柔軟性が高い。

コードは現在 3 つのレベルに分かれています:

最初のレベルは最も詳細であり、主にフォント構成、カラー構成、UI フレームワーク (MUI や pure.css など) を含む基礎です。 2 番目のレベルはコンポーネント レイヤーです。プロジェクト内で 2 回以上出現するスタイルは、コンポーネントが 15 個未満の場合は 1 つのコンポーネントに分割されます。コンポーネントが 15 個を超える場合は、コンポーネントを 1 つのコンポーネントにまとめます。は自分で決定します）、それらをファイル内のいくつかの異なるlessファイルに入れることを検討してください。一部のスタイルは特定の DOM に依存するため、コンポーネントに対応する DOM に 1 対 1 で対応する HTML ファイルを作成する必要があります。

1. ページ レイヤー、残りのスタイル、1 つ少ないファイル。

2. 注: 上の 2 番目の記事では、コンポーネントを 1 つのファイルに入れるか、別々に保存することの利点は、どのコンポーネントを @import できるかということです。欠点は、ファイルと対応する HTML ファイルが非常に少なく、管理コストが高いことです。コンポーネントをまとめて名前空間を使用すると、コードの冗長性が発生せず (名前空間を使用することをお勧めします)、ファイル管理のコストも小さくなります。
less を使用してモジュール化を実現する
3. これまでのところ、CSS にはモジュール化された実装メカニズムがありませんが、less を使用することでモジュール化を実現できます。

混合関数 (再利用の最も直接的な実施形態);

ネストされた関数。ネストを使用した後は、スタイル階層が単純かつ明確になります。

名前空間関数はモジュール化のための強力なツールです。これを使用すると、インポートされたファイルを参照するときに、冗長なものを解放せずにコンポーネントを簡単に構築できます。スタイルでは、拡張表示指示を使用します。これは C 言語の extern に似ています

より良い解決策がある場合は、メッセージを残して交換し、一緒に進歩してください。