El concepto de anidamiento y agrupación es muy importante para que un desarrollador web escriba códigos precisos. Puede agrupar y anidar elementos para reducir la cantidad de código que escribe, lo que reducirá la longitud de su código y permitirá que las páginas se carguen más rápido. Es una forma de simplificar su código. Con la ayuda de Nesting and Grouping, podemos ser más específicos en nuestro código. En este artículo, veremos cómo el anidamiento y la agrupación ayudan a optimizar el código, lo hacen eficiente y aumentan la legibilidad.
Anidamiento:La propiedad de anidamiento en CSS facilita anidar una regla de estilo dentro de otra, con el selector de la regla secundaria que es relativo al selector de la regla principal. Ayuda a aumentar la modularidad y la capacidad de mantenimiento de las hojas de estilo CSS y, por lo tanto, aumenta la legibilidad general del código. Por ejemplo, si escribe un módulo CSS estructurado, en lugar de especificar los selectores separados para cada elemento HTML, es decir, mediante el uso de muchas clases o selectores de ID, simplemente puede especificar las propiedades de los selectores dentro de otros selectores. Al anidar las propiedades CSS, los elementos HTML forman una forma con estructura de árbol. El anidamiento es un atajo para crear reglas CSS para múltiples selectores para una propiedad específica. Entonces, en lugar de reescribir el mismo conjunto de propiedades para los diferentes selectores, simplemente podemos anidar selectores dentro de otros selectores. Por esta razón,
Sintaxis:
class1_selector class2_selector id_selector {
property: value;
}
Ejemplo:
table tr th {
background-color: beige;
}
Acercarse:
- Seleccione el selector de id/clase y agregue un espacio para separar uno del otro.
- Agregue las propiedades de estilo para los elementos.
Nota: Sea específico con el orden de anidamiento.
Ejemplo: En este ejemplo, anidaremos la etiqueta <a> dentro de la etiqueta <p> y la etiqueta <th> dentro de la etiqueta <tr>.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
p a {
color: green;
}
table tr th {
background-color: beige;
}
</style>
</head>
<body>
<p>
This is a
<a href="https://ide.geeksforgeeks.org/">link</a>
within a paragraph element.
</p>
<table style="width: 100%">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Ram</td>
<td>50</td>
</tr>
<tr>
<td>Rahul</td>
<td>65</td>
</tr>
<tr>
<td>Vikram</td>
<td>26</td>
</tr>
</table>
</body>
</html>
Salida: Obtuvimos la etiqueta <a> como color verde y <th> de color beige usando el anidamiento.
anidando
Agrupación: la agrupación se utiliza para seleccionar varios elementos juntos para aplicarles las propiedades de estilo comunes. Por esta razón, ayuda a reducir la longitud del código que tiene múltiples selectores con las mismas propiedades. Esto hace que el código sea fácil de leer. Los tiempos de carga de la página y el tiempo de desarrollo del código también se reducen cuando se usa la agrupación.
En lugar de escribir este código largo, especifica las mismas propiedades para diferentes selectores:
h1 {
padding: 5px;
color: grey;
}
p {
padding: 5px;
color: grey;
}
Podemos agruparlos y escribir así y necesitamos la coma ( , ) para agrupar los distintos selectores.
h1, p {
padding: 5px;
color: grey;
}
Acercarse:
- Agregue la etiqueta <style> dentro de la etiqueta <head>.
- Agregue varias etiquetas dentro de la etiqueta <body> con contenido.
- Dentro de la etiqueta <style>, podemos agrupar nuestros selectores que contienen las mismas propiedades.
Ejemplo: En este ejemplo, agruparemos varios selectores.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p, a {
text-align: center;
color: green;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h2>Smaller heading!</h2>
<p>This is
<a href="https://ide.geeksforgeeks.org/">
anchor tag
</a>
</p>
<p>This is a paragraph.</p>
</body>
</html>
Producción:
selectores agrupados con las mismas propiedades
Diferencia entre anidamiento y agrupación:
S. No. |
Anidamiento |
Agrupamiento |
|---|---|---|
| 1. |
La propiedad de anidamiento facilita anidar una regla de estilo dentro de otra, con el selector de la regla secundaria que es relativo al selector de la regla principal. |
La propiedad de agrupación proporciona las mismas propiedades con valores a varios selectores a la vez. |
| 2. |
Puede ayudar a simplificar y administrar las propiedades de los diferentes elementos a la vez, pero puede ser complicado si se aumenta la cantidad de elementos anidados que contienen las mismas propiedades. Puede ser difícil administrar tal propiedad de anidamiento. |
Es simple aplicar las propiedades a la cantidad de elementos diferentes a la vez y se puede administrar fácilmente. |
| 3. |
En este caso, si necesitamos modificar la propiedad para cualquier elemento específico, es decir, el elemento principal o el elemento secundario en CSS, debemos cambiarlo manualmente para ese elemento específico, si está anidado. Para código de gran tamaño, puede ser una forma ineficiente de administrar las propiedades de CSS. |
No existen restricciones como tales en la agrupación. |
Publicación traducida automáticamente
Artículo escrito por saksham894954 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA