Tips para desarrollar tus habilidades CSS

El conocimiento a fondo de CSS es una habilidad fundamental para el desarrollo de páginas web. Los cambios que ha sufrido este lenguaje de estilos desde su lanzamiento, en 1996, van de la mano con las múltiples actualizaciones que sufren los navegadores, y mantenerte al día de las nuevas propiedades y su compatibilidad es muy importante.

Es muy común frustrarse cuando usas alguna propiedad y los elementos no se ven o se colocan como lo deseas, recuerda mucho a colocar una imagen en Word y ver cómo todo el documento se desbarata.

¿Te ha pasado alguna vez? ¡No te preocupes! Te tenemos unos tips para aprovechar todo tu potencial y el de CSS

 

Especifica el box-sizing de la página y sus elementos

El box-sizing determina el comportamiento de las dimensiones de los elementos.

Si usas un box-sizing: content-box le estás indicando al navegador que los márgenes, paddings y bordes no están incluidos dentro del ancho y alto de los elementos. Por ejemplo si tienes un <div> con un ancho de 100px y un borde de 5px, el ancho real del elemento será de 110px.

En cambio si usas box-sizing: border-box los márgenes, paddings y bordes están considerados dentro del ancho y alto del elemento. Siguiendo el ejemplo anterior, el ancho total se mantendría en 100px pero el espacio para el contenido sería de 90 px de ancho.

 

No te olvides de los selectores

¡Pikachu, te elijo a tí! Los selectores siempre ayudan a escoger exactamente lo que deseas y con CSS no es la excepción. Tienes a tu disposición varios selectores que te permiten ser más exacto a la hora de asignar estilos a tu HTML, estos son algunos que te ayudarán.

 

Selector de hijo en primer nivel >

Imagínate que tienes un <div> con clase padre que es contenedor de varios <div> en cascada y solamente quieres dar estilos al primer <div> interior. Esto puedes indicarlo al navegador usando el selector >

Selector de hermano adyacente +

Este selector indica al navegador que otorgue estilos al primer hermano que esté a continuación del elemento indicado:

Selector de hermano predecesor ~

Este selector es útil para darle estilos a todos los elementos hermanos que vengan a continuación del predecesor indicado:

Selectores especiales

CSS brinda varios selectores especiales que pueden incluir o excluir elementos en grupo o seleccionar un elemento en específico dentro un grupo. Los más usados son:

:first-child y :last-child

Seleccionan al primer o último elemento de un grupo de elementos, por ejemplo, el primer o último <li> de una lista.

 

:first-of-type y :last-of-type

Seleccionan el primer o último elemento de su tipo o clase. A diferencia de los selectores anteriores, estos afectan a todos los elementos que compartan su tipo o clase dentro del Html y no solo del grupo de hijos.

 

:nth-of-type()

Con este selector puedes seleccionar uno o varios elementos de acuerdo con su número de posición. Dentro de los paréntesis puedes indicarle el número de posición. Utiliza odd si quieres seleccionar impares o even si quieres seleccionar pares.

También puedes indicarle una fórmula de grupo siguiendo este formato: (An+B) dónde A es el número elementos para agrupar y B es el número del elemento dentro de ese grupo. Por ejemplo (2n+2) significa que cada 2 elementos estás seleccionando el segundo.

 

Las unidades de medida lo son todo

Tienes a disposición varias unidades de medidas que puedes asignar a tus elementos. La más común es la unidad absoluta de píxeles, pero existen unidades relativas que varían en función del tamaño o proporción del texto o la ventana del navegador. Las más comunes son:

em Unidad relativa al tamaño de la fuente del elemento

rem Unidad relativa al tamaño de la fuente del elemento raíz

vw Unidad relativa en % al ancho de la ventana

vh Unidad relativa en % al alto de la ventana

% Unidad relativa al tamaño del padre del elemento

 

Investiga, lee y ¡practica!

¡Elemental mi querido Watson! El mejor consejo que puedes recibir es: “Siempre mantente informado”. Con el rápido avance de las tecnologías web es necesario estar al día y practicar constantemente, y con CSS no es la excepción.

Ten en cuenta que con cada nueva versión los navegadores te permiten usar más propiedades que te pueden simplificar la vida como, por ejemplo, los estilos FLEX, pero para no marearte lo dejaremos para otra oportunidad.

¿Tienes dudas o necesitas ayuda? Ponte en contacto con nosotros, estaremos encantados de ayudarte.