Introducción a las propiedades personalizadas de CSS

 

Al escribir CSS válido y usar propiedades personalizadas, puede proteger su código en el futuro; Aquí tienes una introducción a las propiedades de CSS.

Una de las mejores características de los procesadores CSS son las variables. Tener la capacidad de declarar una vez y reutilizar la variable en su proyecto no debe ser opcional en ningún sistema.

5 características de CSS y cómo usarlas

Usar un preprocesador como Sass (obtener más información en nuestro artículo sobre ¿qué es Sass? ) Le brinda al menos un paso de compilación adicional, que puede ser una molestia si solo quiere construir algo rápido. CSS ha recorrido un largo camino desde los días oscuros de los trucos de tablas, así que echemos un vistazo a uno de los aspectos más útiles: las propiedades personalizadas.

Comenzaremos con un ejemplo simple.

:root {
–color-red: #fc4752;
}

.site-navigation {
background-color: var(–color-red);
}

.site-footer {
color: var(–color-red);
}

El pseudo-selector root

El pseudo-selector root se dirige al elemento padre de nivel más alto en el DOM, dando acceso a todos los elementos a –color-red . Sí, la definición de las variables CSS debería comenzar con – , y puede acceder a ellas desde cualquier lugar con var () . Bueno, en cualquier lugar que esté en cascada bajo nuestro : selector de raíz .

Con var () también puede definir un valor de reserva, que se utilizará si la variable dada es inalcanzable o no existe

.site-navigation {
background-color: var(–color-red, red);
}
Los valores se heredan del DOM, lo que significa que puede hacerlos más específicos.

:root {
–color: red;
}

.site-navigation {
–color: green;

background-color: var(–color);
}

.site-footer {
color: var(–color);
}

Cada var (- color) es rojo, excepto cada var (- color) en la navegación del sitio . En términos generales, no es una práctica ideal sobrescribir un valor que ya está definido, pero hay casos en que un valor de alcance sigue siendo la solución más adecuada.

Elementos básicos

Estos son los elementos básicos, pero puedes hacer mucho más. Un ejemplo útil para el diseño web sensible es el cambio de diseño según el tamaño de la ventana gráfica.

:root {
–color-red: #fc4752;
–flex-layout: row;
}

@media (max-width: 640px) {
:root {
–flex-layout: column;
}
}

.site-navigation {
display: flex;
flex-direction: var(–flex-layout, row);

background-color: var(–color-red, red);
}

.site-footer {
color: var(–color-red);
}

Bajo 640px, la consulta de medios se activa, cambiando la dirección de flexión a columna en la clase de navegación del sitio, haciendo que su contenido sea vertical (columna) en lugar de la horizontal predeterminada (fila). En este ejemplo, debido a la variable predeterminada dada a la navegación del sitio, ni siquiera necesita la definición inicial : raíz de –flex-layout; en lugar de eso irá directamente a la fila.

Bajo 640px, la consulta de medios se activa, cambiando la dirección de flexión a la columna y haciendo que el contenido sea vertical en lugar de horizontal

Esto es genial, pero no es todo diversión y juegos todavía. Por ejemplo, dado que la consulta de medios no es un elemento, el valor del punto de interrupción no puede provenir de una propiedad personalizada. Si bien el Grupo de Trabajo CSS tiene un borrador del uso de env () para consultas, la implementación del proveedor y el soporte adecuado probablemente estén a muchos años de donde están las cosas hoy en día.

Casos más avanzados de uso

Esta bien. Nos apegaremos a lo que tenemos ahora. Un caso de uso más avanzado para una propiedad personalizada es el cambio de temas. Puede definir un tema base, construir su sitio web a su alrededor y simplemente cambiarlo, con el navegador haciendo el trabajo pesado. Y ni siquiera es tan pesado.

Esencialmente, piense que está en la línea del Modo Nocturno de Twitter, pero sin que usted realmente cambie el CSS (lo veo).

El valor seleccionado del color de entrada reemplaza el valor de color –color del documento , realizando el cambio sin problemas. Puedes jugar con modos de mezcla, colores de canal alfa o pngs: infinitas posibilidades y diversión.

Puedes construir tu sitio web alrededor de un tema base y simplemente cambiarlo, con el navegador haciendo el trabajo pesado

Ahora con su CSS preparado para el futuro, que no depende de ningún desarrollador externo y utiliza solo propiedades personalizadas, es muy probable que esté cubierto y listo para comenzar la producción.

Modulos CSS

Pero, ¿qué pasa si quieres algo más que variables en tu código, digamos módulos CSS? A partir de hoy, para las características de CSS existentes como módulos o anidamiento, no podría prescindir del paso de compilación adicional por más tiempo, pero puede implementarlo con la dulce promesa de no tener que volver a escribir el código cuando los proveedores alcancen la especificación.

En lugar de refactorizar su CSS cada vez que quiera mejorar su salida, debe escribir su código en una especificación alineada de esa manera en primer lugar. Esta es la principal diferencia entre preprocesadores y postprocesadores. Un preprocesador en realidad escribe el CSS por usted (básicamente, desde un archivo de texto), mientras que un postprocesador alinea su CSS ya válido para obtener más soporte para el navegador, este último le brinda más flexibilidad en el proceso.

El uso del método nativo siempre es mejor que la solución, y tener el conocimiento práctico de las tecnologías futuras es la mejor posición en la que puede estar al aprender CSS.

Háblame ;)
¿Necesitas ayuda?
Hola! estás interesado en mis servicios? hablemos por WhatsApp ;)