M√°s

    Entonces, ¬Ņpodemos usar variables CSS todav√≠a?

    - Advertisement -

    Con toda la charla √ļltimamente sobre finalmente poder usar CSS Grid, me hizo pensar: ¬ŅQu√© otras caracter√≠sticas incre√≠bles de CSS puedo usar ahora? Variables CSS fue el que me vino a la mente al instante.

    Ha pasado un tiempo desde que escuché algo sobre las variables CSS y agrega un conjunto de herramientas completamente nuevo y una forma de pensar para el desarrollo front-end que me emociona.

    Una actualización de las variables CSS

    Las variables CSS han estado dando vueltas durante algunos a√Īos, pero no parecen tener un uso generalizado. Con la popularidad de los preprocesadores como Sass, los desarrolladores frontend eliminaron esa picaz√≥n variable hace mucho tiempo.

    Me entusiasmé por primera vez con las Variables CSS alrededor de 2014 y, desde entonces, han entrado y salido de mi esfera de interés. Recién ahora estoy considerando llevarlos a los sitios de producción y les mostraré lo simples y fáciles que son de usar.

    Declaración de la variable

    Declarar la propiedad personalizada es simple: solo necesitamos crear la propiedad que queremos y agregar dos guiones al principio. Estos se pueden declarar en cualquier lugar, pero agregarlos a :root parece ser un buen enfoque en este momento.

    --my-reusable-value: 20px;

    Acceso a la variable

    Usar la propiedad también es bastante simple. Accedemos a él a través de la función var() y usamos la propiedad que declaramos anteriormente.

    padding: var(--my-reusable-value);

    ¬ŅNo es eso simple y glorioso?

    Las variables CSS son fáciles de usar y bastante fáciles de recordar. El mayor desafío con las variables CSS (como con la mayoría de CSS) es saber el momento y el lugar adecuados para usarlas. Lanzarlos al azar es una forma segura de crear un lío de una hoja de estilo y con estas variables agregadas, la depuración probablemente se vuelva más difícil.

    Se deben considerar los casos de uso adecuados y las estrategias para usarlos, y aquí es donde se debe concentrar la mayor parte de su esfuerzo.

    Un caso de uso interesante: módulos receptivos

    En el siguiente ejemplo, le mostraré un ejemplo básico de cómo construyo actualmente un componente receptivo usando variables Sass. Luego, le mostraré cómo podría mejorarse con las variables CSS de una manera que no es posible con un preprocesador. Este es un caso de uso específico que no se aplica a todas las formas en que se usan las variables, pero es para mostrar cómo las variables CSS se pueden usar de manera diferente.

    ejemplo descarado

    ver la pluma Variables CSS: caso de uso receptivo sin variables CSS de Adam Hughes (@perdi mi cerebro) en CódigoPen.

    Cuando uso Sass, he probado algunas metodologías diferentes. Mi versión actual de ir a está colocando consultas de medios dentro de los bloques CSS que quiero cambiar. Aquí puedo usar una variable, CSS estándar, mixin o una extensión para modificar este elemento sin esparcir los estilos del componente por todas partes.

    Un problema con esto es tener m√ļltiples consultas de medios y muchas variables que est√°n relacionadas pero no. Podr√≠a usar mapas para las variables que dar√≠an m√°s organizaci√≥n, pero creo que el problema principal es que estamos usando m√ļltiples variables para definir una propiedad. Esto se siente mal.

    Las variables de Sass se usan con anticipación, lo que significa que tenemos que planificar todas las formas en que las vamos a usar. Facilitan el desarrollo, pero técnicamente no nos proporcionan nuevos superpoderes.

    Variables CSS al rescate

    ver la pluma Variables CSS: caso de uso receptivo de Adam Hughes (@perdi mi cerebro) en CódigoPen.

    No es necesario declarar las variables CSS por adelantado, son din√°micas. Esto es √ļtil de una manera muy diferente. Ahora podemos cambiar condicionalmente las variables desde cualquier lugar y en contextos espec√≠ficos, como consultas de medios.

    Al servir nuestros estilos de consulta de medios desde el principio, podemos reducir la cantidad de consultas de medios dispersas para un estilo receptivo. También brinda una forma realmente agradable y limpia de ver el espaciado general y el estilo tipográfico en diferentes formatos.

    Creo que los dise√Īos receptivos y la tematizaci√≥n son dos casos de uso excelentes para las variables CSS, pero hay muchas posibilidades.

    ¬ŅEn qu√© se diferencian las variables CSS de las variables SASS?

    Sass Variables y CSS Variables son dos bestias diferentes, cada una con sus propias ventajas y desventajas.

    Las variables de Sass se pueden organizar mejor

    Debido a la popularidad de Sass y la naturaleza m√°s program√°tica de Sass, con el tiempo han evolucionado patrones de organizaci√≥n m√°s profundos. Particularmente me gustan los mapas Sass y la combinaci√≥n de variables de tipo similar en los mapas. Los colores, los tama√Īos y los accesos directos para las rutas parecen ser opciones populares para incluir en los mapas.

    Debido al uso relativamente menor de variables CSS, las mejores pr√°cticas a√ļn tienen que evolucionar. Los mapas y las matrices no son posibles de la misma manera en CSS, por lo que estos nuevos patrones organizativos deber√°n innovar y resolver los problemas de una manera diferente a Sass.

    Las variables CSS se pueden cambiar din√°micamente

    Las variables CSS son manejadas dinámicamente por el navegador en tiempo de ejecución, mientras que las variables Sass se usan cuando se compila el CSS.

    Este es el principal punto de venta de CSS Variables para mí. Será interesante ver cómo la gente usa esta función con el tiempo y si estará a la altura de su potencial.

    Las variables CSS son una característica estándar del navegador

    Personalmente, soy de la opinión de que cuantas más cosas podamos eliminar de paquete web, Tragoy cualquier-nuevo-marco-que-está-disponible-ahora, el mejor. Tener nuevas características interesantes del navegador significa que no tenemos que depender de la compilación y los marcos de JavaScript para hacer cosas que los desarrolladores consideran esenciales. Me arriesgaría a adivinar que un alto porcentaje de desarrolladores frontend usan variables en su CSS de una forma u otra, por lo que todos los que usan esta característica central parecen algo sensato. Significa una cosa menos en el paso de compilación (que creo que todos podemos estar de acuerdo en que se está volviendo bastante inmenso en estos días) y más consistencia en toda la web.

    ¬ŅC√≥mo es el soporte?

    El soporte se ve muy bien con una excepción evidente: IE 11. La mayoría de los navegadores modernos admiten variables CSS y Edge tiene algunos errores.

    En 78.11% esto es más alto que CSS Grid (en el momento de escribir este artículo), pero la compatibilidad con IE11 podría ser un problema.

    Entonces, ¬Ņpodemos usar variables CSS todav√≠a?

    Creo que el momento es ahora. Esa compatibilidad con IE11 no va a mejorar, y sabemos por versiones anteriores de Windows que a algunas personas les lleva mucho tiempo actualizar. Pero la compatibilidad con los navegadores modernos es excelente, lo que significa que deberíamos buscar variables CSS y experimentar con las posibilidades.

    Sin embargo, eso no significa que no debamos olvidarnos de nuestra responsabilidad con respecto a la compatibilidad con navegadores m√°s antiguos. Se debe considerar un sistema alternativo b√°sico que use una etiqueta de soporte, o incluso un polyfill, para navegadores m√°s antiguos, m√°s a√ļn si el uso real de su sitio est√° mucho m√°s sesgado hacia navegadores m√°s antiguos.

    Es un momento emocionante para el desarrollo frontal y, por mi parte, estoy ansioso por usar más de estas tecnologías en mis sitios de producción.

    Populares

    Más de esta categoría

    DEJA UNA RESPUESTA

    Por favor ingrese su comentario!
    Por favor ingrese su nombre aquí

    Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.