Elegant Targeting ein Element innerhalb eines Selektors drei Verschachtelungsebenen tief, ohne Beinting-Regeln zu brechen

Question

Ich bin einige SCSS Refactoring, und ich habe eine Verschachtelung Problem mit BEM-Syntax in meinen SCSS-Dateien.

Meine Linting-Regeln geben an, dass ich nicht mehr als drei Ebenen der Verschachtelung verwenden kann.

Manchmal möchte ich jedoch ein Element innerhalb eines Modifikator-Selektors in meiner SCSS-Datei anvisieren.

Das ist mein Ansatz:

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

Dies ist der einzige logische Weg ist, ich um ihn zu sehen:

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

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

ich kein Fan dieses Ansatzes bin, weil ich die Wiederholung nicht mögen Modifikator Klassenname.

Gibt es dafür eine bessere Lösung?

Answer 1

Der Zweck eines Linting-Tools besteht darin, Entwickler dazu zu zwingen, einen wartbaren Code zu entwickeln. Es ist das genaue Gegenteil dieses Ziels, wenn Sie eine Workaround (wahrscheinlich schwerer zu schreiben und zu lesen) machen.

Sie haben einen vollständig gültigen Anwendungsfall angegeben, bei dem 4 Stufen der sauberste Weg sind, um das Ziel zu erreichen. Daher sollten Sie entweder

stellen Sie die Fusseln Regeln (.scss-lint.yaml)

NestingDepth: 
    max_depth: 4 

oder die Warnung inline (wenn es nicht auftritt, dass oft) deaktivieren:

// scss-lint:disable NestingDepth