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.