5 trucos CSS indispensables que nunca debes olvidar

Cuando agarras práctica usando CSS empiezas a ver si hay algunos trucos para resolver los problemas de día a día en los estilos. Uno de los más comunes que he visto es la de centrar un elemento o un contenedor, de tal forma de que siempre aparezca al centro y no tenga un espacio fijo. Otro de los inconvenientes que siempre he visto es cuando hacemos responsive design, es decir, el saber cómo escalar elementos para que se vayan adecuando al tamaño de la pantalla.

Yo les traigo 5 trucos CSS indispensables que nunca debes olvidar, son tips y trucos bien sencillos que todos deberían conocer para aprender a hacer el trabajo mucho más rápido y que después de que los conozcan los usarán para siempre.

Selector universal

En CSS está el selector universal, el que tiene mucho más espacio que la de body y abarca a todos los elementos habidos y por haber, así que si desean aplicar un estilo global este es el que deben usar.

Centrar una capa

Aprovechando las propiedades del margen automático podemos hacer centrar una capa justo en el centro siempre y cuando le definamos un ancho específico.

Padding sin alterar tamaño del contenedor

Si nosotros hacemos un contenedor de 100px X 100px veremos que si le aplicamos un padding de 10px el tamaño ahora es de 120px X 120px, y si no queremos que pase eso usaremos el box-sizing para hacer que el espacio interior se inserte y no solo se adjunte al contenedor, logrando mantener el tamaño deseado.

Redimensión automática de elementos

Con el responsive design no necesariamente tenemos que definir tamaños para cada resolución, para eso existe la medida en porcentaje (%) que nos permite olvidarnos de medidas fijas. Lo que hace el porcentaje es adecuar el elemento de acuerdo a la proporción de su contenedor, por lo que si definimos una imagen al 100% siempre estará al tamaño de la pantalla, así sea de 1280x800 la pantalla, o sea de 800x600.

Centrar una capa fija

Las capas fijas son aquellas que tienen un position: fixed y nos permiten anclar en la pantalla a esa capa para que nunca se oculte. Si queremos centrar esta capa debemos hacer un truco con el margen de nuevo, y con la posición de arriba, derecha, izquierda, etc, según sea el caso. El margen es para centrarla porque sin el se centra de forma izquierda superior y no centro de elemento.