BEMとSMACSS：そこにいた開発者からのアドバイス

CSS方法論は、気が遠くなるように混乱し、決定するのが難しいことを気にすることができます。最もよく知られている2つのオプションを考えてみましょう：BEMとSMACS。

次のプロジェクトにこれらのいずれかを選択する必要がありますか？彼らは何に最適ですか？何が問題になるかもしれませんか？すでに協力している場合は、意図したとおりに使用していますか？最大限の可能性に？あなたがそれを正しくやっているかどうかをどうやって知っていますか？すでに自分のプロジェクトでそれらの質問をしていて、彼らの経験から学ぶ人々に尋ねるのはいいと思いました。

私は、BEMやSMACSSと一緒に仕事をした開発者に、サクセスストーリー、ホラーストーリー、アドバイス、注意の言葉を求めました。私はいくつかの開発者に質問のリスト全体を与えました、そして他の人はちょうど彼らの考えを私に自由に形成しました。結果を、CSSを最適化することを検討している人にとって貴重な読書になることを願っています。 CSSアーキテクチャであなたのオフィスのCSSヒーローになるのを見る 構造化され、保守性があり、スケーラブルなCSS

このコースをご覧ください このコースをご覧ください

BEMとSMACSSの新しい人のために、BEMとSMACSが何であるかについて非常に高レベルの概要を説明することから始めます。

キーテイクアウト

BEMは、あらゆるプロジェクトのサイズに汎用性があります。BEMは大規模なプロジェクトだけではありません。小規模および大規模なプロジェクトの両方で清潔で保守可能なコードを維持するのに有益です。

BEMでのネストを避ける：BEMは、SASSコードベースで一般的なセレクターの過度のネストを避けることにより、CSSの複雑さを減らすのに役立ちます。 BEMのカプセル化とモジュール性：BEMのカプセル化方法論により、依存関係を引き継ぐことなく、さまざまなプロジェクトでコンポーネントを再利用できます。

SMACSSはプロジェクトの携帯電話を簡素化します：SMACSSの分類により、特に契約または共同設定で役立つプロジェクトの説明と引き渡しが簡単になります。
• ハイブリッドアプローチは効果的です。BEMとSMACSSを組み合わせることで、両方の方法論の強みを活用し、CSSアーキテクチャの柔軟性と強化された組織を可能にします。
読み取りと実験：BEMとSMACSの両方にメリットがあり、一緒に使用できます。両方を読んで、プロジェクトでそれらを実験することは、CSS管理とワークフローの改善につながる可能性があります。
bemとは？
BEMは block要素修飾子
• を表し、yandexで発生します。 CSSクラスを独立モジュールに配置するかなり厳しい方法を提供します。アイデアにはいくつかのバリエーションがありますが、最も一般的なものは次のように見えます：
ブロックは、ウェブサイトのオブジェクトを表します。たとえば、
• • 人
  • ログインフォーム
  • メニュー
  • 検索フォーム

  要素は、特定の関数を実行するブロック内のコンポーネントです。ブロックのコンテキストでのみ意味があるはずです。たとえば、

  • 手
  • ログインボタン
  • メニュー項目
  • a検索入力フィールド

  モディファイアは、ブロックのバリエーションを表す方法です。例えば：

  • 背が高い/短い人
  • 凝縮ログインフォーム（たとえば、1つのバージョンでラベルを隠しています）
  • フッターやサイトマップの見方が異なるように変更されたメニュー
  特定のボタンスタイルを備えた[入力]フィールドを検索
  メニューの例では、クラス名は次のようになる可能性があります。
  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とは？
  SMACSSは、Jonathan SnookによるCSSフレームワークです。 SMACSSのWebサイトでは、彼はそれが厳格なCSSフレームワークというよりも「スタイルガイド」のようなものだと言います。ルールの5つのカテゴリに焦点を当てています：
  ベースは、HTML、ボディ、A、A：Hoverなどのデフォルトに使用されます。これには、CSSリセットが含まれ、多くの場合、独自のベースCSSファイルまたはメインCSSの開始時にあります。

  レイアウトは、ページをヘッダー、フッター、記事などの要素を含むセクションに分割します。多くの場合、開発者はクラスにlをプ​​レフィックスすることによりレイアウト要素を表示します。

  モジュールは、設計の再利用可能なモジュラー要素です。 SMACSSのドキュメントでは、モジュールがあなたの要素の大部分を見ているため、それらをプレフィックスする必要はありませんが、選択した場合はそうすることができます。

  状態は、各要素で可能なバリエーションに使用されます（たとえば、アクティブ、非アクティブ、拡張、非表示）。これらには、is-、例えば。 IS-Active、Is Inactive、IS-Expanded、Hiddided、またはIS-Hidder、または次のような擬似クラスを介して行われます。

  テーマは状態に似ていますが、モジュールとレイアウトがどのように見えるかを定義します。それは、全体で異なるように見える共有要素を備えたより大きなサイトに適用可能です。ページごとまたはセクションごとにテーマのバリエーションを追加します。

  SMACSSの子要素（BEMの「ブロック」に対する「要素」のように）の子要素には、ダッシュが付いた親項目が付いています。例えばメニューとメニュー - アイテム。

  SMACSSは、開発者の好みにぴったりであり、BEMほど規範的ではないと述べています。 SMACSSは、基本的なガイドラインを提供するだけです。他の開発者が従うことができるように、アプローチを文書化する限り、各カテゴリに独自の命名規則を使用し、あなたのアプローチを文書化する限り、それらを好みの方法で配置します。

  bem

  を使用した人からのガイダンス

  すべてのプロジェクトに適用されます 英国カーディフ出身のフロントエンド開発者であるハミッシュ・タプリンは、BEMは大小のプロジェクトに適していると考えており、多くの利点を提供します。

  「ベムは大規模なプロジェクトのために宣伝されていますが、私はそれをまったく信じていません。きれいで保守可能で、特異性の問題と戦っていないコードを書くのが好きなら、BEMはあなたのためです。生成するHTMLは醜いまたは冗長だと言う人もいますが、私はそれが美しいと思います。 HTMLを読んで、何が起こっているのか、要素が互いにどのように関連しているかを正確に確認できます。それは素晴らしいです。」
  ネストを避けます

  オーストラリアのシドニー出身のフロントエンド開発者である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 {}のようなセレクターの下ですべての

  sをターゲットにすることは、そのコードが記述されたときに機能する場合がありますが、他の多くのコンポーネントが.containerコンポーネントにネストされると、ULスタイリングは適切ではない場合があります。 BEMの方法論の中心にカプセル化と特異性があるため、コンポーネントと非特異的セレクター間の衝突の名前の名前を誤ってスタイリングすることを防ぐのに役立ちます。

  BEM方法論は、再利用のためにコードをカプセル化します

  英国のコンサルタントフロントエンドアーキテクト、デザイナー、開発者であるハリーロバーツは、BEMとクリーンCSSの領域のアイデアに多大な量を提供してきました。そのカプセル化を通じてウェブサイトを越えて：

  「BEMの方法論は、コンポーネントをあるコードベースから別のコードベースに移動する必要があるプロジェクトに理想的に適しています。 HTML、CSS、JSの1つのチャンクを別のプロジェクトに移動できるように、完全にカプセル化する必要があります。 5つの異なるサイトを持っている会社で働いていると想像しましょう。彼らはすべてホームページで同じカルーセルを必要としています。 BEMの方法論にそのカルーセルを書いて、それを一枚で拾って動き回ることができます。」

  コンポーネントベースのフォーカスを備えたフレームワークでうまく機能します

  シドニーのフロントエンド開発者であるジョシュハントは、同様のコンポーネントフォーカスを備えた他のフレームワークとうまく機能していることがわかりました。

  「BEMは、Webアプリのような自己完結型のウィジェットやコンポーネントがたくさんあるサイトに非常に適しています。 HTMLコンポーネント（Angular、React、Polymer/Webコンポーネント）を宣伝するフレームワークは、BEM方法論を適用するのがはるかに簡単になります。

  プロトタイプを配信する迅速な方法

  オランダのロッテルダム出身のフロントエンド開発者であるBob Donderwinkelは、「Bem CSSの利点」について素晴らしいプレゼンテーションを行いました。彼はBEMとの仕事で見つけた最大の利点を指摘しています：
  「私は半年間BEMに手を出しており、www.viewbook.comの新しいスクロールギャラリーページで、古いフラッシュサイトをHTMLバージョンに再加工するという2つのプロジェクトでそれを使用しています。これらのプロジェクトの設計は明確に定義されており、BEMを使用した最大の勝利はプロトタイプを迅速に提供することでした。そして、それは主に、ブロック、要素、および修飾子のデザインを「解読」すると、いくつかのCSSをコーディングするための素晴らしいスタートが得られるからです。

  あなたに二度考えさせます

  ジョシュ・ハントは、命名規則が複雑になる前によく考えてくれるのを助けることを発見しました：

  「少しugいものであるという事実のために、本当に長いクラスの名前を書くときによく考えさせるようになりました。」

  」

  あなたが計画していることを確認してください！

  ハミッシュ・タプリンはまた、新しいプロジェクトを開始する人々にこれらのアドバイスの言葉を提供しました：

  「プロジェクトを開始するときにある程度の計画があります。私はモックアップを経て、BEMモジュールに抽象化できるパターンを探す傾向があります。これは最初は難しい場合がありますが、古いパターンを再利用し始めるまで良くなります。コードの再利用は開発のニルヴァーナであり、あなたの上司があなたがより効率的であるために生産コストが下がるときにあなたに感謝すること！」

  あまりにも厳格にならないでください

  ジョシュは、BEMを使用することを目指しているときに、プロジェクトに制限が強すぎることを警告しています。

  「BEMに制限があると感じたり、奇妙なパターンに従うことを余儀なくされているように感じないでください。ハリー・ロバーツによるこれらの2つのツイートに惹かれています：

  それは、モジュール性、ドライ、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方法論の新規参入者にとっては

  に適しています

  クリスは、特に他の人に初期のバージョンのBEMとOOCSSを使用させるのに苦労していることに気付きましたが、SMACSSは説明しやすいものでした。

  「以前にCSS方法論に遭遇したことのない開発者に説明する方がはるかに簡単であることがわかりました。その方法論の価値とそれの使用方法。

  「私はしばらくベムで試しましたが、常に人々が混乱することがわかりました。 OOCSSを使用すると、人々の命名規則はしばしばあちこちにあることがわかりましたが、一般的にそれを手に入れました。 SMACSSは、クラスの目的が何であるかをすぐに見るのに役立つ分類を提供します。

  読みやすさ

  クリスはまた、BEMの初期バージョンが少し冗長であることを発見したが、それが時間の経過とともに発展しているのを見て、彼はここでSMACSを好む。

  「読書の観点からも、これらすべてのアンダースコアとダッシュ、ベムのクレイジーな長いクラスは私を遠ざける傾向がありました。方法論について、しかし、私はまだそれが私のためであるとは感じていません。

  すべてのプロジェクトでスケーラブル

  Chrisは、SMACSをより大きなサイトと比較して同じように完全に従う必要はないことも指摘しています。これにより、すべてのプロジェクトで柔軟性と適用性が可能になります。

  「さまざまな形のSMACSがすべてのプロジェクトに適していると言っても安全だと思います。 Snookが彼の著書に述べているように、小さなプロジェクトでは、おそらくテーマのようなものをカテゴリ（T-）として使用することはありませんが、レイアウトクラスをモジュールクラスから一目で区別できることはかなり価値があります。」

  SMACSとBEMを使用できます
  ハミッシュ・タプリンは、実際に彼のBEM内のいくつかのSMACSSの概念を使用して、ハイブリッドアプローチを取ります。私はかなりの数の開発者が2つの間にスイートスポットを見つけたことがわかったので、それは一方をもう一方よりも選択する問題ではないかもしれません：

  「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に適用されるオープン/クローズド原理
  そうしていない場合は、smacssガイド
  • をお読みください
  ハリー・ロバーツは、SMACSSガイドを読むことを強くお勧めします：

  「それを読んでください。 SMACSSは、ここ数年で出てきたフロントエンドの読書の最高のビットの1つであり、それが前進するロジックに反対することは非常に困難です。 BemとSmacssのホラーストーリー

  私は、開発者からいくつかのホラーストーリーと警告の言葉を得ようとしました。彼らが学習プロセスにいる間に彼らの失敗から学ぶことができる教訓です。ここに彼らの考えがあります。

  bem

  のalec Raeside

  「それは非常に学習曲線であり、概念的に理解するのはそれほど難しくありませんが、通常のCSS/SASSを書く習慣を変えるのに時間がかかります。純粋にコンポーネントに基づいた方法で考えないのは非常に簡単です。私は一年中ベムを書いてきましたが、それでも私はそれを書く方法を学んでアップグレードしているように感じています。時には、BEM以外のCSSと比較してBEMを使用してもう少しCSSを書く必要がありますが、迷惑なことを達成する必要がありますが、一貫性を持つことが最善です。

  「BEM自体は、可能な限り最善の方法を構築するのに十分ではありません。BEM、モバイルファーストCSS、SASSの適切な使用、厳格なコーディング標準を組み合わせます。私たちはそれを完璧にしていませんが、それは良くなっています。また、最近、SCSS-LINTを使用して、コーディング基準を実施し、BEMの使用量を程度は低くしました。

  smacssのクリス・ライト

  私のホラーストーリーのほとんどは、本当にホラーストーリーではなく、痛みの場所です。私は、より多くのOOCSSアプローチを続けたいと思う非常にブートストラップフレームワークの重い機関に遭遇しました（OOCSもかなり良いです）が、特定のフレームワークに付随するアプローチを少し使用するアプローチを使用している人を納得させようとしていますフレームワークを使用しないプロジェクトの方法論を調整することは、かなり無駄な議論であることです。だから私はそのような場合にそれを残さなければなりませんでした。 SMACSSの最大の弱点は、実際にはBEMやOOCSよりも広く採用されていないということです。

  「それを実装することに関する私自身の個人的な物語は、方法論のポイントに順守されていませんでした。 「モジュールのすべてのもの」のtrapに陥るのは非常に簡単で、提案されたカテゴリはまさにその提案であることを忘れてください。最も難しいのは、各カテゴリで資格があるものを理解することです。グローバルに使用されているプラ​​イマリボタンは、.M-BTN-PRIMARYと呼ばれるモジュールですか？それとも、モジュールに住んでいるものですか？方法論の使用を開始するとき、および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

  のハミッシュ・タプリン

  「BEMの最大の課題は抽象化に固有のものだと思います。時々頭を動かすことは難しい場合があります。抽象化できるパターンを見つけるためにある程度の計画が必要であり、最初に物を見つけられないときにリファクタリングする必要があることがあります。これは開発で一般的であり、計画と経験は大いに役立つ可能性があります。

  もう1つの固着点は、マークアップを完全に制御する必要があるということです。これが常に可能であるとは限らない環境（.NETなど）で作業している場合に困難になる可能性があります。」

  ハリー・ロバーツのベム

  「Bem NamingはGoodidea™であるため、ホラーストーリーを聞くことは非常にまれです。私が考えることができる最も近いのは、今年の初めに私の本当に素晴らしいクライアントと一緒に行われました。彼らは本当に勤勉なチームであり、多くの研究を行い、より良いCSSアーキテクチャを読みました。最も粗いスポットの1つは、BEMネーミングの実装でした。残念ながら、彼らは記事（永続的ではないという興味のために、私はここにリンクしません）を読んでいました。根本的に欠陥のある情報は、まったく間違っていました。クライアントはこのアドバイスに従って手紙に従い、それらをいくつかの本当のトラブルに陥れました。物事はかつてないほど絡み合って相互接続されていました。ベムの命名が解決することを意図しているものです！しかし、それは私が知っている唯一の事件です。」

  BOB DONDERWINKEL on Bem

  「まあ、私はそれをホラーストーリーと正確に呼ぶことはありません;）しかし、私はKabemと呼ばれる小さなBem足場ツールを作りました。私がそこで犯した間違いは、複数の要素（block__element__elementなど）を持つBEM CSSクラス名を使用することでした。主に、それがこれらのCSSクラス名に基づいて、うまくネストされたフォルダー構造を生成するのに役立ったからです。本質的に、私はCSSクラス名でHTML構造をキャプチャしていましたが、実際にはBEMがもう少し剛性になります。

  もう1つの小さなゴッチャは、SASS以下でできるようなネスティングBEM CSSセレクターを、実際には必要ない場合にCSSの特異性を追加することでした。 BEMは単一のクラス名として最もよく機能するので、それはおそらく心に留めておくべきことです。」

  結論

  全員の反応とアイデアを経験した後、最良のアプローチがハイブリッドのように思われたことは明らかでした。すべてを読んで、BEMとSMACSSの両方に心を開いて行って、CSSとワークフローが改善されるかどうかを確認します。 1つの方法論を選択する必要はありません。いくつかの方法論の概念を、あなたとあなたのチームのために働く方法に組み合わせます。あなたが助けを必要とするなら、いくつかの考えやアドバイスを喜んで共有する意思のある開発者がたくさんいます。

  クレジット

  私の質問に答えて考えや経験を共有するのに十分な時間をあきらめてくれた以下の開発者に非常に感謝しています：

  • alec raeside - ウェブサイト、Twitter
  • Bob DonderWinkel - Webサイト、Twitter
  • Chris Wright - Webサイト、Twitter
  • Hamish Taplin - Webサイト、Twitter
  • ハリー・ロバーツ - ウェブサイト、Twitter
  • ジョシュハント - ウェブサイト、Twitter

  BEMとSMACSS

  に関するよくある質問

  BEMとSMACSSの重要な違いは何ですか？

  BEM（ブロック、要素、修飾子）とSMACSS（CSSのスケーラブルおよびモジュラーアーキテクチャ）は、CSSを整理するための方法論です。 BEMは、CSSを読みやすく理解しやすくする命名規則であり、SMACSSはCSS組織にルールを提供するスタイルガイドです。 BEMはサイトの視覚的表現に焦点を当て、SMACSSは構造とレイアウトに焦点を当てています。 BEMはクラスに特定の命名規則を使用し、SMACSSはスタイルをベース、レイアウト、モジュール、状態、およびテーマの5つのタイプに分類します。 CSSに明確で理解可能な構造を提供することにより、スケーラビリティ。特定の命名規則を使用して、異なる要素とその親ブロックとの関係を簡単に識別できます。これにより、大規模なCSSコードベースの管理とスケーリングが容易になります。これにより、競合を命名する可能性が低くなり、コードの読み取りと理解が容易になります。 BEMはCSS特異性をどのように処理しますか？

  BEMは、スタイリングのIDSの代わりにクラスの使用を奨励することにより、CSSの特異性を処理します。これにより、セレクターの特異性が低下し、CSSが管理し、オーバーライドしやすくなります。 BEMはまた、ネストされたセレクターの使用を思いとどまらせます。これは、特異性を高め、CSSを維持するのを難しくすることができます。SMACSSはCSS特異性をどのように処理しますか？ CSSを構成します。 IDを介したクラスの使用を促進し、ネストされたセレクターの使用を思いとどまらせます。これにより、特異性を低く保ち、CSSを管理し、オーバーライドしやすくするのに役立ちます。
  BEMを実装することの課題は何ですか？長く複雑なクラス名。これにより、HTMLとCSSが読み取りと理解を難しくすることができます。ただし、これはSASS以下のようなプリプロセッサを使用することで軽減できます。これは、BEMクラスを管理および簡素化するのに役立ちます。 SMACSを実装する課題は、CSSとそのベストプラクティスを十分に理解する必要があることです。また、CSSを作成および整理するための規律あるアプローチも必要です。ただし、そのハングを取得すると、SMACSはCSSをより効率的かつ維持しやすくすることができます。
  BEMはコンポーネントベースのデザインをどのように処理しますか？ - 個々のコンポーネントと考えることができるブロックの使用を促進するため、ベースの設計。各ブロックは独立しており、サイト全体に再利用できます。これにより、BEMはコンポーネントベースの設計アプローチを使用するサイトに適した選択肢になります。

以上がBEMとSMACSS：そこにいた開発者からのアドバイスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。