問題タブ [bem]

HTML と CSS を切り離すために BEM 手法を使い始めましたが、ほとんどの場合、うまく機能しています。あくまで個人的な意見ですが、他の人がどう対処しているか知りたいです。

簡単なナビゲーションを構築する必要があるとしましょう。HTML は次のようになります。

「.nav_ item」と「.nav _link」が必要なのか、それとも代わりにこれを使用した方がよいのかわかりません

しかし、私の本当の問題は、「アクティブな」クラスをどのように処理するかです (ナビゲーションだけでなく、一般的に)。「.nav_ item--active」のような特定の「アクティブな」クラスを使用する方がよいので、CSS ファイル内で単一のクラスを使用できますか、それとも「.is-active」のようなより一般的なクラス名を使用する方がうまくいくでしょうか? ただし、「.nav _item.is-active」または (私にはさらに悪いように見えます)「.nav__list > .is-active」のように、CSS ファイル内でクラスを指定する必要があります。

どの方法にも欠点があります。BEMを使用している場合、2番目の方法は間違っているように見えますが、最初の方法を使用する場合、特定のクラス名をJSに「ハードコード」する必要があるため、JSで「トラブル」に遭遇します

そうすれば、あなたの JS は HTML 構造に依存しすぎます (または、これはあまり重要ではありませんか?)。これは変更される可能性があります...そして、これは 2 番目の質問につながります。HTML と CSS だけでなく、HTML と JS もデカップリングするとよいと聞きました。したがって、たとえば、これらの「.js-」クラスを使用して、「スタイリング」クラスを使用してそのようなイベントをトリガーする代わりに、クリックイベントやそのようなすべてのものを要素に追加できます。したがって、使用する代わりに

あなたが持っているだろう

これを HTML5 のデータ属性と組み合わせると、たいていの場合はうまくいくと思いますが、ナビゲーションやアコーディオンなどはどうなるのだろうかと自問自答しています。それらの「.js-」クラスも（アイテムごとに）使用する方が保守性に優れていますか？

または、この場合、JSで $(".nav__item")... を使用する必要がありますか? しかし、そうすると、HTML と JS を実際に切り離すことはできません (少なくとも、このトピックを理解している限り)。ナビゲーションだけでなく、アコーディオンやスライダーなど、あらゆる種類の JavaScript インタラクションが対象です。

皆さんがこれらの質問に対するベスト プラクティスを共有し、私を助けてくれることを願っています。

ありがとう

私は2つのモジュールを持っています:

.master-headerと_.header-nav

はの.header-nav内部に.master-headerあり、単純なナビゲーションです。

私の.header-navモジュールではheight、aをli100 ul% に設定し、heightを.header-nav内100pxから設定します.master-header。これは、その子のレイアウト スタイルがどこに属すべきかについて論理的に正しいためです。

aさて、テキストを's内で垂直方向に中央揃えにしたいので、問題が発生します。行の高さはこれに最適ですが、100% はフォントの高さであるため、100% は機能しません。line-height: 100px問題を解決するために使用するのに最適なものですが、それを.header-navモジュール内に配置するのは間違っているようです。これは、 ALL.header-navがそのようであるべきであることを示しているためです。できれば50%とか言いたいところですpadding-top: 50%が、商品の幅にもよるので無理です。

何をすべきかについて何か考えはありますか？

ニール

私は CSS を整理するための CSS 方法論として BEM を使用し始めており、プロジェクトの過程で、ほとんどすべてがモジュールに変わりました。

モジュールのレイアウト スタイルを親モジュールに配置しました。それはうまく機能しています。

私を混乱させていて、把握できないのは次のようなものです:私が次のものを持っているとしましょう:

したがって、この段階では、BEM の規則に従って、モジュールの親クラス名を独自のモジュール名に追加します。

次に、それぞれに唯一のモジュール名を追加します。

これは正しく見えますか？

各モジュール スタイルを保持する個々のファイルを何と呼びますか?: - picture-box.sass - picture-holder.sass - picture.sass - caption.sass

このように入れ子になるたびに、ほとんど意味のないモジュール、または「画像」、「画像」、「ボックス」、「キャプション」などの一般的すぎるモジュールになってしまうようです

階層の上位で同じ問題が発生します。したがってdiv、サイトの周りにラップがある場所、たとえば: .container、今は.container-header、.container-mainおよびがあり.container-footerます。

私は BEM の背後にある主な概念とモジュール内のすべてが好きですが、それは私が混乱するモジュール内のモジュールです。

BEM を説明しているすべての記事は、これについては決して話さず、この問題に当たらない非常に単純な例を示しています。

私はそれを間違っていますか？

私は基本的に、このテーマに関する人々のアイデアと、どのように改善できるかを知りたいのですか?

これまでに見たすべてのチュートリアルでは、単一ページのサイトまたは複数のバンドルを作成する方法について説明しています。簡単な Web サイト ナビゲーションの例を次に示します。

• example.com/home
• example.com/about
• example.com/services
  • example.com/services/marketing
  • example.com/services/development
• example.com/contact

このようなサイトを bem-tools、bemjson、bemhtml で構築できますが、node.js や php などのサーバー側の技術は必要ありませんか?

ビルドには、ページごとに最終的な .html、.css、.js ファイルと画像を含むディレクトリのみを含める必要があり、Amazon S3 などの静的ファイル ホスティングでホストする必要があります。また、単一ページの ajax サイトではなく、昔ながらの静的な Web サイトである必要があります。

このユースケースに使いやすいソリューションはありますか?それとも、バンドル ディレクトリからファイルを収集するために独自のビルド プロセスを作成する必要がありますか?

私はBEMについて頭を悩ませようとしていますが、最も基本的なことでさえ問題があります。メニューなど。

このコードを検討してください

ulはブロック、li要素ですが、そのアンカーはどうすればよいでしょうか? li私はスタイルとaスタイルの両方が必要なので、li少なくともインラインになるようにスタイルを設定する必要があり、aブロックなどである必要があります。aaを作成することはできますが、css で要素セレクターを使用しないことになっているので、.menu_itemどのようにスタイルを設定すればよいでしょうか。とコンボ、無意味..li.menu li {}diva

では、これを「正しい」bem方法で行うにはどうすればよいですか?

Nicolas Gallaghers のHTML セマンティクスに関する記事で、彼は html と css をモジュラー方式 (BEM アーキテクチャの影響を受ける) で構造化する方法を概説しています。彼は例を挙げていますが、私には完全には理解できません:

• まず、私が理解していないのは、ユーティリティとコンポーネントの違いは何ですか?
• そして、これら 2 つの表記の違いはどこから来るのでしょうか (ユーティリティ クラス名の前に「u-」が付きます)。
• 最後; 状態と修飾子の違いは何ですか (両方とも別の表記法があります)?

彼は彼の記事でこれについて詳しく説明していませんが、私はまだ理解したいと思っています. だから誰かがこれに答えてくれることを願っています。

BEM の命名規則に頭を悩ませようとしています。私はこれで立ち往生しています。私は何かを誤解しているかもしれません、見てみましょう。

サイドバー ナビゲーションとコンテンツ ナビゲーションがあります。

私のサイドバーのナビゲーションは次のようになります

そして、私のコンテンツナビゲーションは次のようになります

.nav__item のスタイルを設定すると問題が発生します。これらは両方のナビゲーションで発生し、同じスタイルにするべきではありません。ここでネストを行う必要がありますか、それともブロックと要素の名前を間違っていますか?

CSS での入れ子の例:

または、次のように名前を付ける必要があります。

手伝ってくれますか？

私はhtml + cssを書くためにBEMアプローチを使用しています。この構文では:

• ブロック: block_name
  • 要素: block_name__element_name
  • モディファイア: block_name__element_name -- モディファイア

別のブロック内にブロックがあると混乱します。たとえば、ヘッダーでは、ヘッダーを参照できるブロックにし、nav とロゴをブロックにしたいと考えています。これらのナビゲーション ブロックとロゴ ブロックを、site_header 内にあるものとして参照したいと思います。でも、どうやって書くの？block_name__sub_block_name のようなブロックの連鎖はかなり長いようです。

誰かがこの例を書く典型的な方法を持っていますか?