¿Cómo utilizar clases, IDs y Linked styles en el Editor de bloques de Waclis?

Cuando personalizas elementos dentro del Editor de bloques de Waclis, muchos componentes incluyen los campos:

• ID

• Class

Además, en determinadas situaciones puede aparecer una advertencia:

Linked styles

Estas tres herramientas están relacionadas con la forma en que se identifican y se comparten estilos entre elementos.

Comprenderlas es fundamental cuando:

• varios elementos cambian al mismo tiempo;

• quieres que varias tarjetas compartan un mismo diseño;

• necesitas modificar solamente un elemento;

• utilizas CSS personalizado;

• clonas componentes;

• trabajas con HTML;

• utilizas ChatGPT, Claude o Gemini para generar modificaciones.

¿Qué es una Class?

Una Class es un nombre que puede asignarse a uno o varios elementos para identificarlos como parte de un mismo grupo.

Por ejemplo, imagina tres tarjetas de servicios:

Servicio 1
Servicio 2
Servicio 3

Las tres pueden utilizar:

Class:
servicio-card

Esto permite que compartan una misma apariencia.

Por ejemplo:

• mismo fondo;

• mismo borde;

• mismo Padding;

• mismo Border radius;

• misma tipografía;

• mismo efecto Hover.

Una Class puede repetirse

Esto es normal y, de hecho, es una de sus principales funciones.

Por ejemplo:

Card 1
class="servicio-card"

Card 2
class="servicio-card"

Card 3
class="servicio-card"

Las tres pertenecen al mismo grupo visual.

Ejemplo de Class compartida

Supongamos que quieres que todas las tarjetas tengan:

• fondo blanco;

• borde gris;

• esquinas redondeadas;

• 24 px de espacio interior.

Conceptualmente, una regla CSS podría ser:

.servicio-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 24px;
}

Todas las tarjetas que tengan:

class="servicio-card"

pueden recibir ese estilo.

¿Qué es un ID?

Un ID es un identificador pensado para distinguir un elemento específico.

Por ejemplo:

id="servicio-premium"

Puede utilizarse para identificar solamente una tarjeta concreta.

Un ID debe ser único

A diferencia de Class, un ID no debería repetirse dentro de la misma página.

Por ejemplo, esto es correcto:

Card 1
id="servicio-diseno"

Card 2
id="servicio-desarrollo"

Card 3
id="servicio-soporte"

Pero esto debería evitarse:

Card 1
id="servicio"

Card 2
id="servicio"

Card 3
id="servicio"

Diferencia principal entre Class e ID

Puedes recordarlo así:

Class

Sirve para agrupar.

varios elementos
↓
misma Class

ID

Sirve para identificar.

un elemento
↓
un ID único

Ejemplo práctico

Tienes tres tarjetas:

Card 1
Card 2
Card 3

Quieres que todas sean iguales, pero destacar la segunda.

Puedes utilizar:

Card 1
class="servicio-card"

Card 2
class="servicio-card"
id="servicio-destacado"

Card 3
class="servicio-card"

De esta manera:

servicio-card define el estilo común.

servicio-destacado permite aplicar una personalización adicional solamente a Card 2.

Class e ID pueden convivir

No tienes que elegir obligatoriamente uno u otro.

Un mismo elemento puede tener ambos.

Por ejemplo:

<div class="servicio-card" id="servicio-premium">

La Class mantiene la relación con el grupo.

El ID identifica esa tarjeta individualmente.

¿Dónde aparecen ID y Class en Waclis?

Cuando seleccionas muchos tipos de componentes, dentro de:

Contenido

puedes encontrar los campos:

• ID;

• Class.

Por ejemplo, aparecen en elementos como:

• Image;

• Link;

• Html Button;

• Heading;

• otros componentes compatibles.

¿Por qué debería utilizar una Class?

Las Classes son útiles cuando quieres mantener coherencia entre varios elementos.

Por ejemplo:

Botón 1
Botón 2
Botón 3

pueden compartir:

Class:
boton-principal

Entonces todos pueden mantener:

• mismo color;

• mismo Padding;

• mismo Border radius;

• mismo Hover.

Ejemplo: botones principales

Puedes tener:

Ver productos
Solicitar presupuesto
Contactarnos

con:

class="boton-principal"

Esto ayuda a mantener un lenguaje visual consistente.

¿Por qué debería utilizar un ID?

Un ID es especialmente útil cuando quieres:

• aplicar un estilo solamente a un elemento;

• identificar una sección concreta;

• crear un ancla;

• utilizar JavaScript;

• escribir CSS muy específico;

• diferenciar un elemento que comparte Class con otros.

Ejemplo: destacar una única tarjeta

Todas:

class="plan-card"

Pero una:

id="plan-recomendado"

Puede recibir una personalización distinta.

Por ejemplo:

#plan-recomendado {
    border-width: 3px;
}

¿Qué significa Linked styles?

Mientras modificas Estilo, Waclis puede mostrar una advertencia:

Linked styles

Esto significa que el estilo sobre el que estás trabajando está relacionado con varios elementos.

En otras palabras:

el cambio que realices puede afectar más de un elemento.

Ejemplo sencillo

Tienes:

Card 1 → .beneficio-card
Card 2 → .beneficio-card
Card 3 → .beneficio-card

Seleccionas Card 1.

Cambias:

Background Color

y las tres cambian.

Esto puede ocurrir porque comparten:

beneficio-card

Linked styles no significa que Waclis esté funcionando mal

Es importante entenderlo.

No es necesariamente un error.

Puede ser exactamente el comportamiento esperado.

Por ejemplo, si quieres cambiar todas las Cards de:

fondo blanco

a:

fondo gris claro

una Class compartida te permite modificar todas de manera consistente.

¿Cuándo Linked styles es útil?

Cuando varios elementos deben compartir:

• color;

• tamaño;

• margen;

• Padding;

• Border;

• Border radius;

• Typography;

• Hover;

• responsive;

• otros estilos.

Ejemplo: tres beneficios

[ Envíos ]

[ Compra segura ]

[ Atención ]

Las tres deberían tener:

• mismo tamaño;

• mismo borde;

• mismo espacio;

• misma tipografía.

Una Class compartida facilita mantenerlas iguales.

¿Cuándo Linked styles genera un problema?

Cuando tú quieres modificar solamente un elemento.

Por ejemplo:

Quieres que:

Card 2

tenga fondo rojo.

Pero al modificarla también se vuelven rojas:

Card 1
Card 2
Card 3

¿Qué debes hacer en ese caso?

No elimines inmediatamente la Class.

Primero:

1. utiliza Deshacer;

2. revisa Navigator;

3. comprueba qué elemento seleccionaste;

4. revisa Class;

5. revisa ID;

6. verifica Linked styles;

7. decide si necesitas una identificación adicional.

Utilizar un ID para una excepción

Puedes mantener:

class="servicio-card"

en todas las tarjetas.

Y agregar a una sola:

id="servicio-destacado"

Luego puedes crear una regla específica para ese ID.

Ejemplo conceptual

Todas:

.servicio-card {
    background: white;
}

Solo una:

#servicio-destacado {
    background: #f5f5f5;
}

Así mantienes el diseño común y agregas una excepción.

No elimines una Class compartida sin saber qué hace

Una Class puede controlar mucho más que el color.

Por ejemplo:

servicio-card

podría estar relacionada con:

• ancho;

• Grid;

• Padding;

• Border;

• responsive;

• Hover;

• animaciones;

• JavaScript.

Eliminarla puede hacer que el elemento pierda parte de su comportamiento.

Ejemplo

Una Card puede verse correctamente gracias a:

class="card servicio-card"

Si eliminas:

servicio-card

puede cambiar:

• su espaciado;

• color;

• comportamiento;

• responsive.

Antes de eliminar una Class

Pregúntate:

¿Quiero dejar de compartir un único estilo o quiero eliminar toda la relación de este elemento con ese grupo?

En muchos casos será mejor agregar:

• un ID;

• una Class adicional;

• una regla más específica.

Puedes utilizar varias Classes

Un elemento puede tener más de una Class.

Por ejemplo:

servicio-card servicio-destacado

Conceptualmente:

<div class="servicio-card servicio-destacado">

Esto permite combinar comportamientos.

Ejemplo de varias Classes

Todas las tarjetas:

servicio-card

La segunda también tiene:

servicio-destacado

Resultado:

Card 1
class="servicio-card"

Card 2
class="servicio-card servicio-destacado"

Card 3
class="servicio-card"

¿ID o Class adicional para una excepción?

Ambas alternativas pueden ser válidas.

Utiliza ID cuando:

el elemento es realmente único.

Por ejemplo:

banner-principal

Utiliza una Class adicional cuando:

esa característica puede repetirse en otros elementos.

Por ejemplo:

destacado

Podrías tener varias Cards destacadas.

Ejemplo

Card 1
class="servicio-card"

Card 2
class="servicio-card destacado"

Card 3
class="servicio-card"

Si después quieres destacar Card 4, puedes agregarle también:

destacado

Nombres de Classes e IDs

Utiliza nombres descriptivos.

Buenas opciones:

beneficios-section

beneficios-grid

beneficio-card

beneficio-icono

beneficio-titulo

Evita nombres ambiguos

Por ejemplo:

caja

caja2

prueba

rojo

nuevo

pueden resultar difíciles de entender meses después.

Nombra por función, no por apariencia

Esto es importante.

Es preferible:

boton-principal

que:

boton-rojo

Porque el botón puede dejar de ser rojo en el futuro y el nombre perdería sentido.

Otro ejemplo

Preferible:

productos-destacados

en lugar de:

caja-grande-azul

Utiliza prefijos en bloques personalizados

Cuando construyes una sección compleja puede ser útil utilizar un prefijo común.

Por ejemplo, para una sección de categorías:

catgrid

Puedes utilizar:

catgrid-section
catgrid-wrap
catgrid-grid
catgrid-card
catgrid-image
catgrid-title

Esto reduce la posibilidad de que tus nombres se mezclen con otras partes de la Página web.

¿Por qué es importante evitar nombres demasiado genéricos?

Supongamos que creas:

.title

Puede existir otra Class .title en otra parte del sitio.

Una regla CSS como:

.title {
    color: red;
}

podría afectar más contenido del esperado.

Mejor

Utiliza algo más específico:

.servicios-titulo {
    color: red;
}

Selectores CSS y alcance

Cuando trabajas con CSS, el selector determina qué elementos reciben una regla.

Selector de Class

.servicio-card {
}

afecta a los elementos que tengan:

class="servicio-card"

Selector de ID

#servicio-premium {
}

afecta al elemento con:

id="servicio-premium"

Selector por elemento HTML

img {
}

puede afectar muchas imágenes.

Evita reglas demasiado generales

Por ejemplo:

h3 {
    color: red;
}

puede modificar todos los h3 alcanzados por esa regla.

Si solo quieres modificar los títulos de Servicios:

.servicio-card h3 {
    color: red;
}

es más específico.

Scope o alcance

En bloques personalizados es una buena práctica limitar las reglas a una sección concreta.

Por ejemplo:

class="servicios-section"

Luego puedes utilizar:

.servicios-section .servicio-card {
}

Esto reduce el riesgo de modificar Cards de otras secciones.

Ejemplo

En tu Página web puedes tener:

Servicios
└── .servicio-card

y:

Equipo
└── .card

Si utilizas reglas suficientemente específicas, puedes evitar interferencias.

Estructura de clases recomendada

Una sección personalizada puede utilizar:

servicios-section
└── servicios-wrap
    └── servicios-grid
        └── servicio-card
            ├── servicio-icono
            ├── servicio-titulo
            └── servicio-texto

Esto permite escribir CSS más controlado.

Ejemplo de CSS con scope

.servicios-section .servicio-card {
    border-radius: 12px;
}

.servicios-section .servicio-titulo {
    font-weight: 600;
}

Evita selectores excesivamente largos sin necesidad

Aunque la especificidad es útil, tampoco necesitas crear cadenas imposibles de mantener.

Por ejemplo:

body .pagina .section .container .row .col .card .contenido h3 span {
}

puede resultar difícil de mantener.

Utiliza Classes claras y específicas.

El código generado automáticamente puede tener selectores largos

En determinados casos puedes encontrar reglas con muchas clases y niveles.

Antes de copiar o modificar ese código:

1. identifica qué elemento alcanza;

2. comprueba si puedes utilizar una Class propia más clara;

3. evita modificar otras partes de la página.

Clonar elementos y Classes

Cuando clonas una Card, normalmente es correcto que conserve sus Classes.

Por ejemplo:

Antes:

Card 1
class="beneficio-card"

Después:

Card 1
class="beneficio-card"

Card 2
class="beneficio-card"

Ambas deberían compartir el mismo diseño.

Clonar elementos y IDs

Los IDs necesitan más cuidado.

Antes:

Card 1
id="beneficio-principal"

Después de clonar, comprueba si la copia mantiene ese identificador.

No debes conservar el mismo ID en las dos si ambas permanecen en la página.

Corrige el ID de la copia

Por ejemplo:

Card 1
id="beneficio-envios"

Card 2
id="beneficio-garantia"

¿Qué pasa si repito un ID?

Puede generar comportamientos inesperados en:

• CSS;

• JavaScript;

• enlaces internos;

• scripts;

• herramientas que buscan ese elemento.

Aunque visualmente la página parezca funcionar, es una mala práctica.

Mantén cada ID único.

IDs y enlaces internos

Un ID también puede utilizarse como destino dentro de una página.

Por ejemplo:

id="preguntas-frecuentes"

Un enlace puede apuntar conceptualmente a:

#preguntas-frecuentes

y llevar al visitante hacia esa parte de la página.

Esto requiere que el ID exista una sola vez.

Linked styles y Hover

Los estilos compartidos también pueden aplicarse a estados.

Por ejemplo:

.boton-principal

puede tener:

Normal

fondo azul.

Hover

fondo oscuro.

Todos los botones con esa Class pueden compartir el mismo Hover.

Esto es útil para mantener coherencia.

Ejemplo

Ver productos
Solicitar presupuesto
Contactarnos

Todos con:

class="boton-principal"

pueden reaccionar de la misma forma al cursor.

Si quieres un Hover diferente en uno

Puedes agregar:

• un ID específico;

• una Class adicional.

Por ejemplo:

class="boton-principal boton-destacado"

Classes y responsive

Las Classes también pueden compartir reglas responsive.

Por ejemplo:

@media (max-width: 768px) {
    .servicio-card {
        width: 100%;
    }
}

Todas las Cards asociadas se adaptarán.

Esto puede ser muy útil.

CSS específico para una sección

Cuando utilices media queries, limita también su alcance cuando sea necesario.

Por ejemplo:

@media (max-width: 768px) {
    .servicios-section .servicio-card {
        padding: 16px;
    }
}

Class e ID desde Editar código HTML

También puedes visualizar estos atributos cuando utilizas:

Editar código HTML <>

Por ejemplo:

<div class="servicio-card" id="servicio-premium">

Pero para cambios habituales puedes utilizar directamente los campos Class e ID desde Contenido.

No necesitas abrir HTML solamente para asignarlos.

Class e ID desde una IA

Si utilizas ChatGPT, Claude o Gemini para modificar un bloque, es recomendable explicar claramente qué Class o ID debe utilizar.

Por ejemplo:

Modifica solamente .servicios-section. No cambies otros elementos de la página.

o:

Aplica este cambio solamente al elemento con ID #servicio-premium.

Esto ayuda a reducir efectos no deseados.

Un buen prompt

Puedes indicar:

Tengo una sección con la clase "servicios-section".

Dentro hay tres tarjetas con la clase "servicio-card".

Quiero que todas tengan borde redondeado de 16 px.

Además, solamente la tarjeta con ID "servicio-premium" debe tener un borde más grueso.

No modifiques ninguna otra sección de la página.

La estructura queda clara y el código puede ser más seguro.

Evita pedir “cambia todas las tarjetas”

Si la Página web contiene otros tipos de Cards, una indicación demasiado general puede producir CSS demasiado amplio.

Es preferible especificar:

• sección;

• Class;

• ID;

• comportamiento.

Cómo diagnosticar un cambio que afecta demasiado contenido

Supongamos que cambias un título y otros cinco cambian.

Utiliza este proceso.

Paso 1: Deshacer

Vuelve al estado anterior.

Paso 2: Navigator

Comprueba si realmente seleccionaste Heading y no un padre.

Paso 3: Linked styles

Comprueba si Waclis indica que existen estilos vinculados.

Paso 4: Class

Revisa si todos los títulos comparten, por ejemplo:

section-title

Paso 5: decide la intención

Pregúntate:

¿Quiero que todos cambien?

Si la respuesta es sí:

mantén la Class compartida.

Si es no:

necesitas una forma más específica de identificar ese elemento.

Paso 6: ID o Class adicional

Puedes agregar:

id="titulo-servicios"

o:

class="section-title servicios-title"

según la necesidad.

Ejemplo completo: destacar una categoría

Tienes cinco Cards:

Mochilas
Botellas
Termos
Escritura
Bazar

Todas utilizan:

class="categoria-card"

Quieres que Bazar tenga un diseño especial.

Mantén la Class común

Bazar
class="categoria-card"

Agrega una identificación adicional

Por ejemplo:

id="categoria-bazar"

CSS común

.categoria-card {
    border-radius: 14px;
}

CSS particular

#categoria-bazar {
    min-height: 300px;
}

Así no rompes la relación de Bazar con el resto de las Cards.

Ejemplo completo: un botón destacado

Todos los botones:

class="boton-principal"

El botón de compra:

class="boton-principal boton-compra"

Puedes utilizar:

.boton-principal {
    border-radius: 8px;
}

y:

.boton-compra {
    font-weight: 700;
}

No utilices un ID para estilos que se repetirán

Si sabes que varias Cards tendrán el mismo tratamiento especial, una Class adicional suele ser más apropiada.

Por ejemplo:

destacado

en lugar de crear:

#destacado-1
#destacado-2
#destacado-3

con tres reglas equivalentes.

Cuándo Class

Utiliza Class para:

• estilos repetidos;

• grupos de elementos;

• componentes similares;

• botones comunes;

• Cards;

• títulos de una misma familia;

• comportamientos responsive compartidos;

• Hover compartido.

Cuándo ID

Utiliza ID para:

• elementos únicos;

• anclas;

• estilos exclusivos;

• JavaScript específico;

• una Section concreta;

• una excepción individual.

No necesitas completar ID y Class siempre

Estos campos son herramientas disponibles.

No es obligatorio colocar una Class o ID personalizada en cada elemento.

Las secciones prediseñadas y componentes ya pueden incluir clases propias necesarias para funcionar.

Agrega identificadores cuando realmente los necesites.

No cambies clases internas sin motivo

Un componente puede utilizar clases necesarias para:

• Grid;

• Card;

• Button;

• responsive;

• otros comportamientos.

Por ejemplo, una Grid Column puede depender de clases estructurales.

No reemplaces sus Classes arbitrariamente si no sabes qué función cumplen.

Agregar no siempre significa reemplazar

Si un elemento ya contiene varias Classes, normalmente debes conservar las necesarias.

Por ejemplo:

class="card shadow servicio-card"

No sustituyas todo por:

class="mi-card"

sin comprender qué estás eliminando.

Podrías perder estilos o comportamiento.

Si necesitas una Class propia

Puede ser mejor agregarla a las existentes:

class="card shadow servicio-card mi-card"

si la estructura lo requiere.

Trabajar con componentes Bootstrap

Waclis utiliza actualmente Bootstrap 4 en la Página web.

Algunos componentes estructurales pueden utilizar clases propias de esa estructura.

Por eso debes tener especial cuidado antes de eliminar o modificar clases relacionadas con:

• Container;

• Grid Row;

• columnas;

• Button;

• Card;

• otros componentes estructurales.

Una Class puede ser parte del funcionamiento responsive del componente y no solamente de su apariencia.

Ejemplo de Grid

Una columna puede utilizar una clase como parte de su distribución.

Si eliminas clases estructurales sin comprenderlas, podrías alterar cómo se ve en:

• desktop;

• tablet;

• celular.

Para cambiar la distribución utiliza primero las opciones visuales de Grid Row.

Linked styles y estilos visuales

La advertencia puede aparecer cuando trabajas con:

• Background Color;

• Typography;

• Size;

• Margin;

• Padding;

• Border;

• Border radius;

• estados;

• otras propiedades.

No ignores el aviso si solamente querías modificar un único elemento.

¿Qué hacer si Linked styles es exactamente lo que quiero?

Continúa.

Por ejemplo:

Quieres cambiar todas las tarjetas.

Si Waclis muestra que el estilo está vinculado a tres elementos y esos tres son precisamente los que quieres modificar, el comportamiento es correcto.

¿Qué hacer si no sé qué elementos están vinculados?

Antes de modificar:

• revisa Navigator;

• comprueba qué componentes comparten Class;

• realiza una prueba sencilla;

• utiliza Deshacer si el alcance no era el esperado.

No continúes agregando más estilos hasta entender qué elementos están siendo afectados.

Un cambio pequeño como prueba

Si no estás seguro del alcance, puedes realizar temporalmente una modificación fácil de identificar.

Por ejemplo, cambiar:

Background Color

a un color claramente diferente.

Observa qué elementos cambian.

Luego utiliza:

Deshacer

y decide si el selector es apropiado.

Esto puede ayudarte a entender el alcance antes de hacer el cambio definitivo.

Prioriza una estructura mantenible

Una buena sección personalizada debería permitir que meses después puedas entender:

• qué elementos pertenecen al grupo;

• qué estilos son comunes;

• qué elementos son excepciones;

• qué clases corresponden a cada función.

Evita una gran cantidad de reglas aisladas difíciles de interpretar.

Ejemplo de estructura mantenible

servicios-section

servicios-grid

servicio-card
    servicio-icono
    servicio-titulo
    servicio-texto
    servicio-boton

Luego:

servicio-card destacado

para una excepción.

Ejemplo difícil de mantener

caja1
caja2
estilo5
rojo
nuevo2
titulo3

Puede funcionar hoy, pero resulta difícil comprenderlo posteriormente.

Flujo recomendado para asignar una Class

1. Selecciona el elemento correcto.

2. Comprueba Navigator.

3. Abre Contenido.

4. Localiza Class.

5. Revisa si ya existen Classes.

6. Conserva las necesarias.

7. Agrega una Class descriptiva.

8. Comprueba Linked styles.

9. Realiza la personalización.

10. Revisa responsive.

Flujo recomendado para utilizar un ID

1. Confirma que el elemento debe ser único.

2. Selecciónalo.

3. Abre Contenido.

4. Localiza ID.

5. Utiliza un nombre descriptivo.

6. Comprueba que no se repita.

7. Aplica la personalización específica.

8. Revisa desktop, tablet y celular.

Flujo recomendado si varios elementos cambian sin querer

DESHACER
↓
NAVIGATOR
↓
ELEMENTO SELECCIONADO
↓
LINKED STYLES
↓
CLASS
↓
ID
↓
¿CAMBIO COMÚN O INDIVIDUAL?

Después decide:

Común → aprovecha Class.

Individual → utiliza una identificación más específica.

Errores frecuentes

Pensar que Class debe ser única

Una Class puede repetirse.

Repetir un ID

El ID debe mantenerse único dentro de la página.

Eliminar una Class porque varios elementos cambian

Primero comprueba qué función cumple.

Reemplazar todas las Classes existentes por una nueva

Puedes eliminar clases estructurales necesarias.

Utilizar un ID para cada elemento aunque no sea necesario

Puede hacer el bloque más difícil de mantener.

Utilizar nombres genéricos

Prefiere nombres relacionados con la función.

Crear CSS con selectores demasiado generales

Puede afectar otras partes de la página.

No utilizar scope en bloques personalizados

Una Class de sección puede ayudarte a limitar las reglas.

Ignorar Linked styles

El aviso informa que el alcance puede ser mayor al elemento visual seleccionado.

Clonar un elemento y mantener un ID duplicado

Revisa IDs después de clonar.

Utilizar Hover compartido y luego intentar cambiar solo una Card sin identificarla

Agrega una Class específica o un ID según el caso.

Tabla rápida de referencia

En resumen

Una Class permite agrupar varios elementos.

Un ID identifica un elemento específico.

Linked styles te advierte cuando el estilo que estás modificando puede estar relacionado con varios elementos.

La regla general es:

Class para compartir. ID para identificar.

Si varios elementos deben verse iguales, una Class compartida es beneficiosa.

Si solamente un elemento necesita una excepción, puedes utilizar:

• un ID;

• una Class adicional;

• un selector más específico.

No elimines clases existentes sin comprender qué función cumplen, especialmente en componentes estructurales.

Cuando clones elementos, revisa especialmente los IDs para evitar duplicados.

Y cuando una modificación afecte más contenido del esperado, utiliza:

Deshacer → Navigator → Linked styles → Class → ID

antes de recurrir a soluciones más complejas.

Una buena organización de Classes e IDs hace que el bloque sea:

• más fácil de editar;

• más seguro;

• más consistente;

• más sencillo de adaptar;

• más fácil de trabajar con CSS;

• más fácil de modificar posteriormente con ayuda de una IA.