swl-ses 3.3.2

package/habilidades/css-moderno/SKILL.md

@@ -0,0 +1,463 @@
+---
+name: css-moderno
+description: CSS moderno 2024+. Cubre Container Queries, CSS Layers (@layer), Nesting nativo, Custom Properties avanzadas, funciones min/max/clamp/color-mix, propiedades lógicas (block/inline), View Transitions API, animaciones performantes solo-compositor, dark mode patterns y anti-patrones críticos.
+---
+
+# CSS Moderno — 2024+
+
+## Filosofía
+
+CSS moderno elimina la necesidad de preprocesadores para la mayoría de los casos.
+Las características nativas del 2023-2024 cubren lo que antes requería Sass/Less,
+con mejor rendimiento y sin dependencias de build.
+
+---
+
+## 1. Container Queries
+
+Las Container Queries cambian el paradigma: en lugar de basar el responsive en
+el viewport, los componentes responden al tamaño de su contenedor padre.
+
+```css
+/* Definir el contenedor */
+.card-wrapper {
+  container-type: inline-size;
+  container-name: tarjeta;
+}
+
+/* El componente responde a su contenedor, no al viewport */
+.card {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+@container tarjeta (min-width: 400px) {
+  .card {
+    grid-template-columns: auto 1fr;
+  }
+}
+
+@container tarjeta (min-width: 600px) {
+  .card {
+    grid-template-columns: 200px 1fr 100px;
+  }
+}
+```
+
+### Container Query con unidades de contenedor
+
+```css
+.card-titulo {
+  /* cqi = 1% del inline-size del contenedor */
+  font-size: clamp(1rem, 4cqi, 2rem);
+}
+```
+
+---
+
+## 2. CSS Layers (@layer)
+
+`@layer` resuelve la especificidad sin recurrir a `!important`.
+Declara el orden de capas: la última tiene mayor prioridad.
+
+```css
+/* Declarar el orden de capas al inicio */
+@layer reset, base, componentes, utilidades, overrides;
+
+@layer reset {
+  *, *::before, *::after { box-sizing: border-box; }
+  * { margin: 0; }
+}
+
+@layer base {
+  body { font-family: system-ui, sans-serif; }
+  a { color: inherit; }
+}
+
+@layer componentes {
+  .btn {
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    background: var(--color-primario);
+  }
+}
+
+@layer utilidades {
+  .mt-4 { margin-top: 1rem; }
+  .text-center { text-align: center; }
+}
+
+/* Las utilidades siempre ganan sobre componentes, sin !important */
+```
+
+### Importar estilos de terceros en capas
+
+```css
+/* Aislar Normalize o Bootstrap en su propia capa */
+@import url('normalize.css') layer(reset);
+@import url('bootstrap.css') layer(frameworks);
+
+/* Tus estilos siempre ganan, sin conflictos */
+@layer componentes {
+  .btn { /* Sobrescribe Bootstrap sin lucha de especificidad */ }
+}
+```
+
+---
+
+## 3. CSS Nesting Nativo
+
+CSS nativo ya soporta nesting sin Sass:
+
+```css
+/* Nesting básico */
+.nav {
+  display: flex;
+  gap: 1rem;
+
+  & a {
+    text-decoration: none;
+    color: var(--color-texto);
+
+    &:hover {
+      color: var(--color-primario);
+    }
+
+    &.activo {
+      font-weight: bold;
+    }
+  }
+
+  /* Media query anidada */
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+}
+```
+
+### Nesting con pseudo-elementos
+
+```css
+.card {
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.5));
+  }
+
+  & > .card-content {
+    position: relative;
+    z-index: 1;
+  }
+}
+```
+
+---
+
+## 4. Custom Properties Avanzadas
+
+### Design tokens con custom properties
+
+```css
+:root {
+  /* Primitivos */
+  --azul-500: oklch(56% 0.2 250);
+  --azul-600: oklch(46% 0.2 250);
+
+  /* Semánticos */
+  --color-primario: var(--azul-500);
+  --color-primario-hover: var(--azul-600);
+  --color-superficie: #ffffff;
+  --color-texto: #0f172a;
+
+  /* Espaciado */
+  --espacio-1: 0.25rem;
+  --espacio-2: 0.5rem;
+  --espacio-4: 1rem;
+
+  /* Tipografía */
+  --fuente-base: 'Inter', system-ui, sans-serif;
+  --tamano-sm: 0.875rem;
+  --tamano-base: 1rem;
+  --tamano-lg: 1.125rem;
+}
+```
+
+### Custom Properties con @property (tipadas)
+
+```css
+/* Animaciones de gradiente y valores no-string */
+@property --porcentaje {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 0%;
+}
+
+.barra {
+  background: linear-gradient(to right, var(--color-primario) var(--porcentaje), #e2e8f0 var(--porcentaje));
+  transition: --porcentaje 0.3s ease;
+}
+
+.barra:hover {
+  --porcentaje: 75%;
+}
+```
+
+---
+
+## 5. Funciones Matemáticas
+
+### min(), max(), clamp()
+
+```css
+/* Tipografía fluida — sin media queries */
+h1 {
+  /* min 1.5rem, preferido 4vw, max 3rem */
+  font-size: clamp(1.5rem, 4vw, 3rem);
+}
+
+/* Contenedor que nunca es menor a 300px ni mayor a 600px */
+.tarjeta {
+  width: clamp(300px, 50%, 600px);
+}
+
+/* Padding que se adapta sin romperse */
+.seccion {
+  padding-inline: max(1rem, (100% - 1200px) / 2);
+}
+```
+
+### color-mix()
+
+```css
+/* Mezclar colores nativamente */
+.boton-hover {
+  --color-base: var(--color-primario);
+  background-color: color-mix(in oklch, var(--color-base) 80%, black);
+}
+
+/* Transparencia */
+.overlay {
+  background: color-mix(in srgb, var(--color-primario) 20%, transparent);
+}
+```
+
+### round(), mod(), rem()
+
+```css
+.grid {
+  /* Número exacto de columnas sin espacio sobrante */
+  grid-template-columns: repeat(auto-fill, minmax(round(down, 100%, 150px), 1fr));
+}
+```
+
+---
+
+## 6. Propiedades Lógicas
+
+Las propiedades lógicas funcionan correctamente en RTL y modos de escritura
+vertical sin necesidad de sobreescribir estilos:
+
+```css
+/* Físico — mal para internacionalización */
+.elemento {
+  margin-left: 1rem;
+  padding-right: 2rem;
+  border-top: 1px solid;
+}
+
+/* Lógico — correcto para cualquier dirección */
+.elemento {
+  margin-inline-start: 1rem;  /* izq en LTR, der en RTL */
+  padding-inline-end: 2rem;   /* der en LTR, izq en RTL */
+  border-block-start: 1px solid;
+}
+
+/* Atajos lógicos */
+.caja {
+  margin-inline: auto;          /* margin-left + margin-right */
+  padding-block: 1rem;          /* padding-top + padding-bottom */
+  inset-inline: 0;              /* left: 0; right: 0 */
+  border-start-start-radius: 8px; /* top-left en LTR */
+}
+```
+
+---
+
+## 7. View Transitions API
+
+```css
+/* Transiciones nativas entre páginas/estados */
+::view-transition-old(root) {
+  animation: salir 0.3s ease-in;
+}
+
+::view-transition-new(root) {
+  animation: entrar 0.3s ease-out;
+}
+
+/* Transición de elemento específico */
+.hero-imagen {
+  view-transition-name: hero;
+}
+
+::view-transition-old(hero),
+::view-transition-new(hero) {
+  object-fit: cover;
+}
+```
+
+```javascript
+// Trigger en JavaScript
+document.startViewTransition(() => {
+  actualizarDOM(); // Cambiar contenido aquí
+});
+```
+
+---
+
+## 8. Animaciones Performantes (Solo-compositor)
+
+Solo las propiedades `transform` y `opacity` se animan en el compositor
+(GPU), sin triggear layout ni paint:
+
+```css
+/* BIEN: solo compositor */
+.boton {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.boton:hover {
+  transform: translateY(-2px) scale(1.02);
+  opacity: 0.9;
+}
+
+/* MAL: trigerea layout (costoso) */
+.boton:hover {
+  margin-top: -2px;   /* layout thrashing */
+  width: 102%;        /* layout thrashing */
+  top: -2px;          /* layout (sin position relative guardado) */
+}
+```
+
+### Hints de rendimiento
+
+```css
+/* Avisar al navegador que el elemento será animado */
+.elemento-animado {
+  will-change: transform;  /* SOLO usar cuando hay problema de rendimiento real */
+}
+
+/* Contener el paint a este elemento */
+.componente-independiente {
+  contain: strict;
+}
+```
+
+---
+
+## 9. Dark Mode Patterns
+
+### Enfoque con custom properties (recomendado)
+
+```css
+:root {
+  color-scheme: light dark;
+
+  --color-fondo: #ffffff;
+  --color-texto: #0f172a;
+  --color-borde: #e2e8f0;
+  --color-superficie: #f8fafc;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-fondo: #0f172a;
+    --color-texto: #f1f5f9;
+    --color-borde: #1e293b;
+    --color-superficie: #1e293b;
+  }
+}
+
+/* Con toggle manual usando data-tema */
+[data-tema='claro'] { /* mismas custom props de light */ }
+[data-tema='oscuro'] { /* mismas custom props de dark */ }
+```
+
+### Imágenes adaptadas
+
+```css
+.logo {
+  content: url('/logo-claro.svg');
+}
+
+@media (prefers-color-scheme: dark) {
+  .logo {
+    content: url('/logo-oscuro.svg');
+  }
+}
+```
+
+---
+
+## 10. Anti-patrones
+
+### !important — never
+
+```css
+/* MAL: rompe la cascada, difícil de mantener */
+.titulo { color: red !important; }
+
+/* BIEN: usar @layer para controlar especificidad */
+@layer overrides {
+  .titulo { color: red; }
+}
+```
+
+### Z-index wars
+
+```css
+/* MAL: z-index arbitrarios que escalan infinitamente */
+.modal { z-index: 9999; }
+.tooltip { z-index: 99999; }
+.notificacion { z-index: 999999; }
+
+/* BIEN: sistema de capas con custom properties */
+:root {
+  --z-base: 1;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-modal: 300;
+  --z-tooltip: 400;
+  --z-notificacion: 500;
+}
+```
+
+### Layout thrashing en JS
+
+```javascript
+// MAL: leer y escribir el DOM alternadamente
+for (const el of elementos) {
+  const altura = el.offsetHeight;       // fuerza layout
+  el.style.height = (altura * 2) + 'px'; // invalida layout
+}
+
+// BIEN: separar lecturas de escrituras
+const alturas = elementos.map(el => el.offsetHeight); // todas las lecturas
+elementos.forEach((el, i) => {
+  el.style.height = (alturas[i] * 2) + 'px';           // todas las escrituras
+});
+```
+
+### Unidades fijas para tipografía
+
+```css
+/* MAL: ignora las preferencias de zoom del usuario */
+body { font-size: 16px; }
+
+/* BIEN: relativa a la preferencia del usuario */
+body { font-size: 1rem; }
+```