これら3つのCSS方法論で、手に負えないスタイルのシートを飼いならします

この記事は、Sitegroundとのコラボレーションの一連の記事の一部です。 SitePointを可能にしたパートナーをサポートしてくれてありがとう。

この記事では、原則、目標、利点を含む3つの成功したCSSアーキテクチャ方法を検討します。

キーポイント

• BEM、SMACSS、およびECSは、CSSアーキテクチャを管理するための3つの方法であり、それぞれに独自の原則、目標、利点があります。
• BEM（Block-Element-Modifier）は、スマートネーミングコンベンションを使用してCSSコードを再利用可能なモジュールに整理するために、プロジェクトとコンポーネントの再利用性の長期的な簡単なメンテナンスに焦点を当てています。
• SMACSS（拡張可能およびモジュラーCSSアーキテクチャ）は、CSSルールを分類してパターンを特定し、維持可能で再利用可能なCSSを作成するためのガイドを作成します。
• ECSS（永久CSS）は、分離を強調し、独自の共有フォルダーに各コンポーネントを構築するために必要なすべてのコードをカプセル化し、厳格なCSS命名規則を使用します。長期的には、このアプローチは簡単なメンテナンスをサポートし、ファイルサイズの増加を最小限に抑えます。

なぜCSSコードが制御不能になるのですか？

CSSコードを薄く保ち、再利用可能で保守可能にすることは非常に困難です。これは、小規模、中規模、大規模なプロジェクト、特に一貫した方法でコーディングおよび組織のルールを実行できない場合に関与する複数の開発者がいるプロジェクトで発生する可能性があります。コードベースが大きく、時間の経過とともに多くの変更を受け、組織がない場合、チームは多くの場合、コードの一部を削除したり、既存のコードを変更したりするのではなく、StyleSheetドキュメントの最後に新しいスタイルルールを追加することを好みます。主な理由は、多くの場合、CSSステートメントの編集または削除の効果が予測不可能であり、プロジェクトのどこかでデザインの休憩を引き起こす可能性があることです。これは、コードの複製、優先事項の問題（オーバーライドスタイルのルールが戦闘になる）、および全体的なインフレにつながる失敗した戦略です。通常、ニーズに最適な方法を選択することは、既存の方法に精通することから始まる反復プロセスです。乱雑なスタイルのシートの課題に対処するのに役立つ3つの方法を以下に示します。

bem

BEMはブロック要素モジーの略です。これは、CSSを構築するためにYandexによって作成された建築方法です。 BEMメソッドの目標は、迅速に開始され、長期的にサポートされるWebサイトを開発することです。拡張可能で再利用可能なインターフェイスコンポーネントを作成するのに役立ちます。 BEM Webサイト

ここでの重要な概念は、プロジェクトとコンポーネントの再利用性の長期的なメンテナンスの容易さです。 BEMのコア戦略は、インテリジェントな命名規則の助けを借りて、CSSコードを再利用可能なモジュールに整理することです。よく見てみましょう。

ブロックとは何ですか？

ブロックの識別は、BEMメソッドを適用する重要なステップです。ブロックは、再利用できる機能的に独立したページコンポーネントです。 HTMLでは、ブロックはクラス属性で表されます。 BEMドキュメント。

ブロックとして何を扱うかを決定するときは、コードのその部分を簡単に削除して他の場所で使用できるかどうかを自問してください。たとえば、Webサイトのヘッダーまたはフッターをブロックとして扱うことができます。たとえば、ヘッダーブロック内にメニューブロックを配置することができます。

<ul class="menu"></ul>

原則として、ページ上のどこにでもブロックを再利用できるはずなので、ブロックのCSSはマージンやポジショニングルールを設定してはなりません。最後に、名前を選択するときは、名前がブロックの外観や状態ではなく、ブロックの目的を説明していることを確認してください。言い換えれば、その名前はこの質問に答えるべきです：それは何ですか？ （例：ヘッダー、メニューなど）、の代わりにどのように見えますか？ （例えば、固定ヘッダー、小さなメニューなど）。

要素とは何ですか？

BEMメソッドによると、要素はA＆GTの一部であり、独立した意味がなく、そのブロックには意味的に関連付けられています。 bem

を取得します

以下は、要素に適用されるいくつかの原則です。

要素はブロックにのみ存在します
要素は他の要素に属することはできません。ブロックの一部にしか存在しません
ネストされた要素を構築できます
要素名は、その目的を表し、外観ではありません。
• 要素に名前を付けるときは、次の慣習に従う必要があります。Block__Element
修飾子とは何ですか？

モディファイアは、ブロックまたは要素の外観、状態、または動作を定義するエンティティです。 BEMドキュメンテーション

たとえば、ヘッダーブロックをページの上部で

に固定できます。アコーディオンブロックは

無効

など。 BEM修飾子の命名規則は、次のとおりです。ブロック要素修飾子。これがBEMメソッドの中核です。さらに、BEMは、ドキュメント構造組織の原則、一連のツール、およびそれをサポートするアクティブなコミュニティも提供しています。 BEM の使用の利点 以下は、プロジェクトでBEMを使用することの利点の一部です。 新しい開発者は、タグのコンポーネントとCSSルールの関係をすばやく理解できます チームの生産性を促進します。この利点は、大規模なプロジェクトで特に明白です

命名規則は、クラス名の競合とスタイルの漏れのリスクを減らします

CSSは、ページ内の特定の場所のマーカーと密接に関連していません

cssは非常に再利用可能です
• smacss
スケーラブルでモジュラーCSSアーキテクチャ（SMACSS）は、CSSコードの整理と書き込みに使用されるWeb開発方法です。その作成者ジョナサン・スヌークはそれを次のように説明しています：＆gt; smacssは、設計プロセスを調べ、これらの厳格なフレームワークを柔軟な思考プロセスに適応させる方法です。 CSSを使用する場合、サイト開発に対する一貫したアプローチを文書化しようとします。 SMACSS Webサイト

そのコアは、CSSルールを分類することです。分類にはパターンがもたらされます。このパターンでは、デザインで複数回繰り返され、その周りにメンテナンス可能で再利用可能なCSSを書くためのガイドを開発できます。 SMACSのコアカテゴリは次のとおりです

• BASIC - このカテゴリには、要素のデフォルトの外観を制御するCSSルールが含まれています。セレクターには、単一要素セレクター、属性セレクター、擬似クラスセレクター、兄弟セレクターなどが含まれます。たとえば、html、body、a、a：ホバーなど。
• レイアウト - このカテゴリは、ページをセクションに分割するページをスタイリングするために使用されます。
• モジュール - モジュールは、メニュー、ダイアログボックス、検索ボックスなどの再利用可能なビルディングブロックスタイルのコンポーネントを設計します。
• ステータス - このカテゴリには、特定の状態（例えば、可視または非表示、拡張または閉鎖など）または特定のビュー（例えば、家庭）のレイアウトまたはモジュールの外観の説明が含まれています。または内部ページ）スタイル。
• トピック - このカテゴリは、レイアウトとモジュールの外観を担当するCSSルールが含まれているため、状態に似ています。すべてのプロジェクトにこの余分なカテゴリが必要なわけではありませんが、その存在を知ることは常に良いことです。

smacss命名規則

上記のカテゴリに関連して、SMACSSは、コード組織と開発チームの生産性を支援するための命名条約を提案しています。レイアウト、状態、モジュールのルールには、意味のある名前または略語が付いています。レイアウト、グリッド、さらには単純なl-などのレイアウトルールの場合、許容可能なプレフィックスです。州の規則については、条約は、IS- IS-Hiddids、IS-Visibleなどの状態接頭辞として使用することです。モジュールについては、.menu、.dialogなど、構築しているコンポーネントの名前を使用してください。たとえば、開くダイアログをスタイリングするには、CSSで.dialog.is-openなどのセレクターを使用できます。同じモジュール内の関連要素と同じモジュールのバリエーションには、モジュールの基本名が付いている必要があります。また、ID、要素セレクター、またはネストされたセレクターを使用しないようにしてください。たとえば、

メニュー

という名前のモジュール内のメニュー項目を選択するには、次のようなセレクターを書くのではなく、.menu-linkや.menu-itemのようなものを使用します。 BEMとは異なり、SMACSSはあまりにも厳格な命名規則を規定していません。ジョナサン・スヌークはそれを明らかにしました：＆gt;…これらのガイドラインに厳密に従う必要があるとは思わないでください。合意し、それを記録し、それに固執します。 SMACSS Webサイト SMACSSを使用することの利点

CSSエンコーディングのSMACSSメソッドのいくつかの利点は次のとおりです。

それは、厳しすぎることを避けながら、モジュール式の保守可能なCSSに効果的なガイドを提供します

smacss
• をすばやく学ぶ（そして教える）ことができます
smacssの命名規則は、bemほど冗長ではなく、いくつかの方法で習得するのが簡単です
大小のプロジェクトによく使用されるほど柔軟です
• ecss

恒久的なCSSまたはECSSは、大規模で速く変化する長年のWebプロジェクトのためのスタイルシートを書くためのガイドです。 ECSS Webサイト

このCSSアプローチは、著者のベン・フレーンの大規模なCSSの課題を処理するという当初の見解に本当に関心を持っています。 ECSSのコア概念は分離です。分離とは、各コンポーネントが独立したコード単位であり、依存関係がなく、コンテキストの負担もなく、再利用可能で、スタイルの漏れのリスクなしに取り外し可能であることを意味します。これは主に次のように達成されます

すべてのコード（CSSだけでなく、各コンポーネントを構築するために必要なすべての手法）を独自の共有フォルダーにカプセル化します。
既存のコンポーネントに似たコンポーネントが必要であるが、バリアントが小さい場合でも、いくつかのバリエーションが必要な場合は、まったく新しいコンポーネントを作成します。
Strict CSSの命名規則
• を使用します
上記の2番目のポイントによると、属性と値を繰り返すことはECSSの問題ではないことは明らかです。この点で、ECSSは、既存のコンポーネントを拡張または抽象化するBEMやSMACSSなどの方法との根本的な違いを表し、コードの複製を可能な限り回避または回避します。これは、ECSSが大きなStyleSheetファイルを生成することを意味しますか？不確実です。ファイル圧縮によるいくつかのテストの後、ベンフレーンは、「GZIPは重複する文字列の圧縮に非常に効率的である」と結論付けました。ECSSを使用することと、複製ではなく抽象的である傾向がある他の方法のファイルサイズの違いは非常に良いと結論付けました。

ECSSを使用することの利点

以下は、ECSSメソッドを適用し、繰り返しの見解を受け入れることで得られる利点です。

CSSコードは、各視覚モードの分離を維持することで維持が容易です

重複したプロパティと値が見つかりますが、長期的にはファイルサイズの増加はまだ小さいです。これは、モジュールが自己完結型の独立したユニットであり、デザインを壊すことを心配することなく、いつでも必要としないモジュールをすばやく削除できるためです
モジュールを作成するために必要なすべての言語/技術ファイルは、同じフォルダーを共有するため、不要なコンテンツを簡単に編集して物理的に削除できます。
• Frainの本Persistence CSSでこの革新的なアプローチの詳細をすべて読むことができます。

結論

保守可能でよく組織化されたCSSコードを書くことは困難です。この記事では、このタスクを支援する3つの方法を紹介します。これは決して網羅的なリストではなく、これらの方法はどれもあなたがあなたのプロジェクトで遭遇するかもしれないすべての問題を解決するものではありません。それを試してみて、あなたのために何が役立つか見てみましょう。また、BEMとSMACSを組み合わせて使用​​してみて、自分で設定した一連の質問に基づいて独自のアプローチを開発することもできます。よく組織された、管理しやすいCSSコードを書くための黄金のルールは何ですか？ CSSアーキテクチャアプローチを使用することで痛みを和らげることができると思いますか？コメントボックスをクリックして私に知らせてください。

CSSアーキテクチャメソッドに関するよくある質問

OOCS、SMACSS、BEMメソッドの主な違いは何ですか？

OOCS、SMACSS、およびBEMはすべて、開発者が清潔で保守可能でスケーラブルなCSSを作成できるように設計されたCSSメソッドです。 OOCSSまたはオブジェクト指向のCSSは、開発者が再利用可能なオブジェクト指向のコードを作成することを奨励しています。構造を外観から分離し、容器をコンテンツから分離することに焦点を当てています。 SMACSS、または拡張可能なモジュラーCSSアーキテクチャは、CSSルールの分類に関するガイダンスを提供して、コードをより柔軟で管理しやすくします。 BEMまたはBlock Element Modifierは、CSSを読みやすくしやすくする命名規則です。 UIを再利用して結合できる別々のブロックに分割します。

CSSにWordPressエンコード標準を実装する方法は？

WordPressには、異なるプロジェクト間で一貫性と読みやすさを確保するために、独自のCSSコーディング標準のセットがあります。これらの標準には、命名規則、インデント、間隔、コメントの規則が含まれます。これらの標準を実装するには、StyleLintなどのWordPress構成を備えたCSS Lintツールを使用できます。

Web開発におけるスタイルシートの役割は何ですか？

「オフィスでCSSヒーローになり、CSSアーキテクチャを使用して構造化され、保守可能でスケーラブルなCSSを作成してください」！ このコースをご覧くださいStyleSheetは、Webページのレイアウトとデザインを定義するファイルまたはコードフォームです。レイアウト、色、フォント、アニメーションなど、ページ上のHTML要素の視覚的なレンダリングを制御します。 CSS（カスケードスタイルシート）は、最も一般的に使用されるスタイルシート言語です。

CSSメソッドはどのように私のWebデザインプロセスを改善しますか？

CSSメソッドは、CSSをより整理し、再利用可能でスケーラブルにすることで、Webデザインプロセスを大幅に改善できます。それらは、CSSを書き込むための構造化された方法を提供します。これにより、コードの複雑さを軽減し、理解し、維持し、パフォーマンスを向上させることができます。

HTMLでCSSを書くためのベストプラクティスは何ですか？

HTMLでCSSを作成するためのベストプラクティスには、外部スタイルシートを使用してコンテンツからスタイルを分離し、セレクターを効率的に使用し、関連するスタイルをグループ化し、速記のプロパティを使用し、明確にコードを注釈付けします。また、CSSを確認して、エラーがないことを確認し、さまざまなブラウザーと互換性があることを確認することも重要です。

CSSコードを維持しやすくするにはどうすればよいですか？

CSSコードの保守を容易にするには、OOCS、SMACSS、BEMなどのCSSメソッドを使用して、コードの構築と整理のガイドを提供します。その他の戦略には、CSSのモジュール化、SASS以下のような前執行機関の使用、および命名規則に従うことが含まれます。

CSSプレ前セッサーを使用することの利点は何ですか？

SASSのような

CSSプリプロセッサーは、CSSで変数、ネスト、ミキシン、および機能を使用することができます。また、より簡潔で強力なCSSを書くこともできます。

私のCSSが異なるブラウザと互換性があることを確認する方法は？

CSSが異なるブラウザと互換性があることを確認するには、使用できるようなツールを使用できます。これは、さまざまなブラウザでのCSSプロパティの互換性を示しています。すべてのブラウザで完全にサポートされていないCSS属性の場合、ベンダーのプレフィックスを使用することも重要です。

WebデザインにおけるCSSの重要性は何ですか？

CSSは、Webページ上のコンテンツの視覚的なプレゼンテーションを制御するため、Webデザインでは重要です。これにより、一貫したデザインとレイアウトを備えた視覚的に魅力的なWebサイトを作成できます。また、デスクトップ、タブレット、携帯電話などのさまざまなタイプのデバイスに基づいてプレゼンテーションを調整することもできます。

CSSメソッドの詳細についてはどうすればよいですか？

オンラインでCSSメソッドを学習するためのリソースはたくさんあります。 SitePoint、Smashing Magazine、Mozilla Developer Networkは、詳細な記事とチュートリアルを提供しています。また、CourseraやUdemyなどのプラットフォームでオンラインコースを見つけることもできます。

以上がこれら3つのCSS方法論で、手に負えないスタイルのシートを飼いならしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。