Ho notato, leggendo di tanto in tanto le discussioni in questo forum, che spesso - nel caso di interazione javascript + CSS - le soluzioni suggerite tendono a preferire un utilizzo un po' improprio di javascript.

Prendiamo questo esempio: al click del mouse su un elemento, questo assume colore rosso. (Semplifico il caso, che comunque sarebbe gestibile completamente con CSS.)

La soluzione che spesso suggerite assomiglia a questa:

codice:
XHTML

<p id="par" onclick="colora()">
   Io sono un paragrafo e me ne vanto.
</p>


Javascript

function colora()
{
   document.getElementById('par').style.color = 'red';
}
Ora, mi chiedo, perchè non applicare anche qui il concetto di separazione tra contenuto e forma, tanto caro alla nuova filosofia di progettazione?

Si avrebbe così una separazione completa tra i tre elementi, ad ognuno dei quali verrebbe assegnato il compito per cui è stato inventato:
  1. struttura descrittiva di markup (XHTML);
  2. presentazione delle informazioni (CSS);
  3. comportamento (script lato client).


La soluzione di prima potrebbe diventare:

codice:
XHTML

<p id="par">
   Io sono un paragrafo e me ne vanto.
</p>


CSS

.selezionato
{
   color:red;
}


Javascript

var paragrafo = document.getElementById('par');
paragrafo.onclick = function()
{
   this.className = 'selezionato';
}
In tal modo otteniamo:
  1. un markup più pulito ed essenziale, non sporcato da attributi di evento e via dicendo;
  2. la parte che riguarda la grafica è gestita da CSS, come è giusto che sia;
  3. il javascript deve essere progettato con più coscienza e con maggior rispetto degli standard, avvicinandosi così anche al DOM del W3C.


Trovo che sia un approccio più intelligente e ponderato, no? Come mai non è molto discusso, da queste parti? Forse mi perdo io qualche passaggio?

Mi piacerebbe avere la vostra opinione in merito.