CSSアーキテクチャと保守可能なCSSの3つの柱

キーポイント

• 保守可能なCSSアーキテクチャは、維持が困難なスタイルシートを避けるために不可欠です。これは、維持が困難なスタイルシートに予期せぬ副作用を持つことができ、アプリケーションのCSSの徹底的な書き直しを必要とする可能性があるためです。
• 3つの基本的な概念または柱は、CSSアーキテクチャデザインの礎石を形成します：ビルディングブロック（SASS、効率的なCSSセレクター、BEM構文など）、これらのビルディングブロックを信頼できる維持可能な階層CSSに調整し、ソフトウェアエンジニアリングの応用原則。
• 懸念や強固な原則の分離などのソフトウェアエンジニアリングの原則をCSSに適用して、コードが保守可能な方法で現実をモデル化することを保証できます。これには、ドライ（繰り返さないでください）やウェット（入力するのが好き）などの原則を適用して、コードの保守性を向上させることが含まれます。
• 混合物や継承を使用するなど、CSSで結合しようとすると、より強力な構造を提供し、各組み合わせのクラスを定義する必要性を減らし、CSSのメンテナンスを容易にすることができます。

CSSアーキテクチャの要素

悪いCSSを継承したことがあり、それを維持する義務がある場合は、将来あなたのコードを維持する他の人に同情するかもしれません。極端な場合、開発者はアプリケーションのCSSを完全に書き直す以外に選択肢がありません。これらの極端は、各パッチが複数の予期しない副作用を導入すると発生します。これに到達すると、スタイルシートの維持が難しくなります。

建築的に信頼できる決定を下すことで、将来の自己に困難を引き起こすことを避けることができます。これが、実際に保守可能なCSSアーキテクチャを構築する方法を学ぶことが非常に重要である理由です。

悪いコードに合格する人になりたくない場合は、ゼロから保守可能なCSSを作成する方法を知りたい場合があります。どこから始めますか？完璧なプロジェクトを構築する際に検討する価値のあるCSSアーキテクチャの要素を見てみましょう。

CSSを維持できる3つの柱

「オフィスのCSSヒーローになる：CSSアーキテクチャ」をご覧ください。

ビデオ再生アイコン

このコースを表示このコースを表示 ソフトウェアシステムのCSSアーキテクチャを設計する場合、3つの概念を検討する価値があります。これらの概念は非常に基本的なものであり、建物の構造をサポートする柱と考えることができます。これらの3つの柱が、CSSを時間のテストの下に保ち、維持が困難なカオスに崩壊しないようにする必要があります。

最初の柱は、CSSアーキテクチャの構成要素を定義します。これらのビルディングブロックには、SASSの使用、効率的なCSSセレクターの書き込み、ブロックエレメントモジー（BEM）構文の書き込み、ID属性の代わりにクラスを使用し、適切なユニットの場合は親relativeを使用するなど、さまざまなソリューションとツールが含まれています。

このビューでは、CSSコードの品質を大幅に向上させることができますが、作業を体系的に体系化するには、より高いレベルの組織が必要です。したがって、信頼できる保守可能な階層CSSを構築するために、ビルディングブロックのオーケストレーションに焦点を当てた2番目の柱が必要です。このレイヤーは、CSSアーキテクチャのスケルトンと考えてください。既製の2つのCSSアーキテクチャに興味がある場合は、ITCSSとSMACSをさらに調査できます。

残念ながら、ビルディングブロックとフレームワークまたはCSSアーキテクチャの組織化された使用により、岩が堅く装備が容易なCSSの書き込みはできません。ソフトウェアエンジニアリングの原則を適用することにより、コードは信頼性が高くなります。これは、保守可能なCSSを書面で3番目の柱です。

ソフトウェアエンジニアリングの原則をCSS

に適用します

長期にわたるソフトウェアを設計するためのさまざまな原則があります。

これらの原則は、CSSコードを保守可能な方法でモデル化することを保証することにより、CSSツールとソリューションを使用する目的を提供します。これらの原則がなければ、CSSアーキテクチャを使用することは、主に儀式にすぎません。ソフトウェアエンジニアリングの原則に従ってCSSを作成しないと、コードサイズの維持が困難になると、クラッシュして崩壊します。

特定のプログラミング言語で多くの経験を持つソフトウェアエンジニアである場合、これらの原則をCSSなどの宣言言語に適用することは非常に驚くべきことになるかもしれません。ただし、実際には、CSSは他の言語と同様に成熟した言語になりましたが、構造は必要なコードについて思慮深いです。いくつかの主要な原則の実用的な応用を調べてみましょう。

懸念の分離

懸念の分離は、ソフトウェアソリューションの明確な分離責任を定義する責任があるソフトウェア設計の原則です。 CSSへの最も明白なアプリケーションは、スタイル用のクラスと機能のクラス間の分離です。スタイルクラスはJavaScriptコードに表示されないでください。機能関連のクラスは、スタイルシートに表示されないでください。

しっかりした原理

ロバートC.マーティンは、5つの確固たる原則を定義しています。これらの原則のいくつかは、CSSやその他のプログラミング言語にも適用されます。

私のCSSアーキテクチャコースでは、単一の責任原則や開閉原則など、CSSコードのコンテキストでこれらの固体原則を使用する方法を詳述する多くの異なるアプリケーションがあります。

スタイルシートの階層では、単一の責任の原則を適用します。たとえば、ITCSSアーキテクチャのレイヤーには、リセットまたは正規化手順が含まれています。タグスタイルは正規化プログラム上に構築されており、コンポーネントスタイルはタグスタイルに基づいて構築されています。各レベルには、明確に定義された単一の責任があります。

ソフトウェアエンジニアリングの原則をCSSコードに適用する最も有名な例は、乾燥CSSとウェットCSSの比較です。 Dryは「自分自身を繰り返さないで」の略で、Wetは「私たちはタイプするのが大好きです」の略です。

ドライコードを変更するときはいつでも、1つの場所で変更を行う必要があり、他の外観のためにCSSコードベースの残りの部分を検索する必要がないことを確信できるため、コードド​​ライをより保守しやすいものにします同じコード条件の。

CSSが濡れている場合、コードの一般的な部分を識別し、この共通の関数を基本クラス（またはプリプロセッサを使用している場合は混合）に抽象化することで乾燥させることができます。

コードで基本クラスとサブクラスを使用することは、SASSの@extendを使用して実行される継承と呼ばれます。 SASS用語を使用してMixinまたは@mixinディレクティブを使用する場合、組み合わせを使用します。継承、構成、およびSASS定数の使用は、抽象化を実行するための強力なツールです。

css

を組み合わせてみてください

実用的な例を見てみましょう。コードベースに4種類の長方形があるとします。普遍的な長方形、丸い長方形、緑の長方形、丸い緑の長方形。

BEMネーミング条約を使用して、次のように各長方形のコンポーネントをマークすることができます。

<code><div class="rectangle"></div>
<div class="rectangle--rounded"></div>
<div class="rectangle--green"></div>
<div class="rectangle--rounded--green"></div></code>

継承を使用して、これらの4つのクラスをSASSで定義しましょう。 .rectangleのベースクラスから始めて、sass @extendを使用してベースクラスのスタイルを継承するモディファイアクラスを作成します。

構造は明確であり、修正されたクラスで自分自身を繰り返しませんでした。ただし、5つの修飾子の階層を作成すると、31のクラスの定義が発生します。そのほとんどは、@extendディレクティブのコレクションにすぎません。

<code>.rectangle {    
  width: 200px;  
  height: 100px;  
  margin: 20px;  
  padding: 20px;  
  display: inline-block;  
  border: 1px solid black;
}
.rectangle--rounded {  
  @extend .rectangle;
  border-radius: 20px;
}

.rectangle--green {  
@extend .rectangle; 
  background-color: green;
}

.rectangle--rounded--green {  
  @extend .rectangle--rounded;  
  @extend .rectangle--green;
}</code>

この組み合わせは、より強力な構造を提供します。完全に柔軟な構造を作成するには、一般的な長方形のクラスと2つの混合物のみが必要です。

特別な機能ボックスがあるとします。

<code>@mixin rounded {  
  border-radius: 20px;  
}

@mixin green { 
  background-color: green;
}</code>

機能ボックスが丸いが緑色ではない場合、長方形クラスを拡張し、長方形を丸くするミックスインを含める必要があります。

<code><div class="feature-box"></div></code>

構造は、各組み合わせのクラスを定義せずに柔軟です。

より良いCSSアーキテクチャソフトウェアエンジニアリングの原則は、CSSおよびその他のプログラミング言語に適用されると結論付けることができます。これらの原理は、CSSビルディングブロックのマイクロレベルとこれらのビルディングブロックのマクロレベルの2つのレベルの間にあります。したがって、保守可能なCSSを作成する際に実際にこれらの原則を適用する方法を学ぶことは有益です。

<code>.my-rectangle {  
  @extend .rectangle;  
  @include rounded;  
}</code>

これらの原則の実用的な適用を説明し、実証するために、岩の堅実なCSSアーキテクチャのコースを作成しました このコースでは、CSSアーキテクチャの3つの柱を探索し、ソフトウェアエンジニアリングの原則を強調します。これらの原則を理論的に学ぶだけでなく、多くの実用的な例でそれらを使用する機会もあります。

たとえば、

多数のブログ投稿を収集し、提供されたCSSコードを維持するのが難しい理由を確認します。 CSSのリファクタリングプロセスを徐々に完了し、この記事で簡単に紹介した原則を適用し、コースビデオで詳細に適用します。

ITCSSアーキテクチャとSASSを使用して小さなコンポーネントライブラリを作成することにより、CSSアーキテクチャの3つの柱を実践するためのセクションを開発しました。 CSSアーキテクチャについて詳しく知りたい場合は、コースにサインアップしてコースでお会いしましょう！

CSSアーキテクチャと保守可能なCSSについてよく尋ねる質問

Web開発におけるCSSアーキテクチャの重要性は何ですか？

CSSアーキテクチャは、Web開発において重要な役割を果たしています。 CSSコードを作成するための構造化された方法を提供し、コードを理解し、維持し、拡張しやすくします。明確に定義されたCSSアーキテクチャを使用すると、開発者は特定の競合、命令の紛争、コードの複製などの問題を回避できます。また、コードの再利用を容易にし、Webページを構築するのに必要な時間と労力を減らします。

OOCSSメソッドは、保守可能なCSSをどのように促進しますか？

オブジェクト指向CSS（OOCSS）は、コードの再利用とより速く、より効率的なスタイルシートを促進する方法です。開発者は、CSSをオブジェクトシステムと考えることを奨励しており、それぞれに独自のプロパティと動作を備えています。 OOCSSを使用すると、外観とコンテナからコンテンツから構造を分離することにより、スケーラブルで保守可能なCSSを簡単に作成できます。

CSSアーキテクチャにおけるBEMメソッドの役割は何ですか？

ブロック、要素、修飾子（BEM）は、HTMLおよびCSSのクラスに使用される規則の名前です。コードの読みや理解を容易にする明確で厳格な構造を提供します。 BEMアプローチは、命名と特定の競合の機会を減らすことにより、堅牢でスケーラブルなCSSアーキテクチャを作成するのに役立ちます。

SMACSSメソッドは、保守可能なCSSの作成にどのように役立ちますか？

CSSのスケーラブルでモジュラーアーキテクチャ（SMACSS）は、モジュール性とスケーラビリティを促進するスタイルガイドです。 CSSルールを、基礎、レイアウト、モジュール、状態、テーマの5つのタイプに分割し、それぞれに特定の目的を持っています。この分類は、CSSコードを整理し、維持と拡張を容易にするのに役立ちます。

CSSアーキテクチャにおけるITCSSメソッドの重要性は何ですか？

逆三角形CSS（ITCSS）は、大規模なCSSの管理を支援する方法です。 CSSをいくつかの層に整理し、各レイヤーが特定の役割を果たします。この階層構造により、最も一般的なスタイルが最初にロードされ、次により具体的なスタイルがロードされることを保証し、特定の問題の可能性を減らします。

CSS変数は、保守可能なCSSをどのように宣伝しますか？

CSS変数（CSSカスタムプロパティとも呼ばれます）により、開発者は再利用可能な値を定義できます。コードの複製を削減し、グローバルな変更を容易にすることにより、保守性を大幅に改善できます。たとえば、色を変数として定義すると、スタイルシート全体で再利用して1か所で変更できます。

保守可能なCSSにおけるCSS前処理者の役割は何ですか？

SASSなどのPREPROCESSORSは、通常のCSSでは使用できない変数、ネスト、ミキシン、機能などの機能を提供します。これらの機能は、コードの保守性と読みやすさを大幅に向上させ、複雑なCSSの書き込みを容易にすることができます。

コンポーネントベースのアーキテクチャは、保守可能なCSSをどのように促進しますか？

コンポーネントベースのアーキテクチャは、それぞれ独自のHTML、CSS、およびJavaScriptを備えた再利用可能な独立したコンポーネントの作成を促進します。このアプローチは、1つのコンポーネントへの変更が他のコンポーネントに影響を与えないため、コードをよりモジュール化し、維持しやすくなります。

CSSアーキテクチャのスタイルガイドの重要性は何ですか？

スタイルガイドは、一連のCSS執筆標準を提供します。これにより、コードベースの一貫性が保証され、コードの読み取りと維持が容易になります。スタイルガイドには、命名規則、フォーマットルール、ベストプラクティスが含まれます。

CSS Lintツールは、保守可能なCSSをどのように促進しますか？

css stylelintのような糸くずツールは、問題になる前にコーディング基準の実行と潜在的な問題を捉えるのに役立ちます。特定の問題を自動的に修正し、他の問題に関するアドバイスを提供し、それによりコードの品質と保守性を向上させることができます。

以上がCSSアーキテクチャと保守可能なCSSの3つの柱の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。