問題タブ [oocss]

私の質問はこれとは異なりますが、同じ原則に関するものであるため、この引用はここでも関連しています。

https://github.com/stubbornella/oocss/wikiから

本質的に、これは「場所に依存するスタイルをめったに使用しない」ことを意味します。オブジェクトは、どこに置いても同じように見える必要があります。したがって、特定の h2 を .myObject h2 {...} でスタイリングする代わりに、h2 class="category" のように、問題の h2 を記述するクラスを作成して適用します。

しかし、オブジェクトが特定のコンテナー内にあるときにオブジェクトのスタイルが変更されるように設計されている場合はどうなるでしょうか? これが私の問題の簡単な例です。foo というオブジェクトと、bar というコンテナー オブジェクトがあるとします。foo と bar には、場所に依存しない独自のスタイルがあります。

しかし、このように foo がコンテナー bar 内にある場合、ユーザーが bar にカーソルを合わせたときにその色を変更する必要があります。

この場合、次のような場所依存のセレクターを書くことは避けられないようです。

私が考えた解決策の 1 つは、bar に明示的に依存するクラス (親子関係を明示するためにBEM 命名規則を使用して名前を付けたもの) を導入し、それを foo オブジェクトに追加することです。

確認したいのですが、これは問題を処理する良い方法ですか? OOCSSにも他の方法はありますか?

メインの CSS をモジュラー アプローチにリファクタリングしながら@media all {}、IDE で CSS モジュールをラップするために使用しています。現在、less や sass などのプリプロセッサを使用できないため、このアプローチにより、ファイルのコンテンツをスキャンすることがはるかに簡単になります。

私の唯一の懸念は、これらすべてのメディア クエリ (各 css モジュール / コヒーレント セレクターのセットごとに 1 つ) によって、サイトのレンダリング中にパフォーマンスが低下する可能性があることです。css ファイルのファイル サイズについては心配していません。これは、スリムなモジュラー css フレームワークと適切な圧縮による小さな問題です。

メディア クエリ@media all {}を頻繁に使用すると、パフォーマンス (デスクトップとモバイル/その他のデバイスの両方) に影響がありますか?

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

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

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

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

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

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

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

I'm trying to recreate the OOCSS media object in order to show an image next to some text. The media object uses overflow: hidden to create a new block formatting context. This makes sure that the text doesn't wrap around the image.

However when my media object is positioned absolutely Firefox renders the text different from Chrome and Internet Explorer. Firefox seems to base the width of the media box solely on the width of the text instead of both the width of the image and the width of the text.

Chrome and Internet Explorer (imho expected behaviour)

Firefox

See this codepen for the extended example.

I was wondering if anyone knew if there is a workaround for this and perhaps why Firefox renders this differently.