O mică notă despre selectorii CSS

Am văzut următoarea chestie de foarte multe ori:

#header #topNav ul li a {
/* some css properties */
}

Pentru un markup de genul:

<header id="header">
	<nav id="topNav>
		<ul>
			<li><a href="#">Menu item</a></li>
			[...]
			<li><a href="#">Menu item</a></li>
		</ul>
	</nav>
</header>

Unde este problema?

Problema este că, în cazul în care specificăm mai multe stiluri, repetăm excesiv:

#header #topNav ul li a:hover {}
#header #topNav ul li.active a {}

Apoi, dacă o luăm logic, vedem că #topNav nu poate fi decât în interiorul #header, li nu poate fi decât într-un ul (în contextul dat), care, la rândul lui, este în #topNav. De asemenea, a nu poate fi decât în… li. Are sens?

Cum e corect?

#topNav a {}
#topNav .active a {}

Arată mult mai frumos, nu?

13 Comentarii to “O mică notă despre selectorii CSS”

  1. Pe langa faptul ca arata mult mai frumos, este si mai eficient.

  2. cu cat ii pui mai detaliati ii gaseste mai usor. dar stai linistit ca nu de asta gasesti cod de genul, cel mai des e de la copy, paste, add, copy, paste

  3. da bine si daca vrei sa adaugi o imagine ca fundal cu colturi rotunjite trebuie automat sa specifici
    #topnav li…
    #topnav li a …
    si de multe ori este posibil sa mai dea erori in IE si/sau Opera daca specifici doar asa simplu

  4. Pana la urma nu este tocmai o “problema”, ci tine de stilul fiecaruia. Personal imi place varianta cu #header pentru ca vad si gasesc mai usor sectiunea selectorului… ma rog, fiecare cum s-a obisnuit :)

  5. Staicu Ionuț-Bogdan

    @Liviu: ba este o problemă. Pentru că reduci drastic posibilitățile de a refolosi cod. Modul în care pui acoladele este o chestiune de stil și despre cum e obișnuit programatorul.

    De exemplu, dacă ai `#header nav` și `#footer nav` (cum au multe site-uri, meniu și în susul și în josul paginii) și au aproximativ aceleași stiluri, va trebui să scrii de două ori:

    #footer nav li { float:left }
    #header nav li { float:left }
    

    În loc de:

    .sitenav li { float:left }
    

    Cred că înțelegi unde bat.

  6. si daca vrei stiluri diferite….

  7. #footer nav li { float:left }
    #header nav li { float:left }

    #footer nav li, #footer nav li { float:left } nu merge?

  8. Staicu Ionuț-Bogdan

    @cyb: pierzi esența. .sitenav li mi se pare mai scurt decât ce ai scris tu. Și reutilizabil.

    @iulian: dacă vrei stiluri total diferite, da, e ok să te adresezi fiecărui grup de elemente în parte. Dar am avut de atât de puține ori situația asta încât zic că e mai ok să rămâi… DRY :)

  9. pe vremea când se mai purta css inclus în fișierele .html, n-aș fi zis nimic.
    dar așa, nu mă pot abține să nu întreb de ce dracu faci tabelul în html, când îl poți face fain-frumos în css???
    doar pentru compatibilitatea cu IE??? :)))

    în ce privește clasa, ai dreptate, cu o nuanță:
    – dacă aplici unul și același stil mai multor tabele (sau elemente), definești o clasă, și gata.
    – dacă e nevoie să aplici stiluri diferite la mai multe tabele sau elemente, altfel identice, clasa nu e decât o nouă sursă de peri albi sau lipsă :D

    bineînțeles, nu ajungi să gândești așa până nu scrii de mânuță tot codul, că de făcut c/p știe toată lumea! :)))

  10. Ionut, nu inteleg ce e cu clasa .sitenav li si de unde a aparut.

    “De exemplu, dacă ai `#header nav` și `#footer nav` (cum au multe site-uri, meniu și în susul și în josul paginii) și au aproximativ aceleași stiluri, va trebui să scrii de două ori.”

    Eu am adaugat ca se pot scrie cu virgula, nu de 2 ori.

  11. aoleu, acum mi-am dat seama… am scris ”tabel„ în loc de ”listă„…

  12. Staicu Ionuț-Bogdan

    @Cyb: păi… adaugi o clasă :)
    @Mifty: huh? Nu am înțeles nimic din ce ai zis…

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>