5 consejos para aprenderse todas las propiedades CSS de forma muy sencilla

Mucha gente odia CSS porque son muchos estilos que aprenderse, y además cada propiedad puede tener diferentes valores, y cada valor puede ser diferente en muchos sentidos al funcionamiento ya en el sitio. La verdad es que a diferencia de HTML, donde sólo usamos una minúscula cantidad de etiquetas del total que nos ofrece, en CSS podemos llegar a ocupar la mayoría de las propiedades CSS si queremos que nuestro sitio esté estilizado hasta el último pixel de la pantalla.

Es por eso que les traigo 5 consejos para aprenderse las reglas y propiedades CSS sin tener que memorizarlas y tener que recurrir a un librito salvador o en todo caso a internet cada vez que no recordamos cuál es la propiedades que queremos saber.

1.  Práctica, no copies tus estilos

Mucha gente se cansa de pensar y mejor copia de los proyectos que tiene los estilos y los adapta. No es mala la práctica de hecho, pero es una práctica que debe hacerse cuando ya se domina CSS, no cuando se está aprendiendo. Si se quiere aprender de verdad a usar los estilos la única forma es practicar y practicar hasta el cansancio, ya que de esa forma el cerebro se acostumbra a ver las propiedades a tal punto que ni siquiera tendrás que pensar en qué usar para estilizar tu sitio.

2. Piensa en lo que quieres conseguir

Mucha gente que empieza no sabe ni lo que quiere diseñar con CSS pero ya está buscando la propiedad para hacerlo. Lo primero es pensar muy bien como se quiere el sitio, para después partir con base en esa idea. Por ejemplo, si lo que quieres es cambiar el color de fondo, lo más seguro es que uses la propiedad background-color.

Los nombres de las propiedades son en inglés, por lo que lo más seguro es que si queremos aumentar el margen de un elemento lo que necesitemos es usar la propiedad “margin”, así de sencillo. Hay propiedades como la de “clip” o “display” o “position” que son poco directas en el uso, pero el resto si lo es, por lo que tampoco es difícil en aprenderse las reglas.

3. No uses herramientas visuales, mejor solo código

Otro gran problema es que la gente se acostumbra a usar Dreamweaver o cualquier otra herramienta que ayuda a preparar estilos sin tener que escribir el código. Es una práctica que solo recomendaría cuando ya las dominas y no dispones de mucho tiempo, quieres diseñar muy rápido pues. La gente que no sabe y aprende a usar estas herramientas aprender a usarlas, mas no aprende CSS, y luego con el problema de los sufijos pues hace que el desarrollador o diseñador se confunda mucho más.

4. Trata de imitar el diseño de otros sitios

No hay mejor forma de aprender que imitando el diseño de otros sitios. Yo aprendí así, viendo sitios con diseños muy bonitos o elementos diseñados muy atractivamente, y como yo quería lograr un efecto similar me propuse imitar ese resultado. No es copiar literalmente el CSS de ese elemento, es imitarlo sin tener que ver sus propiedades, porque un elemento o diseño puede verse igual con 20 propiedades o con 5, todo depende de cuanto detalle puedas encontrar en el. Todo esto hará que mejores en el uso de las propiedades, y por ende que las aprendas.

5. Obtén un patrón para trabajar

La gente que no sabe programar tiende a programar de varias formas cada vez que lo hace, pues no encuentra una forma de programar que se adecue a sus necesidades. En CSS es lo mismo, la gente que no sabe diseñar con CSS tiende a usar diferentes estilos para las mismas partes de un sitio web. No es malo pero si para hacer un fondo usas diferentes propiedades lo más probable es que nunca aprendas correctamente a diseñar un fondo para un sitio.

No es que todos los sitios sean iguales, pero con la práctica aprendes que ciertas reglas CSS son para partes específicas de un sitio, como por ejemplo el box-sizing para la etiqueta body y html. Todo esto se aprende leyendo, viendo el formato de expertos, pero al final teniendo un estándar de trabajo, donde tu sabes y aplicar estilos de acuerdo a las etiquetas y secciones de tu sitio.

¿Tu ya dominas las propiedades CSS sin problema?

Imagen vía Flickr