0

一部の SCSS をリファクタリングしていますが、SCSS ファイルで BEM 構文を使用するとネストの問題が発生します。

私の lint ルールでは、3 レベルを超えるネストは使用できないと規定されています。

ただし、SCSS ファイルの修飾子セレクター内の要素をターゲットにしたい場合があります。

これが私のアプローチです：

.block {
    &__element {
        &--modifier {
            &::after {
                // Four levels deep :(
            }
        }
    }
}

これは私がそれを回避する唯一の論理的な方法です：

.block {
    &__element {
        &--modifier {
            // Three levels deep
        }

        &--modifier::after {
            // Three levels deep
        }
    }
}

修飾子のクラス名を繰り返すのは好きではないので、私はこのアプローチのファンではありません。

これに対するより良い解決策はありますか？

4

1 に答える 1

2

linting ツールの目的は、開発者に保守可能なコードを開発することをやさしく強制することです。いくつかの (おそらく読み書きが難しい) 回避策を実行することは、この目標の正反対です。

4 つのレベルが目標を達成するための最もクリーンな方法である、完全に有効なユース ケースを提供しました。したがって、次のいずれかを行う必要があります

lint ルールを調整する (.scss-lint.yaml)

  NestingDepth:
    max_depth: 4

または（それほど頻繁に発生しない場合）インラインで警告を無効にします。

// scss-lint:disable NestingDepth
于 2016-08-05T15:59:17.013 に答える