Stylowanie po potomkach vs stylowanie po klasie

Question

Zastanawiam się co byłoby lepszą praktyką. Mamy dwie wersje kodu który robi to samo.

1.

<ul class="navigation-list">
	  <li><a href="page1.html">Strona1</a></li>
	  <li><a href="page1.html">Strona2</a></li>
	  <li><a href="page1.html">Strona3</a></li>
	  <li><a href="page1.html">Strona4</a></li>
	</ul>

.navigation-list a
		 {
		   color: green;
		 }

2.

<ul class="navigation-list">
	  <li><a class="navigation-link" href="page1.html">Strona1</a></li>
	  <li><a class="navigation-link" href="page1.html">Strona2</a></li>
	  <li><a class="navigation-link" href="page1.html">Strona3</a></li>
	  <li><a class="navigation-link" href="page1.html">Strona4</a></li>
	</ul>

.navigation-link
		 {
		   color: green;
		 }

Jak sądzicie, który sposób stylowania byłby lepszy i dlaczego?

Answer 1

Zdecydowanie drugi, bo utrzymujemy płaską specyficzność i dodatkowo wprowadzamy do kodu warstwę abstrakcji, dzięki czemu nie pojawia się problem tight-couplingu HTML z CSS-em.

Comments

Czyli chodzi o to, że ".navigation-list a" będzie miało wyższą specyficzność niż np. ".navigation-link". A nam zależy na tym aby ta specyficzność była równa, jednolita czyli jak kolega wyżej wspomniał płaska.

Pisząc o tight-coupling'u masz na myśli to, że w pierwszym przypadku kod css jest mocno powiązany z html'em i dokonanie zmian w tym kodzie html spowodowałoby zmiany w stylach css. Czego nie można powiedzieć o drugim przypadku.

---

".navigation-list a" będzie miało wyższą specyficzność niż np. ".navigation-link". A nam zależy na tym aby ta specyficzność była równa, jednolita czyli jak kolega wyżej wspomniał płaska.

Tak.

 Pisząc o tight-coupling'u masz na myśli to, że w pierwszym przypadku kod css jest mocno powiązany z html'em i dokonanie zmian w tym kodzie html spowodowałoby zmiany w stylach css. Czego nie można powiedzieć o drugim przypadku.

Dokładnie 

---

No i fajnie :)