11 Tips a la hora de Maquetar CSS

Tips css
A la hora de afrontar un proyecto web la maquetación en CSS es uno de los puntos claves para lograr una excelente visualización en los Browsers.

Tan famoso por su potencia y también por su fama de fácil (Gente que desconoce del tema) que al final puede convertirse en tu peor pesadilla.

En CSS tenes que probar mucho el código y a veces se puede volver ultra tedioso, este es el momento de replantearse y preguntarse. Mi metodología de trabajo es la correcta?, una buena organización puede cambiar el panorama, aqui les dejo una serie de consejos.

1 – Organización:
Planea y organiza tu hoja de estilo según la especificidad de los elementos.

2 – Propiedades repetidas:
Es muy común ver propiedades repetidas, sobre todo las de tamaño de fuentes o color. Por lo tanto lo mejor es planificar para evitar la redundancia y lograr una hoja de estilo mas optimizada.

3 – Nombre de Clases e ID
Intenta darle nombres globales a tus etiquetas para que sea comprensible a cualquier webmaster. Quien sabe, quizas algún dia necesites que te hagan alguna modificación en un sitio y tu no tienes tiempo… content, sidebar, wrap son algunas de las mas usadas.

4 – Amigo Borde

La propiedad Border puede ser un gran ayudante a la hora de posicionar y flotar divs u otros elementos. Asignale un borde de 1 pixel a las cajas para ver sus limites de padding y margin, esto te ayudara a encontrar errores y después puedes quitar el borde.

5 – Pixeles
Un problema muy común es el de la barra del menu que se cae para abajo. Bueno te cuento que un simple pixel puede lograr esta catástrofe, mide bien tu diseño y ten en cuenta que los navegadores no son 100% similares.

6 – Diseño Abierto
Debido a los típicos problemas de cajas, margenes y rellenos te recomiendo diseñar ampliamente sobre el lienzo. Me refiero a que uses el espacio y no pongas elementos muy pegados sino vas a tener que meterte en el terreno de los hacks y hojas alternativas.

7 – Decile no a los Hacks
Esta picardía es útil pero a la larga puede generar gran descontento. Primero, no son propiedades reales y segundo, si en alguna actualización de navegadores se corrige esto o se la declara como una nueva propiedad, seguro que tu web se despedaza.

8 – Estudia los elementos de linea y los de bloque
Es simple, en CSS existen elementos de linea como son los enlaces y los de bloques entre los que encontramos los párrafos. Si estudias que tipo de elemento existen vas a poder predecir como reaccionaran en el lienzo. También podrás cambiar su esencia con Display Inline o Display Block.

9 – Comenta la lineas
Intenta comentar casi cada linea que codifiques, esto te hara ganar un rango de tiempo importante que aunque no creas es real, después las podes borrar.

10 – Pixels, Em y Procentages
Tu decides el alcance que puede tener tu web, como tambien el diseño al cual se tiene que adaptar. Si diseñas con pixeles sabes que estas limitado pero podes lograr un diseño mas armónico, y con Em y Porcentages tenes mas compatibilidad entre diferentes dispositivos.

11 – Posicionamiento
Css te ofrece un amplio campo de posibilidades en la maquetación, el uso de Float, Absolute, Relative… Cual es mejor? Todos. Tenes que entender su reacción en el lienzo para ver que te conviene usar en el proyecto que estas. Por ejemplo, el Float quizas sea un buen compañero en sitios donde haya contenido dinámico, porque las columnas tienen que ir creciendo con el nuevo contenido. La posición absoluta te da mas libertad en el diseño porque puedes colocar los elementos donde te guste y en combinación con Z-index es excelente para los diseños líquidos. Pero lo mejor es usarlas a todas, sacando el máximo potencial de css.

2 respuestas a “11 Tips a la hora de Maquetar CSS”

  1. Norke dice:

    Muy buen post. Solo haría una aclaración: Algunos navegadores computan un pixel adicional al ancho de las cajas por cada pixel del grosor del borde, es decir una caja de width 100px con un border-left de 1px computan una caja de 101px de ancho.

    Para evitarlo, en lugar de usar border, podemos usar outline cuando queramos saber los límites del elemento.

    Saludos.

  2. Ezequiel M. dice:

    Gracias por tu aporte! :)

Deja un comentario