10 principios fundamentales de los maestros del CSS
14/01/2009En Nettuts nos muestran una lista (en inglés) de 10 reglas o principios a seguir, elaboradas por los mejores profesionales en el mundo del diseño web. He realizado una traducción libre para que podáis seguir el documento y lo aprovechéis al máximo.
- Elabora CSS simple, Peter-Paul Koch. La recomendación extrema de Koch es que el todo código CSS tiene que ser lo más simple posible, aunque la simplicidad no es una tarea fácil de conseguir. Existen muchos “tips” o trucos en CSS con los que es posible obtener resultados espectaculares, sin embargo, la utilización de dichos trucos se ve mermada con las constantes actualizaciones de los navegadores. Utiliza código CSS simple que todo navegador (incluídas sus actualizaciones) pueda soportar.
- Las declaraciones CSS deben realizarse en una sola línea, Jonathan Snook. Veámoslo con un ejemplo:
Declaración 1:
h2 {font-size:18px; border:1px solid blue; color:#000;}Declaración 2:
h2 { font-size:18px; border:1px solid blue; color:#000; background-color:#FFF; }Aunque el segundo puede parecer más bonito, en efectos de búsqueda de información, es menos eficiente. Tener todas las declaraciones en una sola línea facilita la búsqueda de elementos CSS en un documento.
- Utiliza las abreviaturas de CSS, Roger Johansson. Las abreviaturas son un aspecto a tener en cuenta a la hora de organizar nuestro código CSS. Por ejemplo, para especificar los diferentes márgenes de todas las partes de una caja o bloque se podría utilizar esto:
margin-top:1em; margin-right:0; margin-bottom:2em; margin-left:0.5em
Sin embargo, el siguiente ejemplo sería más eficiente:
margin:1em 0 2em 0.5em
Las abreviaturas no sólo reducen considerablemente el volumen de las hojas de estilo, sino que también ayudan a mantener el código organizado y simple.
- Utiliza elementos de bloque para llenar el espacio orgánicamente, Jonathan Snook. Esta regla se basa fundamentalmente en la creación de elementos de bloque como primera instancia y luego definir los parámetros asociados a dicho bloque, como puede ser el margen y el relleno. Trabajar con el modelo de caja puede llevarte muchos dolores de cabeza, especialmente si se está tratando con porcentajes, pero a la larga resulta más eficiente.
- Establece la propiedad “float” para eliminar otro “float”, Trevor Davis. Saber cómo reflotar elementos es una tarea muy importante para utilizar código CSS, pero saber cómo limpiar dicho flotamiento no deja de ser menos importante. Aquí tienes un ejemplo de este principio realizado directamente por Trevor.
- Utiliza márgenes negativos, Dan Cederholm. El uso de márgenes negativos en los elementos es, a veces, más fácil que tener que cambiar todos los demás aspectos del diseño para que se alineen todos los elementos. Mira el ejemplo que se expone en su página.
- Utiliza código CSS para centrar las capas (layouts), Dan Cederholm. El método utilizado por Dan para conseguir este efecto se centra en la siguiente declaración:
#contenedor { margin: 0 auto; width: xxxpx; text-align: left; } - Realiza código XHTML y CSS válido, Jeffrey Zeldman. Rígete a los estándares para que tu código sea válido y no tenga problemas con los navegadores.
- Centra elementos utilizando CSS, Wolfgang Bartelme. Puedes echar un vistazo al tutorial realizado por Wolfgang, en el que se explica detalladamente cómo centrar elementos de forma correcta.
- Utiliza la propiedad “text-transform”, Trenton Moss. Lo mejor que un diseñador web puede hacer es planificar el futuro para asegurarse de que, en lugar de tener que cambiar manualmente el modo de texto que se muestra, utilizar el CSS para cambiar la apariencia del texto. Para ello es aconsejable la utilización de la propiedad text-transform.
Puede que te interese
1 comentario »
Deja un comentario
Este blog funciona gracias a WordPress con el theme GimpStyle
© bitelemental. Todos los derechos reservados.
[...] estos consejos te han sido de ayuda, es hora de que leas atentamente los principios o reglas recomendadas por los mejores maestros del diseño web, puede que te resulten [...]