2016-06-15 27 views
1

Organisieren der HTML-Struktur und Anwenden von CSS. Was nicht in Konflikt mit anderen CSS steht.Bessere Methode zum Anwenden von CSS auf das Zielelement

Welches ist die bessere Methode, um das CSS auf das Zielelement anzuwenden?


Way 1:

.PARENT_1 .CHILD:first-child { 

} 

<div class="PARENT_1"> 
    <div class="COMMON"> 
     <div class="CHILD"></div> <!-- Targeted element --> 
     <div class="CHILD"></div> 
    </div> 
</div> 

Way 2:

.PARENT_1_CHILD_1 { 

} 

<div class="PARENT_1"> 
    <div class="COMMON"> 
     <div class="CHILD PARENT_1_CHILD_1"></div> <!-- Targeted element --> 
     <div class="CHILD"></div> 
    </div> 
</div> 

Jede andere Art und Weise zu verbessern CSS-Spezifizität?
Kann ich Bem Methode verwenden?

+0

IMO, gibt es keinen besseren Weg. Es hängt davon ab, wie einfach es ist, es zu implementieren, zu skalieren, wiederzuverwenden und zu lesen. Aber am Ende muss es das gewünschte Layout liefern. – choz

+0

Mein Vorschlag, ich werde mit Weg 1 als was, wenn alle Kinder kommen dynamisch, dann können Sie nicht andere Klasse zu allen Kindern so besser gehen mit Weg 1 und verwenden Sie mit Kind, aber beachten Sie, es hängt von Bedingung und Bedarf von Kunden/von Ihnen. –

+0

'.COMMON CHILD: first-child' Verwenden Sie camelCase oder Kleinbuchstaben mit Bindestrichen, um die Lesbarkeit zu verbessern. Häufige Verwendung von Großbuchstaben wird die Betonung verringern, die es normalerweise impliziert. – zer00ne

Antwort

1
  1. Wenn Sie CSS nur für jeweils ein Element anwenden möchten, verwenden Sie eine ID für das Element, z.
  2. Wenn Sie nur ein in ein div eingepacktes Element adressieren, können Sie es wie folgt in css schreiben: #divname> # something.a (wenn # something.a das erste Element innerhalb des Wrapperdivs ist) ODER ** einfach #divname # something.a - dies wird das Element mit der ID irgendwo innerhalb des Wrapperdivs finden.

Ich hoffe, Sie haben den Punkt verstanden. :)