Breaking

Post Top Ad

Your Ad Spot

viernes, 4 de octubre de 2019

Las 4 reglas CSS de multiplicidad

Una forma rápida y fácil de mantener su CSS limpio y bien estructurado es recordar (lo que voy a titular) las cuatro Reglas de Multiplicidad de CSS. Son:
  • Las declaraciones múltiples pueden vivir en una sola regla.
  • Múltiples selectores pueden prefacio el mismo conjunto de reglas.
  • Se pueden aplicar varias reglas al mismo selector.
  • Se pueden establecer múltiples clases en un solo elemento.
Las declaraciones múltiples en una sola regla es la más fundamental de las cuatro Reglas CSS de Multiplicidad. En pocas palabras, significa que puede tener tantas declaraciones CSS como desee entre sus llaves de apertura y cierre, de esta manera:
cuerpo {
 propiedad-1: valor;
 propiedad-2: valor;
 ...
 propiedad-infinito: valor;
}
Múltiples selectores realmente pueden ayudar a mantener limpio su CSS al agrupar sus reglas. Considere el siguiente ejemplo:
pags {
 tamaño de fuente: 110%;
 color: # 333;
}
ul {
 tamaño de fuente: 110%;
 color: # 333; 
}
Cuando las reglas son idénticas como esta, puede combinarlas utilizando selectores secuenciales, de esta manera:
p, ul {
 tamaño de fuente: 110%;
 color: # 333;
}
Pero, ¿qué sucede cuando tiene dos selectores que tienen propiedades muy similares, pero no del todo idénticas? Ahí es cuando entran en juego múltiples reglas . Aquí hay un ejemplo:
pags {
 tamaño de fuente: 110%;
 color: # 333;
}
ul {
 tamaño de fuente: 110%;
 color: # 333;
 peso de fuente: negrita;
}
El párrafo y la lista desordenada comparten algunas propiedades en común, pero no todas. Pero puede consultar la lista desordenada más de una vez, por lo que podría escribir algo como esto:
p, ul {
 tamaño de fuente: 110%;
 color: # 333;
}
ul {
 peso de fuente: negrita;
}
Otra forma de abordar tener múltiples reglas en común entre los elementos es crear múltiples clases . Por ejemplo, podría crear una regla como esta:
.envase {
 acolchado: 5px;
 borde: 2px sólido #ccc;
 color de fondo: # f2f2f2;
}
Pero luego, un tiempo después, decides que quieres algo que sea casi igual a tu clase de contenedor, pero el texto dentro es más grande y en negrita. Es posible que sienta la tentación de escribir una clase completamente nueva que incluya el relleno, el borde, el fondo y el tamaño y el peso de la fuente que necesita. Pero en su lugar, podría crear una segunda clase que contenga solo las diferencias entre los dos, así:
.fuerte {
 tamaño de fuente: 150%;
 peso de fuente: negrita;
}
Y luego aplique ambas clases a su elemento XHTML de esta manera:
<div class = "contenedor fuerte">
 Este texto está en nuestro contenedor,
 pero también es grande y audaz.
</div>
Al usar los cuatro ejemplos de multiplicidad juntos, puede mantener su CSS con un aspecto esbelto y limpio. Y afortunadamente, a diferencia de la versión cinematográfica de Multiplicity , Michael Keaton no se vuelve más tonto cuanto más los usas.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas