大規模なBEMを使用します

この記事では、経験豊富な開発者からの洞察を利用して、BEM（ブロック、要素、修飾子）CSS方法論を使用することの課題とベストプラクティスを調査します。 対処されている中心的な質問は、大規模なプロジェクトでBEMの複雑さを効果的に管理する方法です。

この記事は、一般的な誤解を強調することから始まります。基本的なBEM構造（

）は簡単ですが、多くの開発者はこれを誤って過度のレベルに拡張します（例えば

）。 インタビューを受けた開発者間のコンセンサスは、通常、ネストを1つまたは2つのレベルに制限することです。 深いネスティングは、読みやすさと保守性を低下させ、多くの場合、より良いブロックスコーピングまたは再構築の必要性を示します。 ある開発者は、余分なネストレベルを追加する代わりに、より長く、より記述的な要素名を使用することをお勧めします。 別の人は、過度のネストをCSSのDOM構造を厳密に定義することを比較する説得力のある類推を提供し、より柔軟なアプローチを提唱しています。 ただし、すべての開発者がこの2レベルの制限を厳密に遵守するわけではありません。一部の人は、より深いネスティングが時々必要であることを発見します。.block__element--modifier .block__element__subelement--modifier適切なブロックスコーピングが重要です。 この記事は、無関係な要素を含む過度に広いブロック定義を回避することを避け、最も小さく、最も自己完結型ユニットから始まることを強調しています。 このアプローチにより、モジュール性と再利用性が向上します CSSファイルの整理も別の重要な側面です。何人かの開発者は、ブロックあたり1ファイル構造を提唱し、モジュール性とメンテナンスの容易さを促進しています。 他のものはこれをSMACSSの要素と組み合わせて、ハイブリッドアプローチを作成します。 この記事では、特異性、明示性、およびリーチに基づいてCSSを構成する方法論であるITCSS（逆三角形CSS）についても説明し、大規模なCSSプロジェクトを管理するための構造化された階層化システムを提供します。

コードの読みやすさと保守性を向上させるために、長い説明的なクラス名の使用が不可解な略語よりも奨励されます。 この記事は、SASSの

をBEMで使用することを強くアドバイスしており、クラス間の明確な関係を維持し、CSSの膨張を避けるために、HTMLでマルチクラスのアプローチを好みます。 このアプローチにより、柔軟性が向上し、変更が容易になります

最後に、CSSの糸くずの重要性は、命名規則を実施し、チーム間で一貫性を確保するために強調されています。 この記事では、JavaScriptとテンプレートのツールを含むより広いYandex Bemスタックにも触れていますが、多くの開発者がCSS方法論のみに焦点を当てていることを認めています。 結論は、チームとプロジェクトに合ったワークフローを見つけることの重要性を強調し、さまざまなソースからのツールとテクニックを組み合わせています。 十分に文書化された構造化されたコンポーネントの利点が強調されており、より良い携帯性のための過剰自動を避ける必要性。

この記事は、BEMのさまざまな側面、他の方法論との比較、および実装とスケーリングのための実用的なヒントをカバーするよくある質問セクションで締めくくります。

以上が大規模なBEMを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。