Separar la forma del contingut (nom de les classes)
dilluns 29 juny 2009Es ben sabut per tots els que ens dediquem a la programació d’interfícies web (també anomenats maquetadors o programadors front end) que cal tenir ben present que sempre s’ha de separar el document (HTML) de la seva presentació en un medi concret (CSS) i dels components amb comportament que pugui tenir (JavaScript). Així, és fàcil veure que el següent fragment d’un document és completament incorrecte pel que fa a aquests cànons:
<div style="margin: 5px;">
<em>Aquest contingut el vull en lletra cursiva</em>
<small><a onclick="window.location='/lipsum'" href="http://www.example.com">Lorem ipsum dolor</a></small>
</div>
Normalment la majoria de programadors som ben conscients de la incorrecció del fragment anterior, però sovint ens trobem incorreccions d’aquest tipus completament encobertes, i sempre seguint el mateix patró: el mal ús dels noms de classe dels elements.
Usaré exemples de la xarxa per a il·lustrar el que vull dir. Si anem a la portada de la pàgina d’una institució molt important del país podem trobar coses així (canvio els texts per centrar l’atenció):
<ul id="ul_home">
<li><a class="vermell_nobullet_2" href="http://www.example.com">Ipse quat erimo</a></li>
<li><a class="vermell_nobullet_2" href="http://www.example.com/dog">Sailer due rit</a></li>
</ul>
<div class="marge_superior">
<h2><span id="actualitat" class="titol_seccio">Lorem ipsum</span></h2>
</div>
<div id="altres_serveis" class="border_top">
<div class="border_bottom">
<a class="text_gris" href="http://www.example.com/bird">Dolor et sumum</a>
</div>
</div>
El valor de l’atribut @class d’alguns dels elements ja ens dóna informació de com s’estilitzaran al veure-ho associat al seu full d’estils.
Però sovint no es veu tan fàcilment la incorrecció a l’assignació dels noms de les classes. Per exemple, és ben normal trobar-nos sempre al fragment de descripció de l’organització d’un document, classes del tipus:
<body class="3-columnes">
<div class="columna-esquerra">
Lorem ipsum
</div>
<div class="columna-central">
Dolor set
</div>
<div class="columna-dreta">
Icse et luopir
</div>
</body>
Hi veieu res d’estrany? Per saber si les classes són reveladores de la forma final, només cal que us feu la següent pregunta: podríeu saber quina és la forma final de la pàgina només llegint l’HTML? Si la resposta és sí, les classes són errònies. Si és no, doncs la cosa ja està millor.
Per exemple, una forma correcte de fer la divisió del document podria ser:
<body class="layout-complet">
<div class="contingut-primari">
Lorem ipsum
</div>
<div class="contingut-secundari">
Dolor set
</div>
<div class="contingut-terciari">
Icse et luopir
</div>
</body>
Oi que ara ja no us espereu com serà el document final?
Per tant, cal anar amb compte a l’hora d’assignar els noms a les classes. Sempre cal tenir ben present de separar la forma o presentació del contingut i anar una mica amb peus de plom a l’hora de cercar els valors. Així aconseguirem que els nostres documents siguin 100% independents de la forma en que es visualitzen.