10 rápidos tips CSS - 1ra. parte

Como con la mayoría de las cosas, un enfoque estructural y lógico es la mejor forma de continuar.Voy a colocar 10 tips CSS en orden especial para ayudarte a hacer tu cógico CSS tan simple como sea posible.

1. Conservarlo simple

Esto suena obvio pero si nos encontramos que estamos haciendo uso de código complejo deberíamos de pensar acerca de si en el futuro realmente lo necesitaremos o solo estamos pensando en nuestro diseño y no en nuestros visitores. Frecuentemente los diseñadores nos inspiramos en nuestro propio diseño y nos “alzamos” para producir determinados efectos visuales solo para encontrarnos después con que los visitores lo ven pesado e inutilizable.

El código complejo es el resultado de un pensamiento desordenado. Planear el layout lógico y trabajar en el exterior en y desde arriba y hacia abajo tanto sea posible.

Usualmente hay que empezar con la envoltura de la página y entonces progresar lógicamente a través del encabezado, navegación, contenido principal y pies, etc. tratando de preservar el flujo de los documentos tanto como sea posible.

Mientras que un diseño visual bonito es necesario para atraer visitores se deberá pensar aún en tener buen contenido y que el sitio sea utilizable y accesible. Si encontramos que nuestro html y el css parecen como “spaguetti” entonces se tiene que pensar ver si se puede simplificar. Esto hará mas fácil mantenerlo en el futuro y frecuentemente ahorraremos código y ancho de banda.

2. No usar hacks a menos que este sea conocido y documentado

Este es un punto importante, frecuentemente vemos hacks empleados para componer algo que realmente no es imperfecto en primer lugar. Si encontramos que estamos buscando un hack para componer cierto elemento en nuestro diseño entonces primero hacemos una búsqueda (en nuestro amigo google) y tratamos de identificar el elemento con el que estamos teniendo problema.

Si encontramos que es un bug conocido entonces el 99% de las veces tendrá una solución para este bug y entonces podemos confiablemente usar un hack si es requerido, teniendo en cuenta que estamos componiendo el bug, que es diferente a corregir el mal código.
Dificilmente podríamos contar el número de veces que hemos visto layouts usando hacks cuando todo lo que se debio hacer era controlar los margenes por default en la página (vea el siguiente tip)

3. Tener cuidado con los margins y padding de todos los elementos que usamos

Todos los browsers aplican padding (rellenos) y marging (margen) por default en la mayoría de los elementos, y la cantidad que ellos aplican varía substancialmente. Por lo tanto, necesitamos controlar explícitamente, tanto el marging como el padding, en todos los elementos que usamos.

Esto será cubierto en “No margin por error”

(continuará…)