Variables CSS en Componentes Web Reutilizables
Contenido del curso
Andres Felipe Pinchao Ramirez
Jimmy Buriticá Londoño
Christian Alvarenga
N40 M10
Lissett Paez
Brandon Argel Verdeja Domínguez
Roberto Medina
Frank Casanova
Woldev S.A.S
Rubén Ernesto Aragón Gil
Kenneth Angulo L
Kenneth Angulo L
Seba Cardoso
Jefred Bedoya
Jhoana España Urresty
Miguel Angel Reyes Moreno
Rubén Ernesto Aragón Gil
Gilbert Ardila
Andres Menchaca
MY NOTES FOR CUSTOM PROPIERTIES :D . Como se ha comentado en anteriores clases generar un componente reutilizable implica que no tenemos que ir hasta el código de este y cambiarlo, entonces lo que haremos es re asignar nuestros estilos por fuera.
Con shadow dom esta idea que se plantea de poder cambiar nuestros estilos por fuera no es posible, pero esto en cierto punto es mentira ya que podremos hacerlo atraves de las Custom Properties que son unas variables en donde las generamos y de valor estas tienen un estilo.
Lo que haremos es definir variables en nuestros host y luego agregárselas a nuestros elementos que estan dentro de los componentes para probarlas.
:host{ --primary-color:tomato; --secundary-color:salmon; --heading-primary: 30px; --heading-secundary: 25px; display: inline-block; width:100%; min-width:300px; max-width: 450px; } section{ background:var(--primary-color); } section div{ background: var(--secundary-color); } h1{ font-size: var(--heading-primary) } p{ font-size: var(--heading-secondary) }
Luego para poderlas modificar desde fuera del codigo establecido en el componente, lo que hacemos es modificarlas desde nuestro css, seleccionando lo que queremos modificar y reasignando el valor de la variable.
my-element{ --primary-color:blue; --heading-primary:40px; } .segundo{ --primary-color:red; } .tercero{ --secundary-color: lime; }
Podremos utilizar como selector el componente y clases que le establezcamos al componente.
Gracias por los comentarios del código que has hecho a lo largo del curso.
Me dieron ganas de crear una libreria, estilo Bootstrap con componentes y estilos prehechos.
Dios!!! casi acabamos el curso y me doy cuenta de que dominando webComponents básicamente puedes hacer una microempresa de applicaciones web!!! Solo necesitas crear tu sistemDesing, tu repositorio de componentes y desplegar!!! Es asi como trabajan compañias como wix!!!
jajajaja literalmente, estoy igual que
Explicación de por qué se nuestros estilos con menor especificidad sobre escriben a los proporcionados en :host: Explicación detallada
ㅤ
En resumen los estilos declarados en el :host son considerados como estilos por defecto, como los que ya tiene el navegador que podemos sobre escribir con cualquier tipo de especificidad, pero si el :host del componente tiene algún estilo con !important no podrá ser sobre escrito.
ㅤ
CSS custom properties
Los nombres de las propiedades que tiene el prefijo --, como --ejemplo-nombre, representan las propiedades personalizadas que contienen un valor que puede ser usado en otras declaraciones usando la función var.
ㅤ
Las propiedades personalizadas tienen como alcance los elementos en los que se declaran y participan en la cascada: el valor de dicha propiedad personalizada es el de la declaración decidida por el algoritmo en cascada.
ㅤ
💡 Distingue mayúsculas y minúsculas
// Es recomendable declarar las propiedades personalizadas dentro de la pseudo-clase :host getStyles() { return ` <style> :host { --primary-color: tomato; --secondary-color: salmon; --heading-primary: 30px; --heading-secondary: 20px; display: inline-block; width: 100%; min-width: 300px; max-width: 450px; } section { background-color: var(--primary-color); } section div { background-color: var(--secondary-color); } h1 { font-size: var(--heading-primary); } p { font-size: var(--heading-secondary); } </style> `; }
Después en el HTML o CSS podemos sobre escribir las propiedades personalizadas.
my-element { --primary-color: red; }
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Custom Elements</title> <link rel="stylesheet" href="style.css"> <style> my-element { --primary-color: blue; } .segundo { --primary-color: violet; --secondary-color: cyan; } .tercero { --primary-color: blueviolet; --secondary-color: lime; } </style> </head>
Hola:
Le puse unos estilos adicionales a la etiqueta my-element, y que no necesariamente son variables definidas dentro del componente:
Mi duda es: Esto no es tema de conflicto de estilos css, porque entonces pareciera que las variables, si nos sirven, pero sin ellas también podemos manipular los estilos del componente desde afuera.
Saludos :)
Ésto si lo veo saludable para con los desarrolladores, es muy intuitivo que si ves una etiqueta, pues la puedas cambiar desde css
Si somos desarrolladores front-end, este concepto de los components es quizá el más poderosos que tendremos en lo que respecta a productividad.
Para los que seguimos las clases de la profa Teff, sabemos que ella ama el color: tomato; xD
¿Por qué es mejor usar variables CSS?
Porque te otorgan el superpoder de la reutilización absoluta. Si construyes un botón o una tarjeta sin variables, sus colores, márgenes y fuentes quedarán fijos. Para usar ese mismo botón en otro proyecto con una identidad visual distinta, tendrías que duplicar el código y reescribirlo. Al implementar variables CSS, transformas tu componente en un camaleón. Puedes tener un único archivo de JavaScript que define la lógica y la estructura, mientras que el aspecto visual se inyecta dinámicamente desde el proyecto que lo consume. Esto no solo reduce la duplicación de código, sino que facilita enormemente el mantenimiento. Si en el futuro necesitas actualizar la lógica del componente, lo haces en un solo lugar y todos los proyectos que lo usan heredarán la mejora sin perder sus estilos personalizados.
Gracias
Los puntos clave para lograr componentes Web verdaderamente reutilizables mediante variables CSS son:
El reto del Shadow DOM
Por diseño, el Shadow DOM aísla los estilos internos del componente de los globales. Esto impide que los estilos externos afecten al componente, lo cual dificulta la personalización.
La solución: Custom Properties (Variables CSS)
Las variables CSS actúan como un "puente" que permite manipular estilos internos desde el exterior sin necesidad de modificar el código fuente del componente.
:host del componente, estableciendo valores por defecto.var(--nombre-variable).Flexibilidad y Reutilización
¿Cómo puedo cambiar los estilos de una etiqueta, por ejemplo h3, h2, de un componente desde otro archivo CSS? No entendí muy bien esa parte, ahí está usando variables, pero si tengo que modificar estos elementos también debería crear variables para el tamaño de fuente, el color de fuente, etc?
my-element.js
getTemplate() { const template = document.createElement("template"); template.innerHTML = ` <section class="card"> <div class="imagen_contenedor"> <img src=${this.img}> </div> <h4>${this.h3}</h4> <h3>${this.h2}</h3> <p>${this.texto}</p> <a href="#">${this.link}</a> </section> ${this.getStyles()} `; return template; } getStyles() { return ` <style> :host{ --card-color: #F7F7F7; display: inline-block; } .card{ margin: 10px; width: 300px; height: auto; padding: 30px; } section{ background: var(--card-color) } .imagen_contenedor img{ height: 200px; } </style> `; }
style.css
body { font-family: Arial, Helvetica, sans-serif; } my-element { --card-color: #ffd1d1; } my-element h3 { // esto no funciona color: red; }
Díganme si entendí ... ¿estamos creando compenentes base que después podrán estar disponibles para que alguien más las use como guste, modificando cosas que NO sean las que nosotros creamos en JS?
este curso me está pareciendo muy bueno hasta el momento!!
🤯👏🏽👏🏽