キーポイント

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

CSSアーキテクチャの要素

悪いCSSを継承したことがあり、それを維持する義務(wù)がある場合は、將來あなたのコードを維持する他の人に同情するかもしれません。極端な場合、開発者はアプリケーションのCSSを完全に書き直す以外に選択肢がありません。これらの極端は、各パッチが複數(shù)の予期しない副作用を?qū)毪工毪劝k生します。これに到達(dá)すると、スタイルシートの維持が難しくなります。

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

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

CSSを維持できる3つの柱

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

ビデオ再生アイコン

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

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

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

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

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

に適用します

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

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

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

懸念の分離

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

しっかりした原理

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

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

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

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

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

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

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

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を使用してベースクラスのスタイルを継承するモディファイアクラスを作成します。

構(gòu)造は明確であり、修正されたクラスで自分自身を繰り返しませんでした。ただし、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>

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

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

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

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

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

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

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

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

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

これらの原則の実用的な適用を説明し、実証するために、巖の堅(jiān)実なCSSアーキテクチャのコースを作成しました このコースでは、CSSアーキテクチャの3つの柱を探索し、ソフトウェアエンジニアリングの原則を強(qiáng)調(diào)します。これらの原則を理論的に學(xué)ぶだけでなく、多くの実用的な例でそれらを使用する機(jī)會(huì)もあります。

たとえば、

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS変數(shù)は、保守可能なCSSをどのように宣伝しますか？

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

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

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

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

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

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

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

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

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

以上がCSSアーキテクチャと保守可能なCSSの3つの柱の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。