CSS
Explica cómo el navegador procesa HTML y CSS para construir el CSSOM, combinarlo con el DOM y calcular layout, paint y composición.
CSS describe cómo debe presentarse un documento según su estructura, el entorno y las reglas que compiten por cada propiedad.
.project-card {
padding: 1rem;
border: 1px solid currentColor;
}HTML → estructura y significado
CSS → presentación y adaptación
JavaScript → comportamiento y estado dinámicoUn botón sigue siendo un botón aunque CSS cambie su forma. Una etiqueta div no adquiere semántica de botón por verse igual.
Modelo simplificado:
HTML → DOM
CSS → CSSOM
DOM + CSSOM
↓
valores calculados
↓
layout
↓
paint
↓
compositingRepresenta elementos, atributos y texto del documento.
Representa las hojas de estilo que el navegador pudo analizar.
Determina qué declaraciones coinciden y qué valor gana para cada propiedad.
Calcula tamaños y posiciones.
Genera fondos, bordes, texto, sombras y otras instrucciones visuales.
Combina capas ya pintadas, especialmente con transforms, opacity y ciertos efectos.
Este modelo es útil para depurar, aunque los motores pueden optimizar o agrupar pasos internamente.
.card-list {
display: grid;
gap: 1rem;
}Declaras una intención. El algoritmo de Grid decide posiciones según contenido, espacio disponible y otras reglas.
.card {
width: 20rem;
background: white;
transform: translateX(1rem);
}width suele participar en layout.background participa en paint.transform modifica la representación visual y frecuentemente puede resolverse en composición.No significa que transform sea siempre gratis ni que cualquier animación cree automáticamente una capa eficiente.
.child {
width: 50%;
color: inherit;
}CSS atraviesa varias etapas conceptuales:
valor declarado
→ valor en cascada
→ valor especificado
→ valor calculado
→ valor usado
→ valor realUn porcentaje puede conservarse hasta que se conozca el tamaño del contenedor.
.card {
color: red;
imaginary-property: 10px;
padding: 1rem;
}La declaración desconocida se descarta y las demás continúan. Esta recuperación permite progressive enhancement, pero un error silencioso puede ocultar un bug.
El mismo CSS cambia según:
Por eso una captura no demuestra que un layout sea robusto.
.card-list {
display: flex;
flex-wrap: wrap;
}
@supports (display: grid) {
.card-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
}La base funciona y una capacidad moderna mejora el resultado.
.project-card {
display: grid;
gap: 0.75rem;
padding: clamp(1rem, 3vw, 1.5rem);
border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
border-radius: 1rem;
}¿Por qué transform: translateX() normalmente no cambia el espacio reservado?
Porque transforma la representación visual después del layout; los elementos vecinos siguen usando la caja original.
Sintaxis, reglas y at-rules explica cómo se estructura una hoja de estilos.