SCSS - Ausgeschlossene Container aus einer Reihe von Stilen

Question

Ein Problem, das ich viele Male mit ul-Elementen geschlagen habe (angesichts der Tatsache, dass sie für semantische Zwecke so häufig verwendet werden, z. B. Top-Navigation), ist das versucht zu setzen allgemeine Stile für die textuelle Verwendung von ul-Elementen ist sehr fummelig, um zu vermeiden, dass die anderen Verwendungen durcheinander gebracht werden, oder umgekehrt. Im Allgemeinen ich dieses Problem lösen, indem nur innerhalb der Hauptseiteninhalt Wrapper enthalten einen speziellen Satz von Stilen, zB:

#page-wrapper { 
    ul, ol { 
     padding-left:1.6em; 
    } 
} 

Aber das Problem, das ich getroffen habe, ist, dass innerhalb der Hauptseite Wrapper, ul Elemente verwendet für bestimmte Zwecke (z. B. durch Plugins wie gewählt), haben ihre eigenen Satz von rein kosmetischen Stilen angewendet. Es wäre schön, eine saubere Lösung für dieses Problem zu haben. Früher wie zurück, wenn roh CSS zu schreiben, würde ich muß ausdrücklich die Stile wieder außer Kraft setzt wieder, wie:

.chosen-container ul { 
    padding-left:0; 
} 

Aber diese, vor allem es für jedes Element zu tun, scheint sehr chaotisch. Ich habe folgendes versucht:

#page-wrapper { 
    :not('.chosen-container') { 
     ul, ol { 
      padding-left:1.6em; 
     } 
     ........ 
    } 
} 

... aber es hatte den Effekt der Neutralisierung aller ul Elemente Stile überall.

Hat jemand eine elegante Lösung dazu gefunden? Hier zu googeln und zu suchen war bisher fruchtlos.

Answer 1

Generell schreibe ich es in umgekehrter Reihenfolge. Setzen Sie die Standardwerte auf null und fügen Sie dann nur für sehr spezifische Kontexte Aufzählungszeichen und Auffüllzeichen hinzu.

Nahezu alle Plugins setzen Ihren LI so, dass er anzeigt: block und/oder float: left. Dies sollte die Anzahl der Male, die Sie Kugeln in Ihrem CSS entfernen müssen drastisch reduzieren. Es ist ein bisschen weniger Code zu pflegen, aber erfordert, dass Sie eine gewisse Kontrolle über das HTML haben, so dass Sie einen Selektor für den Text-Container oder in der Liste hinzufügen können, die Aufzählungszeichen erfordert.

Here'an-Beispiel. https://jsfiddle.net/L252LwL0/

ul { margin:0; padding:0; list-style-type:none; } 
li { display:block; } 

.textblock ul { padding: 0 40px; list-style-type:circle; } 
.textblock li { padding: 10px 0; display:list-item; } 

Normalerweise ändere ich die Farbe der zu Kugeln. Nur weil es ein kleines bisschen Branding ist. https://jsfiddle.net/L252LwL0/1/

Um klar zu sein, ich schlage vor, Sie entfernen alle Stile von allen ULs, dann fügen Sie nur einmal zurück, die, die Sie brauchen.

Answer 2

Eine andere Lösung könnte sein, :not([class]) hinzuzufügen, die alle Elemente mit einer Klasse ausschließt.

https://jsfiddle.net/kLLky4zL/

div:not([class]) { 
    background: blue; 
}