CSS, Clases y Semántica

Thursday 28 de July, 2005, 11:34

Desde hace un par de días he estado trabajando en la plantilla de WordPress para EFH, y la referencia obvia para esto es el tema por defecto de WP, Kubrick. De hecho la mayoría de los temas disponibles son básicamente modificaciones de kubrick. Sin embargo mientras estoy revisando el CSS noto algunas cosas que me molestan y son básicamente la razón por la que he partido casi desde cero con mi nuevo tema. Se trata del uso nombres de clases que se refieren a la presentación, a características de diseño, antes que a describir la lógica o estructura del contenido.

He hablado antes sobre la importancia del uso semántico de HTML, es decir, de utilizarlo como un descriptor de la estructura del contenido. El código HTML de un documento debe hablar sobre su estructura interna, debe dar pistas del tema tratado. Su estructura de títulos debe ser una pauta de la jerarquía del contenido y cada uno de los demás elementos debería utilizarse de modo que su significado aporte sentido al contenido.

Del mismo modo, las clases o atributo class no deberían referirse a características de comportamiento o presentación. Es así como lo han entendido quienes están detrás del interesante proyecto de microformatos, Tantek Çelik y Eric Meyer, que básicamente utiliza el atributo class para dar significado nuevo al contenido.

El nombre de una clase debería ser neutro respecto a factores de presentación, por ejemplo, div class="alignleft" no es mejor que div align="left". Es cierto, valida, pero ése no es el objetivo detrás de la separación de contenido y presentación que permite CSS. Es mucho más lógico utilizar algo como div class="plantilla-bloque-a" que no determina la forma en que los elementos que declaren la clase plantilla-bloque-a serán presentados. ¿Qué sucede si en un rediseño decidimos cambiar todos aquellos elementos que antes, usando la clase alignleft, estaban alineados a la izquierda y ahora los centramos? Quedaremos con una incongruencia en que el HTML dice div class="alignleft" pero el elemento aparece centrado.

Para finalizar, les propongo algunas pautas para revisar los nombres de las clases que creemos en CSS/HTML:

  • Comprobar que el nombre no describa una característica visual, como color, tamaño o posición
  • Comprobar que el nombre no describa una función o comportamiento
  • Verificar que el nombre describa el significado o tipo de contenido que describe
  • Asegurarse de que el nombre es lo suficientemente específico y no crea confusiones con otros nombres similares
  • Asegurarse de que el nombre es lo suficientemente claro como para que otros leyendo el HTML entiendan su significado y propósito
  • Asegurarse de que el nombre será apropiado en el futuro, previendo en lo posible la forma en que el documento y el contenido puedan evolucionar

Comentarios para 'CSS, Clases y Semántica'

  1. 1URIJorge Walters, Thursday 28 de July, 2005, 14:16

    Totalmente de acuerdo con la propuesta que hacen; yo la llevaría más allá y no usaría cosas como class=”plantilla-bloque-a” sino que haría alusión directamente al contenido, algo así como class=”noticias”, que después pueden ser especializadas más con id=”destacada”.

    Cordialmente,
    Jorge

  2. 2URIjuque, Thursday 28 de July, 2005, 15:16

    ¡Me confieso padre!, he pecado; pero gracias a tus entradas he ido adaptando estas buenas practicas al momento de diseñar mis layout’s. Antes de EFE ;), era muy común para mi setear una caja como ‘izquierda’ o ‘derecha’, ahora en cambio uso ‘lateral’ o ’sub-nav’. Muchas plantillas CMS’s vienen con estos descuidos es verdad, pero bueno de a poco se evangeliza.

  3. 3URItorresburriel, Thursday 28 de July, 2005, 17:26

    Muy acertada entrada, Nelson. Muchas veces la falta de planificación de un sitio hace que nos dejemos llevar por el uso de una nomenclatura tendente a identificarse con aspectos comportamentales o de diseño, en lugar de los referidos a la estructura del sitio.

  4. 4URIsosa, Thursday 28 de July, 2005, 17:51

    Y lidiar con kubrick para adaptarlo es un problema, tiene las opciones definidas y redefinidas por todos lados, en el CSS y ademas en el XHTML. Ademas, no estamos ya todos hartos de Kubrick?

  5. 5URIVuarnet, Thursday 28 de July, 2005, 19:54

    Confieso que también he pecado… y me han sobrevenido esos problemas que mencioans cuando por ejemplo lo que iba a la izquierda, ahora lo quiero a la derecha.

    Buenos tips…

  6. 6URInelson, Thursday 28 de July, 2005, 20:48

    Estoy de acuerdo contigo Jorge, el ejemplo es sólo para ilustrar, lo que planteas es correcto. Lo ideal es definir el contenido con la clase. De todos modos hay algunos casos en que el sentido del contenido no es tan claro, por eso usé un ejemplo que aunque es neutro respecto al contenido, también es neutro respecto a la presentación. Gracias de todos modos por el comentario.

    Por otro lado, qué bueno ver tantas caras amigas por estos lados, además de Jorge, mis saludos a Juque, Dani, Sosa y Vuarnet!

  7. 7URIsergio, Friday 29 de July, 2005, 2:03

    y cuando defines una clase única y exclusivamente para alinear una imagen o un párrafo a izquierda, derecha o centro?

    yo, que siempre he tratado de ser muy purista con esos nombres de clases, terminé optando por usar clases del estilo “tipo-a” (izqda), “tipo-b” (dcha) y “tipo-c” (centro)… pero cuando el estilo es para otras personas, termina siendo más comodo para todos usar “izqda”, “dcha” y “centro”….

    qué haceis vosotros en esos casos?

  8. 8URInelson, Friday 29 de July, 2005, 9:11

    Documentación. Así de simple, creo que siempre es necesario documentar apropiadamente, más aún cuando más de una persona trabajará con los estilos. La documentación en CSS puede estar en el archivo de estilos, especificando los detalles relevantes para los desarrolladores o diseñadores que los usen y también en la guía de estilo o manual de uso, donde se dan instrucciones para usuarios. Vaya, creo que este tema da por sí solo para una nota completa. Me comprometo a escribir algo más detallado y publicarlo pronto.

  9. 9URIFederico, Tuesday 2 de August, 2005, 4:06

    Medio tarde para decirlo pero tenés razón. Realmente me sorprendió que habiendo sido hecho por alguien que parece conocer del tema, haya optado por hacer las cosas así. A menos que fuera su forma de asegurarse que fuera más fácil para los neofitos el reutilizar las clases. #noticias suena menos reusable que .esto-va-a-la-derecha.

  10. 10URIramon domingo valdez, Friday 19 de August, 2005, 14:36

    muy bueno

  11. 11URIjorge miana, Tuesday 22 de November, 2005, 18:57

    Siempre he procurado el orden en mis cosas,pero creando un ligero desorden de las mismas; CSS me pone entre la espada y la pared, me obliga a un orden estricto, tanto que pense en crear hojas de estilos especificas para cada funcion en la pagina.Asi que crearia los siguientes estilos: fuente.css,color.css,bakground.css,formato.css,diseño.css - Ahora bien mi pregunta es que pasaria si se lograra maquetar un documento con textos e imagenes en formato css(Contenido escrito y grafico de lo que se vera en la pagina llamado mediante una funcion style al pulsar un link)?.Quizas tengamos paginas html con cero contenido inmediato(paginas en blanco)o paginas que se cargen luego de ser abiertas.Esta es mi pregunta propuesta para un diseño web mas agil y ordenado.

  12. 12URISeo2, Wednesday 28 de December, 2005, 15:28

    Gracias por los consejos, ls seguiré.
    Paz