11

SO OOCSSに問題があります。より移植性が高いはずですが、私が通常行っている方法と比較すると、移植性が低いと感じています。

私の例：

ウィジェットの証言があります。メイン コンテンツの本文 (背景が白) では、証言のフォントが黒になっています。ただし、フッター (青色の背景) では、証言に白いフォントが必要です。

OOCSS の前は、次のようなことをしていました。

#main-content .testominial {
  color: #000000;
}
#footer .testominial {
  color: #FFFFFF;
}

この「古い」アプローチでは、ウィジェットをコンテンツ領域からフッターにドラッグするだけで、色が簡単に機能します。ウィジェットの CSS または DOM クラスを変更する必要はありません。

新しい OOCSS/BEM では、.testimonial クラスを ID (または場所) に結合することは想定されていませんが、次のようにサブクラス化する必要があります。

.testominial {
  color: #000000;
}
.testominial--footer {
  color: #FFFFFF;
}

これに関する問題は、DOM に入って証言ウィジェットのクラスを変更しないと、コンテンツ領域からフッターに証言をドラッグできなくなったことです。開発者による手動の介入が必要なため、移植性が低くなります。一方、編集者がドラッグするだけでスタイリングが自動化される前は.

何か不足していますか？そこには確かな実例がないように思われますか？

4

2 に答える 2

5

testimonialと同様にネーミングを削除することを検討する必要がありfooterます。

次の例を検討してください。

.primary-box { }
.primary-box--reduced { }
.primary-box--standout { }

この例では、クラスはページ コンテキストから完全に独立しています。その結果、クラスは完全に再利用可能になります。ページ上の任意のボックスは、上記のクラスを取得でき、定義どおりにスタイルが設定されることが期待されます。

たとえば、次のようにすることができます。

<header>
    <div class='primary-box primary-box--reduced'></div>
</header>
<div class='content-box'>
    <p class='primary-box primary-box--standout'></p>
</div>
<footer>
    <div class='primary-box primary-box--reduced'></div>
</footer>

デザイナーが戻ってきて目立つボックスのパディングを微調整すると、それらのスタイルに直接移動して微調整できます。影響を受けるのは、HTML 内のこれらのクラスを持つ領域だけであると確信できます。

また、.primary-box--reducedからその<header>上にあるメニュー バーまたはフッターに移動する場合、スタイルが完全に適用されると確信できます。

どこかに別の要素が必要な場合、おそらく、またはヘッダーprimary-box--standoutのデフォルトだけが必要な場合は、それを作成してクラスを追加するだけで、スタイルは完全に従います。primary-box

予期しないスタイルを継承することもありません。

これは非常に現実的な例です。私が最近構築したサイトはほとんどすべてこのように構築されていました。ほとんどすべてと言うのは、まだ学習中だからですが、動きの速いプロジェクトで最も問題が少なかったビットを保証できます。非常に流動的なデザインを持つものは、非特定のコンテキストを持つものでした.

重要なのは文脈の欠如です。最初の例で.testimonial--footerは、非常にコンテキストに依存しているため、実際にはフッターのみの証言に使用する必要があります.

そしてまるで魔法のようにCSS Wizardry がまさにこのトピックをカバーしているかのように

編集:この例を追加して、回答に対するコメントを支援しました。これは BEM や OOCSS ではありませんが、SMACSS アプローチに少し近いものです。これは私が css で問題に取り組む方法であり、ハイブリッド BEM / SMACSS アプローチです。

順番にロード:

  • などのモジュールファイル.primary-box
  • .headerまたはなどのページ セクション ファイル.call-to-action
  • .about-usまたはなどのページファイル.contact

各ファイルはより具体的になり、同時により複雑なモジュールを構築します。上記の例に基づいて構築し、うまくいけば OP を支援すると、次のようなスタイルが表示されます。

.header {
  .primary-box {
    color: #000;
  }
}

これは、より具体的なネストされたクラス表記を使用してモジュール スタイルをオーバーライドします。私はまだ次のようなクラス名を使用しないことに注意してください.header-.banner-standout混乱することなくどこでも再利用できるため、より良いでしょう

次に、次のことも確認できます。

.about-us {
  .header {
    .primary-box {
      color: #f00;
    }
  }
}

これは、BEM のコンテキストフリーの力を維持しながら、実際のプロジェクトでコンテキストに対して非常にうまく機能することがわかりましたが、このチェーンをモジュールにプッシュすることもできる限り強くお勧めします。新しい一般的なページ セクションまたはモジュールを認識し、名前とファイルを適切に再編成すると、作業が楽になります。コードが慎重にリファクタリングされたプロジェクトでは、ページ ファイルに何もありません。

于 2015-06-30T19:58:03.360 に答える
2

この「古い」アプローチでは、ウィジェットをコンテンツ領域からフッターにドラッグでき、色は簡単に機能します。ウィジェットの CSS または DOM クラスを変更する必要はありません。

.testominial要素をコンテナ.main-contentからコンテナに「ドラッグ」.main-footerすると、DOM が変更されます。したがって、CSS クラスの修飾子を更新することもできます。追加料金はかかりません。

BEM の目的は、CSS クラスを再利用可能にすることです。次の修飾子は、さまざまな環境で再利用できます。

CSS:

.testominial {
}
.testominial--darkFg {
    color: #000;
}
.testominial--lightFg {
    color: #FFF;
}

HTML:

<main class="main-content">
    <div class="testominial testominial--darkFg">...</div>
</main>
<footer class="main-footer">
    <div class="testominial testominial--lightFg">...</div>
</footer>

.testominial古いアプローチでは、新しいコンテナーに新しいブロックが必要になるたびに、CSS コードを変更する必要があります。HTML と CSS は強く結合しており、一部の CSS コードが重複しています。

BEM アプローチでは、デザイナーがブロックの外観の新しいバリエーションを追加するたびに、いくつかの CSS コードを追加する必要があります。HTML と CSS はあまり結合されておらず、CSS はよりよく再利用されています。

于 2015-05-28T09:58:36.320 に答える