Cascada, Especificidad y Herencia

En el motor de renderizado de los navegadores, el estilo final de un elemento se determina mediante un algoritmo estricto que evalúa múltiples factores.

• Origen: Las declaraciones se clasifican por su procedencia. Las reglas del autor tienen prioridad sobre las del usuario y las del agente (navegader), a menos que se utilice la directiva !important, la cual altera drásticamente este flujo elevando la prioridad de la declaración.
• Especificidad: Define el peso de un selector. Los estilos en línea poseen la mayor autoridad. A continuación, los selectores de ID superan a las clases, atributos y pseudo-clases, los cuales a su vez dominan a los selectores de tipo (etiquetas). Los combinadores (>, +, ~) y el selector universal (*) no aportan peso a la especificidad.
• Orden de origen: Ante un empate absoulto en especificidad, la última declaración leída en el código fuente prevalece.

La especificidad se suele representar como una tupla numérica. Por ejemplo, un selector como #header .main-nav .link tendría un peso de (1, 2, 0) (un ID, dos clases, cero etiquetas). Si se considera el estilo en línea, se añade una cuarta posición al inicio.

Mejores prácticas: Evite acoplar estilos a selectores de ID y minimice radicalmente el uso de !important para mantener la escalabilidad del código.

La herencia permite que ciertas propiedades (principalmente tipográficas y de listas) fluyan desde los ancestros hacia los descendientes. Las palabras clave inherit y initial permiten forzar o revertir este comportamiento de forma explícita. Adicionalmente, las propiedades abreviadas (shorthand) reasignan valores predeterminados a las subpropiedades omitidas, lo que puede causar sobreescrituras silenciosas. El orden de los valores en propiedades como margin o padding sigue un sentido horario (arriba, derecha, abajo, izquierda), mientras que en propiedades de coordenadas como box-shadow se definen primero los ejes horizontal y vertical.

Unidades Relativas y Variables CSS

Las unidades relativas permiten construir interfaces adaptables. em se calcula en base al tamaño de fuente del elemento actual (o heredado si se aplica directamente a font-size), mientras que rem siempre hace referencia al tamaño base del elemento raíz (:root).

Las propiedades personalizadas (variables CSS) introducen capacidades de programación nativas. Estas variables respetan la cascada y la herencia, permitiendo definir alcances locales que sobreescriben valores globales.

Interacción con JavaScript:

const docRoot = document.documentElement;
const computedStyles = window.getComputedStyle(docRoot);
const themeColor = computedStyles.getPropertyValue('--primary-bg');
console.log(themeColor.trim());

// Modificación dinámica
docRoot.style.setProperty('--primary-bg', '#3498db');

El Modelo de Caja

Por defecto, las dimensiones de un elemento solo abarcan su contenido. Propiedades como padding y border expanden este tamaño total. La solución estándar moderna es alterar el modelo de caja globalmente:

:root {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
/* Aislamiento para componentes de terceros */
.third-party-widget {
  box-sizing: content-box;
}

El alto de un elemento en el flujo normal depende intrínsecamente de su contenido. Asignar alturas porcentuales suele fallar si el ancestro no tiene una altura explícita, generando ciclos infinitos que el navegador ignora; en estos casos, las unidades de viewport (vh) o layouts flexibles son más robustos. Para manejar contenido excedente en contenedores con altura fija, se utiliza la propiedad overflow.

El centrado vertical puede abordarse de múltiples formas según el contexto: rellenos simétricos (padding), contenedores flexibles, celdas de tabla con vertical-align: middle, alturas de línea (line-height) para texto de una línea, o posicionamiento absoluto combinado con transform: translate(-50%, -50%).

Los márgenes negativos permiten extraer elementos de su contenedor natural. Sin embargo, los márgenes verticales adyacentes tienden a colapsar, tomando el valor máximo entre ambos en lugar de sumarse. Este colapso también ocurre entre un contenedor y su primer o último hijo. Para prevenirlo, se pueden aplicar bordes, rellenos, o establecer un nuevo contexto de formato.

Para espaciado uniforme entre elementos hermanos sin afectar los bordes externos del contenedor, el selector de búho lobotomizado es altamente efectivo:

.flow-layout > * + * {
  margin-top: 1.5rem;
}

Flotados y Contextos de Formato de Bloque (BFC)

Originalmente, float se diseñó para que el texto envolviera imágenes u objetos. Al flotar múltiples elementos, estos se alinean hasta agotar el espacio horizontal. Sin embargo, los flotados se extraen del flujo normal, provocando que sus contenedores colapsen en altura.

La técnica clásica de "clearfix" resuelve esto forzando al contenedor a reconocer los flotados internos mediante pseudo-elementos:

.layout-clear::before,
.layout-clear::after {
  content: "";
  display: table;
}
.layout-clear::after {
  clear: both;
}

Un BFC (Block Formatting Context) es una región independiente donde el layout interno no interactúa con el exterior. Crear un BFC (usando overflow: hidden, display: flow-root, float, o posicionamientos absolutos) contiene los flotados internos, previene el colapso de márgenes y evita que el texto exterior envuelva los elementos flotados internos.

Sistemas de Layout: Flexbox

Flexbox distribuye el espacio a lo largo de un eje principal y alinea elementos en un eje transversal. La propiedad abreviada flex combina flex-grow, flex-shrink y flex-basis.

• flex-basis: Establece el tamaño inicial del elemento. Si se define, anula la propiedad width.
• flex-grow: Factor de expansión. Un valor de 0 impide que el elemento crezca más allá de su base.
• flex-shrink: Factor de contracción. Define cuánto se reducirá un elemento para evitar el desbordamiento del contenedor.

Un valor numérico sin unidad, como flex: 1, se interpreta como 1 1 0%, permitiendo que el elemento crezca desde cero para ocupar el espacio libre equitativamente. Por el contrario, un valor con unidad como flex: 30% actúa como 1 1 30%.

Sistemas de Layout: CSS Grid

Grid introduce un sistema bidimensional basado en filas y columnas. Los contenedores definen la estructura mediante pistas (tracks), delimitadas por líneas de cuadrícula.

Las pistas se definen con grid-template-rows y grid-template-columns. La unidad fr distribuye el espacio fraccional disponible, y la función repeat() simplifica patrones repetitivos.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: repeat(3, auto);
  gap: 1.5rem;
}

A diferencia de Flexbox, que es unidimensional y se adapta al contenido (inside-out), Grid es bidimensional y define primero la estructura para luego alojar el contenido (outside-in).

Las líneas y áreas pueden nombrarse para mejorar la legibilidad del código:

.dashboard {
  display: grid;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
  grid-template-columns: 250px 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: nav; }

El grid implícito se genera dinámicamente cuando los elementos exceden las pistas definidas. Propiedades como grid-auto-rows controlan su tamaño. La combinación de repeat(auto-fit, minmax(250px, 1fr)) crea grids responsivos sin necesidad de media queries. auto-fit expande las pistas existentes para llenar el contenedor, mientras que auto-fill genera pistas vacías si hay espacio sobrante. Adicionalmente, grid-auto-flow: dense reordena elementos para rellenar huecos en el layout.

Posicionamienot y Contexto de Apilamiento

La propiedad position altera el flujo estándar del documento:

• relative: Desplaza el elemento respecto a su posición original sin sacarlo del flujo.
• absolute: Posiciona respecto al ancestro posicionado más cercano.
• fixed: Ancla el elemento al viewport.
• sticky: Híbrido que actúa como relative hasta cruzar un umbral de desplazamiento, donde se bloquea como fixed dentro de los límites de su contenedor padre.

El eje Z gestiona la superposición visual. Los elementos posicionados se pintan sobre los estáticos, respetando el orden del DOM en caso de empate. Sin embargo, aplicar z-index, opacity menor a 1, transform o filter crea un nuevo contexto de apilamiento. Dentro de este contexto, los valores z-index de los hijos son locales y no pueden superar la jerarquía del contexto padre, encapsulando así el orden de renderizado tridimensional.

Arquitectura CSS Modular

La modularidad busca crear componentes aislados, predecibles y reutilizables. La metodología BEM (Bloque, Elemento, Modificador) establece una nomenclatura estricta para evitar colisiones:

/* Bloque */
.alert {}
/* Modificador (Estado o Variante) */
.alert--critical {}
/* Elemento (Parte interna del bloque) */
.alert__icon {}

Evite anidar selectores basados en la ubicación del DOM (ej. .sidebar .alert), ya que esto acopla el componente a su contexto estructural. Los nombres deben reflejar la función semántica, nunca la apariencia visual transitoria (ej. evite .button-red en favor de .button-primary).

Las clases de utilidad deben ser atómicas, enfocadas en una sola responsabilidad y, de ser necesario, pueden usar !important para garantizar su prevalencia. Estas deben declararse al final de la hoja de estilos para mantener la jerarquía de cascada limpia.