No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

CSS custom properties

17/22
Recursos

Aportes 12

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

MY NOTES FOR CUSTOM PROPIERTIES 😄
.
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.

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!!!

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 😃

Si somos desarrolladores front-end, este concepto de los components es quizá el más poderosos que tendremos en lo que respecta a productividad.

Ésto si lo veo saludable para con los desarrolladores, es muy intuitivo que si ves una etiqueta, pues la puedas cambiar desde css

¿Que pasa si no se siguieron buenas practicas y no existen variables dentro del :host?

Para los que seguimos las clases de la profa Teff, sabemos que ella ama el color: tomato; xD

este curso me está pareciendo muy bueno hasta el momento!!

🤯👏🏽👏🏽