Escoge tu CSS Inicial: Eric Meyer vs. Faruk Ateş

Desde hace algún tiempo he recomendado el uso del CSS inicial de Faruk Ateş. Básicamente lo que hace esta hoja de estilos inicial es amortiguar las diferencias que hay entre todos los navegadores para mostrar el HTML.

¿No has visto que si colocas un H1 sin ningún estilo los navegadores lo muestran en texto negro con una letra grande en Times New Roman? Además de las fuentes, todos los navegadores tienen definidos sus estilos por defecto para todos los elementos de HTML.

El problema es que Internet Explorer, Firefox, Safari, Opera, etc. tienen diferencias en sus estilos predefinidos. Hasta de una versión a otra de un mismo navegador podrían cambiar los valores. De IE5 a IE6, por ejemplo, los textos de una misma página podían verse diferentes.

Ahora, si eres uno de los que procura que todos los navegadores muestren de igual manera el diseño, es difícil lograrlo debido a estas diferencias. A menos que utilices una hoja de estilos inicial como esta.

Hace algunos días (el 14 de abril del 2007 para ser exactos) Eric Meyer sacó su propia hoja de estilos inicial (“Reset Styles”) basada en la hoja de estilos inicial de Yahoo… Ya sumamos tres hojas de estilos iniciales, sino es que hay más. ¿Cuál escoger?

• Inicial CSS de Faruk Ateş.
• YUI Reset CSS de Yahoo.
• Reset Styles de Eric Meyer.
• Resetting Again de Eric Meyer (Actualizada el 15 de enero de 2008).

Como no soy el más experto en el tema acudiré a quienes lo son para compararlas.

Traduzco inicialmente las palabras de Eric Meyer:

…Yo recomiendo usar un grupo de estilos de “reseteo” o “de base”, pero no uno basado en el selector universal. Más bien que los estilos deberían listar todos los elementos a ser reseteados y exactamente cómo deberían serlo. …Alguien me preguntó si yo podía crear esta hoja de estilos para compartirla con el mundo, a lo cual accedí.

…Alguien más me recordó que el grupo Yahoo! UI ya lo había hecho así que no me tocaría hacerlo. Maravilloso!… Excepto que encontré que su CSS va más lejos de lo que debería en algunas áreas y se queda corto en otras. Así que presenté mi propia versión de Reset CSS, basada en los estilos de Yahoo…

El mismo Eric ya desfavorece a Yahoo, y bueno, Eric Meyer tiene el conocimiento, experiencia y fama como para creerle, ¿no?

Adicionalmente Eric complementa mi introducción:

…¿Por qué?!? ¿Por qué todo esto?

La razón principal es que todos los navegadores tienen presentaciones preestablecidas y todas ellas diferentes. (Ok, esto no aplica para las familias de navegadores—la mayoría de los navegadores basados en Gecko tienen los mismos valores por defecto). Por ejemplo, algunos navegadores sangran las listas con un margen izquierdo, mientras otros usan el padding…

Pero hay todo tipo de inconsistencias, unas más sutiles que otras. Los títulos tienen márgenes superiores e inferiores ligeramente diferentes, las distancias de sangría son diferentes, y así sucesivamente. Aún algo tan básico como la altura de las líneas varía de un navegador a otro—lo cual puede tener efectos en la altura de los elementos, las alineaciones verticales y en general todo el aspecto.

Esto no es algo que consideremos muy a menudo. Pensamos en nuestro CSS para modificar el aspecto por defecto de un documento —pero con una hoja de estilos “reset”, podemos hacer este aspecto más consistente entre los diferentes navegadores, y así disponer menos tiempo peleando con estas diferencias…

Hay otra razón por la que quiero resetear muchos estilos en muchos elementos. No sólo reiniciar las márgenes y el padding. También quiero que todos los elementos tengan un tamaño de fuente, un peso, un estilo y una familia consistentes. Si, quiero remover la negrilla de los títulos y los elementos strong; quiero quitarle la itálica a los elementos em y cite.

Quiero todo esto porque no quiero dar por hecho los efectos de los estilos… Lo cual me hará pensar un poco más a cerca de la semántica de mi documento. Con el reseteo montado, no podré escoger el elemento strong si el diseño necesita una negrilla. En lugar de ello, me tocará escoger el elemento adecuado—ya sea si es un strong o un em o un b o un h3 o lo que sea—y luego le doy el estilo que necesito…”

Creo que muy claro nos queda. ¿Qué podemos decir acerca de los estilos de Faruk Ateş, los cuales siempre he utilizado? Les traduzco sus palabras, las cuales me escribió para aclarar las dudas:

Revisando la hoja de estilos reset de Eric, siento que ambas (la de él y la mía) son soluciones viables al mismo problema general. La diferencia real es que su reseteo apunta realmente a anular cada bit de estilo, mientras que mi solución sólo apunta a neutralizar los estilos comunes entre los navegadores.

Con la mía, muchos estilos por defecto permanecen intactos (como los estilos de los elementos sup y sub, etc.) y en la mayoría de los casos, eso es lo adecuado porque todos los navegadores ya tratan estos elementos adecuadamente. Obviamente, tu opinión puede variar.

El reseteo de Eric simplemente aborda cada elemento de la especificación y le remueve toda su base de estilos. Su regla font-* inheritence parece una adición inteligente que puedo considerar adicionar a la mía, pero aparte de eso siento que está un poco del lado de lo excesivamente innecesario.

Creo que la mejor solución entre la de Eric y la mía depende de la complejidad de los sitios que crees. Para un sitio gigante donde no tienes idea qué tipo de contenido se publicará, la de Eric es una apuesta segura pero requerirá que re escribas un montón de estilos nuevamente. Para proyectos pequeños y medianos, creo que mi CSS inicial será más que suficiente, y te salvará de re-aplicar muchos estilos. :-)

Con esto nos queda todo claro, ¿no?

Recuerda entonces tomar una de estas hojas de estilos iniciales de acuerdo a tus necesidades, copiarla dentro de tus archivos y utilizarla en cada HTML que generes. Algo como esto te caería muy bien:

‹link rel="stylesheet" type="text/css" href="/css/inicial.css"›
‹link rel="stylesheet" type="text/css" href="/css/misestilos1.css"›
‹link rel="stylesheet" type="text/css" href="/css/misestilos2.css"›

Actualización:
Gracias a 70 Expert Ideas for Better CSS Coding encuentro otras hojas de estilo iniciales que sería bueno revisar:

• Global white space reset.
• Initial CSS de Christian Montoya.
• Initial CSS de Mike Rundle.
• Initial CSS de Ping Mag.
• Initial CSS de Rudeworks (Este gracias a WebIntenta).
• Reset CSS de aNieto2K (Este gracias a él mismo).
• Tripoli Generic CSS de David Hellsing (Gracias a aNieto2K).
• CSS Reseter de CSS Lab.
• Base.css de Alberto Forbes (In love with CSS).

Actualización 2:
He encontrado una buena colección de Reseteadores: A Killer Collection of Global CSS Reset Styles. Me gustó porque, aunque menciona varios conocidos, explica cada uno (desde el más básico). ¡Puede resultarte interesante!