CSS方法論は、気が遠くなるように混乱し、決定するのが難しいことを気にすることができます。最もよく知られている2つのオプションを考えてみましょう：BEMとSMACS。
次のプロジェクトにこれらのいずれかを選択する必要がありますか？彼らは何に最適ですか？何が問題になるかもしれませんか？すでに協力している場合は、意図したとおりに使用していますか？最大限の可能性に？あなたがそれを正しくやっているかどうかをどうやって知っていますか？すでに自分のプロジェクトでそれらの質問をしていて、彼らの経験から学ぶ人々に尋ねるのはいいと思いました。私は、BEMやSMACSSと一緒に仕事をした開発者に、サクセスストーリー、ホラーストーリー、アドバイス、注意の言葉を求めました。私はいくつかの開発者に質問のリスト全体を与えました、そして他の人はちょうど彼らの考えを私に自由に形成しました。結果を、CSSを最適化することを検討している人にとって貴重な読書になることを願っています。 CSSアーキテクチャであなたのオフィスのCSSヒーローになるのを見る 構造化され、保守性があり、スケーラブルなCSS
このコースをご覧ください このコースをご覧くださいBEMとSMACSSの新しい人のために、BEMとSMACSが何であるかについて非常に高レベルの概要を説明することから始めます。
キーテイクアウト
BEMは、あらゆるプロジェクトのサイズに汎用性があります。BEMは大規模なプロジェクトだけではありません。小規模および大規模なプロジェクトの両方で清潔で保守可能なコードを維持するのに有益です。
要素は、特定の関数を実行するブロック内のコンポーネントです。ブロックのコンテキストでのみ意味があるはずです。たとえば、
モディファイアは、ブロックのバリエーションを表す方法です。例えば：
BEM.Info WebサイトにはBEM用の他のアーキテクチャの原則とツールがありますが、開発者がBEMについて議論するとき、それらはしばしば上記の命名規則に焦点を当てており、それは以下の議論の大部分に当てはまります。 🎜>
<span><span>.block</span> {}
</span><span><span>.block__element</span> {}
</span><span><span>.block--modifier</span> {}
</span><span><span>.block__element--modifier</span> {}</span>SMACSSは、Jonathan SnookによるCSSフレームワークです。 SMACSSのWebサイトでは、彼はそれが厳格なCSSフレームワークというよりも「スタイルガイド」のようなものだと言います。ルールの5つのカテゴリに焦点を当てています：
レイアウトは、ページをヘッダー、フッター、記事などの要素を含むセクションに分割します。多くの場合、開発者はクラスにlをプレフィックスすることによりレイアウト要素を表示します。
モジュールは、設計の再利用可能なモジュラー要素です。 SMACSSのドキュメントでは、モジュールがあなたの要素の大部分を見ているため、それらをプレフィックスする必要はありませんが、選択した場合はそうすることができます。状態は、各要素で可能なバリエーションに使用されます（たとえば、アクティブ、非アクティブ、拡張、非表示）。これらには、is-、例えば。 IS-Active、Is Inactive、IS-Expanded、Hiddided、またはIS-Hidder、または次のような擬似クラスを介して行われます。
テーマは状態に似ていますが、モジュールとレイアウトがどのように見えるかを定義します。それは、全体で異なるように見える共有要素を備えたより大きなサイトに適用可能です。ページごとまたはセクションごとにテーマのバリエーションを追加します。SMACSSの子要素（BEMの「ブロック」に対する「要素」のように）の子要素には、ダッシュが付いた親項目が付いています。例えばメニューとメニュー - アイテム。
SMACSSは、開発者の好みにぴったりであり、BEMほど規範的ではないと述べています。 SMACSSは、基本的なガイドラインを提供するだけです。他の開発者が従うことができるように、アプローチを文書化する限り、各カテゴリに独自の命名規則を使用し、あなたのアプローチを文書化する限り、それらを好みの方法で配置します。
ネストを避けます
オーストラリアのシドニー出身のフロントエンド開発者であるAlec Raesideは、BEMがセレクターの営巣を避けるための良い方法であることを発見しました。
「BemはUIを構築する良い方法です。記述的な、時には長いクラス名は、このクラス/セレクターがUIアーキテクチャ内にある場合にすぐに理解するのに適しています。また、SASSコードベースを備えた一般的な没落であるセレクターをネストする必要はめったにありません。通常、BEMでネストしているときは、HTMLタグ名で要素をターゲットにしたいとき、またはコンポーネントのスタイリングが重複するときに特異性のバトルに勝ちたいときです。ハミッシュ・タプリンは、ベムとオブジェクト指向の原則の賞賛を歌いました。彼は「セマンティック」マークアップの概念について興味深い考えを提起しています：
「BEMの利点はすぐに明らかになりました。 BEMとOOCSSの原則を採用する前は、「セマンティック」マークアップとして（誤って）何が知られているかを支持していました。多くの開発者（私を含む）は、これが実際に意味することを大部分誤解しており、彼らが十分に「意味的」ではないという装ってクラスの力を無視していたと思います。検索エンジンとスクリーンリーダーは、使用するクラスやグリッドに使用される追加のDIVを気にしません。 TwitterエンジニアのNicholas Gallagherは、「HTMLセマンティクスとフロントエンドアーキテクチャについて」というブログ投稿でこれを完全に釘付けにしました。クラス名になることはできません。どの名前が使用されていても、意味があり、目的があります。クラス名のセマンティクスは、HTML要素のセマンティクスとは異なる場合があります。」
多くの開発者が言及しているBEMの大きな強さの1つは、よりクリーンな方法で大規模でモジュラープロジェクトの開発と実装を処理する能力です。 BEMは大規模なサイトだけではありませんが、この分野では大きな利点があるようです。ハミッシュは彼の経験について話し合い、それについてのブログ投稿さえ持っています：
「私はいくつかの小さなプロジェクトに手を出して、それを把握するようになりました。長年働いてきた方法に反していたが、その利点は明らかになっていたので、最初は非常に困難でした。それから、私たちは本質的に非常に大きく、非常にモジュール式のプロジェクト、つまり私の健康スキルを始めました。これは、私が別の開発者（BEMを使用していたPaul Goodfield）と一緒に仕事をしていた最初のBlueggプロジェクトでした。メリットはすぐに明らかになりました。ポールは私のマークアップが何をしていたのかを正確に理解し、その周りに彼のLaravelテンプレートを書くことができました。彼がいくつかのギャップを埋める必要がある場合、BEMの予測可能な性質は、彼が私が持っているようにHTMLを書くことができ、プロセス全体がはるかにスムーズになったことを意味しました。これについては、「私の健康スキルの構築」というブログ投稿で書きました。
alec Raesideは、BEMの命名のモジュール性を通じて、大規模なプロジェクトにもメリットがあることを発見しました。彼は言う：
「BEMは大規模なプロジェクトに適しています。 CSSは複雑であり、非特異的セレクターが他の場所で意図しない結果を引き起こす可能性がある場合、大規模なプロジェクトが崩壊する可能性があります。たとえば、.container ul {}のようなセレクターの下ですべての
英国のコンサルタントフロントエンドアーキテクト、デザイナー、開発者であるハリーロバーツは、BEMとクリーンCSSの領域のアイデアに多大な量を提供してきました。そのカプセル化を通じてウェブサイトを越えて：
「BEMの方法論は、コンポーネントをあるコードベースから別のコードベースに移動する必要があるプロジェクトに理想的に適しています。 HTML、CSS、JSの1つのチャンクを別のプロジェクトに移動できるように、完全にカプセル化する必要があります。 5つの異なるサイトを持っている会社で働いていると想像しましょう。彼らはすべてホームページで同じカルーセルを必要としています。 BEMの方法論にそのカルーセルを書いて、それを一枚で拾って動き回ることができます。」
「BEMは、Webアプリのような自己完結型のウィジェットやコンポーネントがたくさんあるサイトに非常に適しています。 HTMLコンポーネント（Angular、React、Polymer/Webコンポーネント）を宣伝するフレームワークは、BEM方法論を適用するのがはるかに簡単になります。
「私は半年間BEMに手を出しており、www.viewbook.comの新しいスクロールギャラリーページで、古いフラッシュサイトをHTMLバージョンに再加工するという2つのプロジェクトでそれを使用しています。これらのプロジェクトの設計は明確に定義されており、BEMを使用した最大の勝利はプロトタイプを迅速に提供することでした。そして、それは主に、ブロック、要素、および修飾子のデザインを「解読」すると、いくつかのCSSをコーディングするための素晴らしいスタートが得られるからです。
あなたに二度考えさせます
「少しugいものであるという事実のために、本当に長いクラスの名前を書くときによく考えさせるようになりました。」
」あなたが計画していることを確認してください！
「プロジェクトを開始するときにある程度の計画があります。私はモックアップを経て、BEMモジュールに抽象化できるパターンを探す傾向があります。これは最初は難しい場合がありますが、古いパターンを再利用し始めるまで良くなります。コードの再利用は開発のニルヴァーナであり、あなたの上司があなたがより効率的であるために生産コストが下がるときにあなたに感謝すること！」
あまりにも厳格にならないでください
それは、モジュール性、ドライ、SRPなどを言っているわけではありません。彼らは素晴らしいアイデアではありません - 彼らは、それらがアプローチであり、成果ではないことを理解しています。 2、2014
ジョシュは次のように説明しています。理論的な「標準」に固執しようとして夢中になりすぎないでください。ヘルパークラス（.pull-rightや.text-centerなど）は、BEMと共存するのが完全にクールです。あなたが持っていたかもしれない場所でも、同じように（おそらくさらに良い）。
ためらっている場合は、ジャンプして試してみる
ハミッシュはすぐにベムに飛躍しませんでした。影響力のあるプレゼンテーションと仕事を変えるのに少し時間がかかりました。しかし、彼は彼がやったことをうれしく思います。
私はベムが数回言及し、それが面白そうに見えたが、私が執筆していたマークアップとクラスの量を最小限に抑えようとして、sass @extendを使用して、これが引き起こす問題を回避することを試みたのを見た。 。ある日、ハリー・ロバーツのビデオ「Breaking Good Habits」を見て、吹き飛ばされました。この男はスポットでした - 私たちはこれを行うことによって実際にどのような問題を解決しましたか？」ハミッシュは続けて、「私はその時点で仕事を動かしていました。Blueggでの現在の仕事から始めて、それをBemを試してみるためのきれいな休憩だと思っていました。」
私はハリーに尋ねました。ハリーは、ハミッシュが「良い習慣を破る」ことについての講演で逃したのと同じ開発者に尋ね、ジョシュにインスピレーションを与え、特別なサクセスストーリーがある場合はジョシュにインスピレーションを与えました。彼の言葉は、「それを与えてください」という考え方を繰り返しました：
「私が取り組んだすべてのプロジェクトは、BEMネーミング条約の恩恵を受けています。それは即座に人生を変えるものではないので、サクセスストーリー自体を引用するのは困難です。通常、それはより良い全体を作成するために集まる多くの部分の1つにすぎません。ハンドル自体はそれほど深遠ではありませんが、車の重要な部分です。 Bemの命名は、プロジェクト全体をはるかに改善するものの1つです。
「サクセスストーリーに最も近いのは、おそらく、私のクライアントにベムの命名を紹介した時間です。彼は、長い間、長い間ベムの命名を避けていました。私は彼に、少なくとも半日だけプロジェクトを試してみて、彼が考えていたことを見るように説得しました。彼はそれを愛していました。わずか数時間後、彼はここにアンダースコアを入れ、ここにダブルハイフェンを入れていました。人々がその電球の瞬間を持っているのを見るのはいつも素晴らしいことです。」ハリーは、不確実な人のために次の質問を出しました：
「BEMについて確信が持てない場合は、この質問に答えてください。正直なところ、BEMネーミングを使用することに欠点はありません。」
これについての最後の言葉を、次のように言ったハミッシュ・タプリンに任せます。
「試してみてください。 BEMは問題を解決することですので、それがあなたのためにそれをするかどうかを確認してください。私は、それを試したことがなく、マークアップを「セマンティック」に保ちたいと思っている人々によって、多くのフォーラムや議論で却下されたのを見ました。思い切って同じように、HTMLとCSSをどのように書くべきかについての見通し全体を完全に変えました。優れた製品を構築したい場合は、間違っているときに適応し、認める準備をしなければなりません。」
シドニーを拠点とする開発者であるクリス・ライトは、SMACSSの大ファンであり、彼のアドバイスを提供しました。クリスのSMACSSの主な賞賛は、その分類機能の使いやすさです。
「SMACSSが非常に強力である理由を活用し始めたら、分類機能であるため、他の人気のあるCSS方法論と比較して、本当に読みやすく教えられる方法論であることがわかりました。」
「私は請負業者としてそれを使用しています。それは人々にデモを行うのがはるかに簡単だからです。ここに私のスタイルシートがあります。その前にL-を持つクラスは、レイアウトに懸念があり、その前にM-があるものはモジュールです、等々。私はまだ引き渡して説明する必要がありますが、説明しなければならない量が減ったので、仕事以外でももっと時間を節約できました。昨年の時点で、私はできる限りのプロジェクトでそれを使い始めました。」CSS方法論の新規参入者にとっては
「以前にCSS方法論に遭遇したことのない開発者に説明する方がはるかに簡単であることがわかりました。その方法論の価値とそれの使用方法。
「私はしばらくベムで試しましたが、常に人々が混乱することがわかりました。 OOCSSを使用すると、人々の命名規則はしばしばあちこちにあることがわかりましたが、一般的にそれを手に入れました。 SMACSSは、クラスの目的が何であるかをすぐに見るのに役立つ分類を提供します。読みやすさ
クリスはまた、BEMの初期バージョンが少し冗長であることを発見したが、それが時間の経過とともに発展しているのを見て、彼はここでSMACSを好む。
「読書の観点からも、これらすべてのアンダースコアとダッシュ、ベムのクレイジーな長いクラスは私を遠ざける傾向がありました。方法論について、しかし、私はまだそれが私のためであるとは感じていません。Chrisは、SMACSをより大きなサイトと比較して同じように完全に従う必要はないことも指摘しています。これにより、すべてのプロジェクトで柔軟性と適用性が可能になります。
「さまざまな形のSMACSがすべてのプロジェクトに適していると言っても安全だと思います。 Snookが彼の著書に述べているように、小さなプロジェクトでは、おそらくテーマのようなものをカテゴリ（T-）として使用することはありませんが、レイアウトクラスをモジュールクラスから一目で区別できることはかなり価値があります。」
SMACSとBEMを使用できます「SMACSSの概念を使用していますが、相互に排他的であるとは考えていません。 SASSを「ベース」、「レイアウト」、「モジュール」に整理します。これらは、広くSMACSSコンベンションです。また、JavaScriptで「状態」ベースのクラスを使用することの大ファンでもあります。たとえば、表示または非表示にできるモジュールには、JavaScriptによって制御される可能性がある、または非表示クラスがあります。これは、BEMスタイルの修飾子を使用するのではなく、JavaScriptによって制御されるものを区別するのに役立ちます。私はそれに反対しません。」
Bob Donderwinkelは、ほとんどの状況でBEMとSMACSSの両方の組み合わせが可能であることに同意しました。
「一方を使用しても、もう一方を除外しないと思いますが、SMACSSのモジュールと状態のルールを考慮すると、BEMとの重複があります。しかし、これらに加えて、必要に応じて両方を混ぜて一致させることができます。」ハリー・ロバーツは、どこからでも最高のビットを選択することをお勧めし、BEM、SMACSS、およびOOCSSの組み合わせで「ITCSS」と呼ぶ独自の方法論を使用します。
「私は実際には、まだ未発表として、oocss、bem、およびsmacssのsmatteringsとともにITCSS方法論を使用しています。苦い終わりに盲目的に1つの方法論に従うのではなく、どこからでもビットを選ぶことが非常に重要です。私は常にBEMネーミングを使用しており、複数のコードベースで共有する必要がある完全にカプセル化されたコンポーネントが必要なプロジェクトでBEM方法論を使用します。 OOCSを使用してこれらのコンポーネントを作成し、これらのコンポーネントをITCSSアーキテクチャに包みます。
「BEMとSMACSSで始まり、停止しません。 ITCSSは、プロジェクト全体を含むように設計されています。 OOCSSは、すべてが互換性のある素晴らしい小さな方法論です。より良い品質のCSSを書くために、確固たる原理を使用できます。」ITCSSでもう少し知りたいと思っているなら、ハリーはあなたが見ることができるビデオを持っています。堅実なCSS原則の詳細については、ハリーはこれら2つの記事も提供しました。
CSSに適用される単一の責任の原則
CSSに適用されるオープン/クローズド原理
私は、開発者からいくつかのホラーストーリーと警告の言葉を得ようとしました。彼らが学習プロセスにいる間に彼らの失敗から学ぶことができる教訓です。ここに彼らの考えがあります。
「それは非常に学習曲線であり、概念的に理解するのはそれほど難しくありませんが、通常のCSS/SASSを書く習慣を変えるのに時間がかかります。純粋にコンポーネントに基づいた方法で考えないのは非常に簡単です。私は一年中ベムを書いてきましたが、それでも私はそれを書く方法を学んでアップグレードしているように感じています。時には、BEM以外のCSSと比較してBEMを使用してもう少しCSSを書く必要がありますが、迷惑なことを達成する必要がありますが、一貫性を持つことが最善です。
「BEM自体は、可能な限り最善の方法を構築するのに十分ではありません。BEM、モバイルファーストCSS、SASSの適切な使用、厳格なコーディング標準を組み合わせます。私たちはそれを完璧にしていませんが、それは良くなっています。また、最近、SCSS-LINTを使用して、コーディング基準を実施し、BEMの使用量を程度は低くしました。smacssのクリス・ライト
ジョシュハントでhunt
「BEMを初めて使用することは、悪夢になることが多いことがよくあります。初めて私が作成したのは、.classes__about__five__levels__deepを作成しました。 BEMは、クラス名へのDOM構造の1対1のマッピングではないと想定されていません。
「BEMを適用するのが難しいと感じたのは、.wrapperや.innerなどのスタイリングに純粋に追加の要素が必要な場合です。 .article__innerを持っていることは本当に正しくありません（内側は記事の要素ではありません）。選択した単語（div.article__media img.article__img）でクリエイティブになることもありますが、Bemを「壊して」「article-wrapperまたは.article-inner。
「BEMの最大の課題は抽象化に固有のものだと思います。時々頭を動かすことは難しい場合があります。抽象化できるパターンを見つけるためにある程度の計画が必要であり、最初に物を見つけられないときにリファクタリングする必要があることがあります。これは開発で一般的であり、計画と経験は大いに役立つ可能性があります。
もう1つの固着点は、マークアップを完全に制御する必要があるということです。これが常に可能であるとは限らない環境（.NETなど）で作業している場合に困難になる可能性があります。」ハリー・ロバーツのベム
BOB DONDERWINKEL on Bem
全員の反応とアイデアを経験した後、最良のアプローチがハイブリッドのように思われたことは明らかでした。すべてを読んで、BEMとSMACSSの両方に心を開いて行って、CSSとワークフローが改善されるかどうかを確認します。 1つの方法論を選択する必要はありません。いくつかの方法論の概念を、あなたとあなたのチームのために働く方法に組み合わせます。あなたが助けを必要とするなら、いくつかの考えやアドバイスを喜んで共有する意思のある開発者がたくさんいます。
私の質問に答えて考えや経験を共有するのに十分な時間をあきらめてくれた以下の開発者に非常に感謝しています：
BEM（ブロック、要素、修飾子）とSMACSS（CSSのスケーラブルおよびモジュラーアーキテクチャ）は、CSSを整理するための方法論です。 BEMは、CSSを読みやすく理解しやすくする命名規則であり、SMACSSはCSS組織にルールを提供するスタイルガイドです。 BEMはサイトの視覚的表現に焦点を当て、SMACSSは構造とレイアウトに焦点を当てています。 BEMはクラスに特定の命名規則を使用し、SMACSSはスタイルをベース、レイアウト、モジュール、状態、およびテーマの5つのタイプに分類します。 CSSに明確で理解可能な構造を提供することにより、スケーラビリティ。特定の命名規則を使用して、異なる要素とその親ブロックとの関係を簡単に識別できます。これにより、大規模なCSSコードベースの管理とスケーリングが容易になります。これにより、競合を命名する可能性が低くなり、コードの読み取りと理解が容易になります。
以上がBEMとSMACSS：そこにいた開発者からのアドバイスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
