Conceptos importantes de CSS

CSS (Cascading Style Sheets) es un lenguaje basado en reglas. Se utiliza para diseñar y diseñar páginas definiendo grupos específicos de estilos que se aplican a elementos o grupos de elementos.

 

Si recién está comenzando, aprenda los siguientes conceptos de CSS para obtener una base sólida y una comprensión del lenguaje basado en reglas.

 

Cascading, Inheritance & Specificity

Cascada, herencia y especificidad

CSS (Cascading Style Sheets) es un lenguaje basado en reglas. Se utiliza para diseñar y diseñar páginas definiendo grupos específicos de estilos que se aplican a elementos o grupos de elementos.

 

Si recién está comenzando, aprenda los siguientes conceptos de CSS para obtener una base sólida y una comprensión del lenguaje basado en reglas.

 

Cascada

Es el concepto fundamental sobre cómo se creó CSS. Como su nombre indica, las hojas de estilo en cascada (de arriba a abajo). Esto significa que el orden de las reglas CSS es importante y cuando se aplican dos reglas que tienen la misma especificidad, la que viene en último lugar en la CSS es la que se utilizará.

 

Herencia

Algunos valores de propiedad CSS establecidos en elementos primarios son heredados por sus elementos secundarios, y otros no. Esto a menudo puede ser confuso, pero el principio detrás de esto está diseñado para permitirnos escribir menos reglas CSS.

 

Se heredan propiedades como 'color' y 'font-family', por lo que a menudo usamos el elemento BODY para asignarlas.

 

También vale la pena saber que cada propiedad CSS acepta cuatro valores para controlar la herencia, esencialmente pudiendo activar y desactivar la herencia.

 

Especificidad

Como varias reglas se aplican a un elemento, las reglas en conflicto se ordenan y aplican por especificidad. Cada selector tiene una clasificación de especificidad diferente que son:

 

Id's

Class and Pseudo Class's

Element selectors

 

A medida que las reglas entran en conflicto, CSS determina la regla con la mayor especificidad y la aplica al elemento.

Cascade and inheritance

Calculadora de especificidad

 

Declaraciones importantes

La propiedad !Important en CSS anula cualquier regla especificada y se asegura de que se aplique la regla denotada por !Important. Sin comprender los tres conceptos anteriores, es fácil acostumbrarse a usar !Important en todas las propiedades que no se aplican como se esperaba.

 

Sin embargo, es importante comprender que la mayoría de los desarrolladores consideran que el uso de! Es un antipatrón importante. Lea los artículos recomendados a continuación para comprender mejor cuándo y cómo usar !Important.

 

Media Queries

Las consultas de medios CSS se utilizan para cambiar el estilo de su sitio dependiendo de qué resolución de pantalla o dispositivo se esté utilizando.

 

Las consultas de medios se pueden combinar para crear escenarios específicos para cuando desee aplicar ciertas reglas a esa situación. Esto creó y permitió que el concepto de diseño adaptativo funcionara coherentemente en el navegador.

Using media queries

css media queries

 

Flexbox y rejilla

Con los años se ha hecho evidente que CSS no es fácil de entender o dominar. Afortunadamente, a medida que el lenguaje ha evolucionado, se han introducido conceptos como Flexbox y Grid. Ambos ofrecen una solución que hace que el posicionamiento y el diseño de la página sean mucho más fáciles, rápidos y receptivos.

 

CSS Grid Layout es un sistema de diseño bidimensional. Le permite distribuir contenido en filas y columnas, y tiene muchas características que hacen que la creación de diseños complejos sea sencilla.

 

El diseño de Flexbox es un sistema de diseño basado en dirección. Le da la capacidad de alterar el ancho, la altura y el orden de sus elementos para llenar mejor el espacio disponible.

Grid garden

MDN's - Grids

 

 Referencias:

Important CSS Concepts To Learn.