6

BEM や SUITCss などの CSS 命名規則の背後にある理由を取り上げて理解しようとしています。SCSS が存在する場合、子孫クラス名の値を理解するのに苦労しています。

例えば：

<ul class="menu">
    <li class="menu__item"></li>
    <li class="menu__item"></li>
    <li class="menu__item">
        <a href="#" class="menu__item_link">link</a>
    </li>
</ul>

.menu {
    .menu__item { 
      //styles
      .menu__item__link { //styles }
    }
    //or alternatively this syntax..
    &__item { //styles }
}

SCSS でルールをネストする機能があるため、祖先クラス名をコードに含める説得力のある理由がわかりません。上記では、子孫クラス名を使用して、「メニュー」内にある「項目」にのみ使用するスタイルを定義しました。しかし、ネストされた構造はすでにこれを伝えています! とにかく、menu__item のルールはメニューの下の項目にのみ適用されるのに、なぜそれをクラス名に含める必要があるのでしょうか?

なぜだめですか：

<ul class="menu">
    <li class="item"></li>
</ul>

.menu {
    .item {//styles}
}

子孫の命名規則がより明示的で、おそらくより将来に適していることを理解しています。ただし、それは html でより明確になっているだけだと私は主張します。この「メニュー」モジュールの作成方法を調べたい場合は、CSS を調べるだけで、メニュー内に項目がどのようにネストされているかを明確に確認できます。

考えられる利点の 1 つは、次のようにネストされていない CSS を記述できることだと思います。

.menu { //styles }
.menu__item { //styles }
.menu__item__link { //styles }

そして、どこでも「menu__item」を使用すると、これがメニューの下のアイテムのスタイリングであることがクラス名で明示されます..しかし、なぜそれをメニューの子孫として定義するのでしょうか? (別の利点は、ネストされていない場合の CSS 識別子文字列が短いことだと思います)

クラス名が別のクラス名の子孫として使用される場合、SCSS でのネストによってこれが達成され、そのロジックが明確に示されるように思えます。では、なぜこの BEM 構文が必要なのでしょうか?

この種の規則の理由を誰かに説明してもらいたいです。いわゆるベスト プラクティスを遵守したいのですが、規約を完全に理解せずにやみくもに遵守することは困難です。

4

2 に答える 2

3

BEMまたはSMACSSのアイデアから始めましょう。

方法論が解決する主なタスクは、コードの構造化とモジュール化です。

たとえば、BEM は次の抽象化を使用します。

ブロック- UI の独立した部分 (フィードバック フォームなど)、

要素- ブロックの一部はブロックなしでは存在できません (フィードバック フォーム ボタンなど)。

Modificator - ブロックまたは要素を変更できるヘルパー (ボタンを大きくしたり小さくしたりするなど)。

SMACSS は、モジュール、レイアウト、ベース、状態、テーマなど、さまざまな抽象化を使用します。アイデアを明確にするために、HTMLページにロジックレイヤーが含まれていると想像してください。

1) BASE - CSS リセットを追加し、H1、H2 ... のフォント サイズを定義し、色を定義します。したがって、ベースには、変更する必要があるものを入れます。

2)レイアウト- グリッドを追加するか、リージョン内に別のページを追加します。3) モジュール - 独立したコンテンツ アイテム

3)状態- BEM モディフィケーターに非常に近いが、is_hided、is_collapsed などのモジュールのアクションに関連している

4)テーマ- BASE オーバーライドに使用できます。

したがって、この抽象化を分離するには、いくつかの命名規則に従わなければならないため、一見しただけでこのクラスの機能を理解できます。命名規則に従えば、project6 の維持もはるかに簡単になり、新しいチームメンバーに、コードの編成方法や、1 人が書いたように見える新しいコードの書き方を簡単に説明できます。

大規模なチームによる大規模なプロジェクトでは非常に重要です。

さらに、命名規則により、子孫セレクターの数を減らすことができ、パフォーマンスが向上します。

于 2014-07-15T12:58:50.857 に答える