CSS: estilos por defecto

4 04 2007

Cuando un explorador interpreta un archivo CSS y no encuentra algunos valores, renderiza el estilo con los valores por defecto que trae programados. Es por eso, que algunas veces un objeto con una clase CSS puede verse de distinta forma de explorador en explorador. Sin embargo, existe una técnica que consiste en declarar valores por defecto en la hoja CSS para que los exploradores puedan renderizar correctamente nuestro estilo, además de algunas técnicas importantes para que podamos realizar hojas de estilo flexibles y adaptables.

Comentando el código: Es importante que el archivo de estilos esté documentado. Según la propuesta de Andy Budd, es importante incluir un número de versión, dirección de correo electrónico, etc. con el objetivo de hacer fácil el mantenimiento y control de cambios.

Decidiendo como dividir las hojas de estilo: Muchos de nosotros, solemos utilizar una única hoja de estilo para el diseño de todo un sitio. Esto no es muy adecuado, dado que lo que estamos haciendo es desperdiciando ancho de banda, cada vez que una página es solicitada, mandando toda una hoja de estilos cuando la página requerida solamente utiliza unos cuantos. Una buena técnica consiste en dividir en secciones una hoja de estilos: podemos utilizar una por pagina, agrupando elementos más comunes en una sola y dejando el resto, en distintas. Tambien, podemos importar más hojas de estilo, desde el CSS con el atributo @import.

Remueva estilos por defecto: asigne valores por defecto a algunas de los valores CSS por defecto como margin, border y padding. La razón es simple, cada explorador aplica estilos distintos a distintos elementos.

Cree clases para elementos flotantes: si utiliza DIV’s para maquetar, sabrá que la manera para hacer que un elemento este a la par del otro y no caiga a la linea siguiente es con el atributo FLOAT. Pues bien, una buena práctica sería crear clases con esos atributos, incluyendo el elemento CLEAR.

Configure el documento: otra buena práctica para comenzar a aplicar el estilo tipográfico a un documento, es hacerlo desde el mismo elemento BODY. Además, la propuesta de Richard Rutter es que utilicemos tipos EMS para el tamaño de fuente, pues esto nos permitirá tener un mejor control para la tipografía.

También, asigne fuentes por defecto. Debemos de saber que le tamaño por defecto es de 10pt.

Cree secciones: archivos CSS demasiado extensos pueden ser dificiles de manejar. Es recomendable, dividirlo en varias secciones con estilos y clases comunes para cada sección. Por ejemplo, divida las clases de los elementos de navegación, de los estilos de los elementos de pie de página, etc.

Formas y Tablas: por defecto, es preferible asignarle estilo a los cuadros de texto. Puede asignarsele un valor al padding del objeto para que el texto sea más legible. Para las tablas, talvez lo principal sería indicarle un valor por defecto al tipo de letra y a los borders.

Por lo demás, el archivo XHTML resultante, debería tener disponible una versión imprimible, iconos y RSS feeds

Acerca de este Artículo: este artículo es una versión traducida y adaptada del artículo original, publicado en el sitio Shape Shed en colaboración con George Ornbo y licenciado bajo la especificación de Creative Commons.

Artículos Relacionados:


Acciones

Information

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: