jQuery e CSS: specificità  delle regole di stile

jQuery fornisce agli sviluppatori il metodo css() con cui è possibile specificare degli stili direttamente sugli elementi presenti all'interno del wrapped set della libreria. Sull'opportunità  di questa pratica si è molto discusso e si continua a discutere. Peter-Paul Koch, ad esempio, sostiene un approccio meno intrusivo alla questione e suggerisce di separare comportamento e presentazione CSS tramite l'uso di classi (in jQuery sono disponibili i metodi addClass() e removeClass()).

Sin qui nessun problema, in quanto si tratta di una scelta di sviluppo. Il problema potrebbe (e sottolineo potrebbe) risultare fastidioso qualora non si tenesse conto che i due metodi poc'anzi citati usano un differente livello di specificità . Il primo, infatti, agisce sull'attributo style degli elementi. Secondo le specifiche CSS, tale attributo ha un livello di specificità  più alto rispetto agli altri stili definiti dagli autori. Un modo per invertire tale calcolo è quello di usare la regola !important nel foglio di stile. Purtroppo IE6 ha dei noti problemi con questa regola, quindi molto spesso i risultati sono imprevedibili.

Viceversa, l'altro metodo agisce sulle classi CSS definite nel foglio di stile dell'autore. Finché queste classi non presentano dichiarazioni di stile in conflitto tra di loro, tutto va bene. Quando però sorge un conflitto tra regole (ovvero quando si vogliono sovrascrivere dichiarazioni su altri elementi), vale quanto stabilito dalle specifiche CSS. Ad esempio, una classe che viene dopo nel sorgente sovrascrive gli stili della classe che la precede. Per questo consiglio di separare gli stili JavaScript dagli altri ed inserirli in fondo al foglio di stile. Esempio:

/* =L Layout */
...
/*=JS JavaScript styles */
...

Consiglio inoltre di usare dei tag CSS (come =L e =JS) per marcare le sezioni e di usare un solo foglio di stile per ridurre il numero di richieste GET (oltre che per evitare altri problemi di specificità  nell'uso di più fogli di stile in serie).