Semántica en clases e ids

Fernando lo recordaba en un post de Andrés Nieto sobre semántica, ayer re-descubro este tip también en en una traducción de Armonía de un post de Dave Shea e incluso la W3 lo recomienda: nombra a tus clases e ids (class/id) en relación con su función, no con su aspecto.

Los buenos nombres no cambian

Piensa en por qué quieres que algo se vea de determinada manera, y no realmente cómo debería verse. El aspecto siempre puede cambiar, pero las razones para darle un determinado aspecto permanecen.

Use class with semantics in mind – Quality Web Tips

Un ejemplo muy claro está en las clases que solemos ocupar para controlar el aspecto de las imágenes que acompañan a un post: hace ya un tiempo solía preferir que se mostraran flotando a la izquierda, por lo que creé una clase llamada .imgleft. Pasó el tiempo y empecé a preferir las imágenes flotando a la derecha del texto, por lo que edité el CSS ¡y quedé con una clase “imagenizquierda” que en realidad mostraba las imágenes a la derecha!

Por eso es que ahora al publicar [Satori->] preferí crear clases con nombres relacionados a su función —ahora tengo dos clases para insertar imágenes en posts: postimgtn (por post image thumbnail o “miniatura de imagen en post”) y postimgfull para imágenes de mayor tamaño. Si decidiera cambiar la forma de mostrar estas imágenes no caería en absurdos como antes.

5 comments

  1. Ultimamente me da la impresión que tienes acceso a los drafts de mi wordpress. :s

    Increible coincidencia, pero los temas de tus últimos 2 artículos, yo los tenía como borradores a punto de publicar en mi blog.

    En todo caso esta todo muy simple y bien explicado 🙂

    Felicidades, suerte

  2. Esa es la base de los microformatos, el uso de esos atributos que puedes encontrar en todos los tags.

    Además DublinCore define una serie id y class estandares para todo el mundo, osea unos microformatos universales.

    Muy buen artículo 😉

  3. comparto tu opinión, pero te planteo una duda sobre tus ejemplos.

    si quieres alternar en el cuerpo de tus posts imágenes en miniatura a un lado o a otro (izquierda o derecha), o centradas, necesitas, al menos, tres clases distintas, no?

    cómo las nombrarías para que siguieran siendo semánticas y no hicieran mención alguna a su aspecto?

  4. Cristian: jaja. Los drafts se han convertido en una especie de activos importantes para los blogs, dignos de secreto industrial (he visto varios pantallazos a paneles de administración en los que se distorsiona esta parte)… de hecho, yo mismo los protejo, pero se han llegado a convertir en un reservorio de buenas ideas (me gustaría pensar que son buenas) que probablemente nunca desarrollaré. De todas maneras, te aseguro que no tengo acceso a tus borradores… ¿o sí? 😉

    Andrés: no sabía lo de DublinCore… ¿se viene un artículo sobre eso? Es interesante este tema, aunque creo que el acercamiento debe ser cauteloso, de otra manera tendríamos una enorme colección de valores para ciertos atributos que harían naufragar cualquier intento de estandarización (piensa por ejemplo qué pasaría si XHTML tuviera el triple de elementos: sería mucho más difícil de aprender y de aplicar correctamente)

    sergio: buen problema el que planteas… de hecho, pensé algo al respecto al escribir el post, pero al final decidí no incluirlo en pos de una mayor simplicidad (tengo una tendencia a complejizar cuestiones simples sobre-explicándolas).

    Creo que una buena alternativa, aplicada en el caso de Satori, sería la de tener la clases <code>postimgfull, postimgtn y postimgtn-alt</code> o algo así. Creo que lo principal a tener en cuenta es (como dice la cita del artículo) pensar en por qué quieres presentar algo de una forma distinta, no el cómo: en este ejemplo, <code>postimgfull</code> muestra a la imagen centrada y separada del resto del texto, porque para mí lo principal era mostrar imágenes "completas", más grandes (o sea, no miniaturas).

    Existen muchas otras formas de lograr lo mismo: por ejemplo, supongamos que se trata de una revisión de un producto, con diferentes secciones: presentación del producto, instalación, utilización, valoración; y que en cada una de ellas desees presentar las imágenes de distinta forma: puedes crear estas secciones agrupando el título de la sección y los párrafos que la componen dentro de un <code><div></code> que las contenga y otorgarles clases o ids distintas. Luego, en el <acronym title="Cascading Style Sheets">CSS</acronym> defines la presentación de las imágenes en relación a la sección: <code>div#introduccion-articulo img { /*tus reglas de estilo*/ }</code>.

    Por otra parte, si quieres aún más especificidad, puedes utilizar, además de clases, ids; o en otro caso: presentar las imágenes que están enlazadas de una forma (<code>a img</code>) y las que no, de otra (<code>img</code>).

    En fin: incontables posibilidades

  5. pues mi “solución” fue mucho más simple:

    necesitábamos 4 clases para 4 funciones, que a su vez se corresponden con 4 efectos de diseño, pero como no teníamos base para describir las funciones, ni queríamos describir los 4 efectos, llamamos a las clases: a, b, c y d.

    en el css, a alinea a la izquierda, b a la derecha, c lo centra, y d lo justifica a ambos márgenes.

    reconozco que no tiene semántica ninguna, pero tampoco se “casan” con el estilo… ¿os parece aceptable?

Comments are closed.