CSS

Preprocesadores CSS: Less

  • [Getting started Less.js](https://lesscss.org/)
  • Preprocesador CSS con variables, mixins, funciones y anidado.
  • Permite generar CSS modular y reutilizable para proyectos grandes.
  • Integración típica con bundlers como Webpack, Vite o Gulp.

Flex vs Grid

  • The secret to mastering CSS layouts - YouTube
    • Concepto: collapsing margin flow root (cómo ciertos contenedores colapsan márgenes).
  • Interpolación de tamaños: conversión automática de valores auto a unidades fijas como px mediante cálculos CSS (calc()), útil para hover states, animaciones y layout fino.
  • Flex: ideal para distribución lineal y alineación precisa.
  • Grid: ideal para estructuras bidimensionales, layouts complejos y plantillas reutilizables.

Metodologías CSS (BEM)

  • Metodologías o Arquitecturas CSS (OOCSS, BEM, SMACSS, ITCSS, Atomic Design) - by William Bastidas…
  • BEM — Introduction
  • BEM:
    • Block: entidad independiente.
    • Element: parte dentro del bloque.
    • Modifier: variación del bloque o elemento. Sintaxis recomendada: block__element--modifier.

Técnicas CSS y Problemas Comunes

  • Evitar que el texto de los botones haga salto de línea:
    white-space: nowrap.
  • Espacio excesivo debajo del título cuando es corto:
    Usar margin-top: 0 y limitar la altura del contenedor.
  • Limitar títulos largos sin modificar su espacio:
    -webkit-line-clamp: 2, display: -webkit-box,
    -webkit-box-orient: vertical, overflow: hidden,
    max-height: calc(1.2rem * 2).
  • Mostrar botones en línea:
    display: flex; flex-direction: row;.
  • Evitar que botones salgan del contenedor:
    overflow: hidden y asegurar ancho controlado.
  • Centrar contenido en un contenedor:
    display: flex; justify-content: center; align-items: center;.
  • Añadido: recorte de texto elegante (ellipsis):
    text-overflow: ellipsis; overflow: hidden; white-space: nowrap;.
  • Añadido: evitar jumps en animaciones al cambiar height:
    Usar max-height, transiciones y overflow: hidden.

    Modules, Vars, Breakpoints y Media Queries

    Variables CSS, módulos y media queries son claves para estructurar CSS escalable:

  • CSS Modules permiten encapsular estilos.
  • Variables CSS (--var) permiten theming y consistencia.
  • Breakpoints definen comportamiento responsivo.
  • Media Queries aplican estilos según ancho, modo oscuro, orientación, etc.

Media Queries

```css title:media-queries /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) {…}

/* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) {…}

/* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) {…}

/* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) {…}

/* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) {…}

/* Query simple */ @media only screen and (min-width: 768px) { … }

/* Query entre rangos */ @media only screen and (min-width: 768px) and (max-width: 959px) { … }

`


# Design Tokens — Guía Completa (2025)

## Introducción
Los **Design Tokens** son valores centrales (colores, espaciados, tipografías, sombras, radios, etc.) definidos de forma consistente y reutilizable para mantener coherencia visual en un proyecto. Permiten un **diseño escalable**, multi-tema, multi-plataforma y facilitan mantener un Design System.

---

## ¿Qué son exactamente?
Un _token_ es un **valor con nombre**, independiente de la implementación:

- Un color → `--color-primary`
- Un espaciado → `--space-m`
- Un radio → `--radius-lg`
- Una sombra → `--shadow-card`
- Una tipografía → `--font-sans`

Los tokens NO describen un estilo concreto de un componente, sino la **pieza base** que luego los componentes utilizan.

---

## Ventajas principales
- Consistencia visual garantizada.  
- Múltiples temas (dark, light, brand A, brand B) sin reescribir estilos.  
- Alineación entre equipos (diseño, frontend, mobile).  
- Fácil mantenimiento en proyectos grandes.  
- Facilita automatizar documentaciones y generar librerías de componentes.

---

## Tipos de Tokens

### 1. Tokens Globales (corazón del sistema)
Aplican a toda la plataforma:

	- Colores base (primarios, neutrales)
	- Tipografías base
	- Espaciado (escala 4 / 8 / 12…)
	- Border-radius
	- Elevaciones / sombras
	- Opacidades
	- Duraciones de animación

Ejemplo:


```css
:root {
	--color-primary: 59 130 246;
	--radius-md: 0.5rem;
	--space-4: 1rem;
	--transition-fast: 150ms;
}

`

2. Tokens Semánticos (contextuales)

En vez de usar valores directos, asignas nombres con propósito:

- `--color-bg-card`
- `--color-text-muted`
- `--color-border-strong`

Ejemplo:

:root {
	--color-bg-card: rgb(var(--color-primary) / 0.05);
	--color-text-muted: rgb(107 114 128);
}

Son los tokens más importantes para el diseño a larga escala.

3. Tokens de Componente

Cada componente puede tener sus propios tokens internos:

components/button.css
	--button-bg
	--button-radius
	--button-padding

Ejemplo:

.button {
	--button-bg: rgb(var(--color-primary));
	--button-radius: var(--radius-md);
	--button-padding: var(--space-4);
}

Organización recomendada

Folder structure

styles/  
tokens/  
colors.css  
typography.css  
space.css  
radius.css  
shadows.css  
transitions.css  
tokens.theme.light.css  
tokens.theme.dark.css  
tokens.theme.brand2.css  
globals.css

Tokens + Tailwind (práctica avanzada)

Usa tokens a través de RGB variables:

:root {
	--color-primary: 59 130 246;
	--color-neutral-900: 17 24 39;
}

En tailwind.config.js:

colors: {
	primary: "rgb(var(--color-primary) / <alpha-value>)",
	neutral: {
		900: "rgb(var(--color-neutral-900) / <alpha-value>)"
	}
}

Uso en JSX:

<div class="bg-primary/20 text-neutral-900">Hola Tokens</div>

Esto permite:

  • Compatibilidad total con opacidades
  • Temas dinámicos (cambio de variables)
  • Dark mode avanzado sin reescribir clases

Tokens para Themings (Dark Mode / Corporate / Seasonal)

Ejemplo:

:root {
	--color-bg: 255 255 255;
	--color-text: 15 23 42;
}

.dark {
	--color-bg: 17 24 39;
	--color-text: 241 245 249;
}

[data-theme="corporate"] {
	--color-primary: 180 15 200;
	--color-bg: 250 250 250;
}

Cambio de tema en JS:

document.documentElement.dataset.theme = "corporate";

O modo oscuro:

document.documentElement.classList.toggle("dark");

Tokens escalables: escalas recomendadas

Espaciado

8pt system:

--space-1: 0.25rem  
--space-2: 0.5rem  
--space-3: 0.75rem  
--space-4: 1rem  
--space-6: 1.5rem  
--space-8: 2rem

Radios

--radius-sm: 0.25rem  
--radius-md: 0.5rem  
--radius-lg: 1rem  
--radius-xl: 1.5rem

Tipografía

--font-sans: "Inter", system-ui  
--font-serif  
--font-mono

Sombras

--shadow-xs  
--shadow-sm  
--shadow-md  
--shadow-lg

Tokens + Componentes (Patrón recomendado)

Ejemplo para botones:

.button {
	padding: var(--button-padding, var(--space-3));
	border-radius: var(--button-radius, var(--radius-md));
	background: rgb(var(--button-bg, var(--color-primary)));
	color: rgb(var(--button-text, 255 255 255));
}

Override por variante:

.button[data-variant="outline"] {
	--button-bg: transparent;
	--button-text: var(--color-primary);
}

Tokens dinámicos generados por JS

Para apps con personalización:

document.documentElement.style.setProperty(
	"--color-primary",
	"255 100 50"
);

Herramientas recomendadas (2025)

  • Style Dictionary (Amazon) → Genera tokens para web, iOS, Android.
  • Figma Tokens Studio → Exporta automáticamente tokens a JSON/CSS.
  • Theo (Salesforce) → Tokens multiplataforma.
  • Token Transformer → Normalizar y migrar tokens.
  • Tailwind + CSS Variables → La combinación más flexible.

Buenas prácticas esenciales

  • Mantén tokens globales atómicos (colores, espaciados, radios).
  • Usa tokens semánticos en componentes: más abstractos, más escalables.
  • Evita duplicados: cada valor debe tener una única fuente de verdad.
  • No uses tokens para valores únicos en un componente.
  • No incrustes hex o rgb en componentes: siempre variables.
  • Mantén naming consistente (kebab-case).
  • Separa por categorías: color, space, radius, shadow, text, transition.

Ejemplo final: tokens completos listos para copiar

:root {
	/* Colors */
	--color-primary: 59 130 246;
	--color-secondary: 16 185 129;
	--color-bg: 255 255 255;
	--color-text: 17 24 39;

	/* Space */
	--space-2: 0.5rem;
	--space-4: 1rem;
	--space-6: 1.5rem;

	/* Radius */
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-xl: 1.25rem;

	/* Shadows */
	--shadow-card: 0 4px 12px rgba(0,0,0,0.08);

	/* Transition */
	--transition-fast: 150ms;
}

Implementaciones y Workflows con CSS

1. Arquitecturas y Metodologías CSS

  • BEM (Block–Element–Modifier)
    • Facilita escalabilidad y mantenimiento.
    • Clases predecibles: .card__title--large.
    • Ideal para equipos grandes y componentes reutilizables.
  • ITCSS (Inverted Triangle CSS)
    • Orden estricto de capas de CSS para evitar conflictos.
    • Capas: Settings → Tools → Generic → Elements → Objects → Components → Utilities.
    • Pensado para grandes codebases.
  • OOCSS (Object-Oriented CSS)
    • Divide estilos en estructura + decoración.
    • Reutilización extrema: .box, .media, .layout.
  • SMACSS
    • Categoriza estilos por propósito: Base, Layout, Module, State, Theme.
    • Flexible, híbrido entre BEM e ITCSS.

2. Workflows según stack o complejidad

Workflow 1: CSS “Puro” Escalable

  • Estructura modular por carpetas:
    • /settings
    • /typography
    • /layout
    • /components
    • /utilities
  • Uso de variables nativas :root.
  • Arquitectura recomendada: ITCSS + BEM.
  • Activación de capas con @layer (2023+):
	@layer reset, base, components, utilities;
	```

- Build: PostCSS + Autoprefixer + CSSNano.

### Workflow 2: Preprocesadores (SASS/SCSS)
- Uso de *partials*, mixins y funciones.
- Variables centralizadas con design tokens.
- Import modular: `@use` y `@forward`.
- Pipeline:
	- SCSS → PostCSS → bundler (Vite/Webpack).
- Caso ideal:
	- Proyectos medianos-grandes con equipos que necesitan reglas estrictas.

### Workflow 3: CSS-in-JS (React, Vue, Solid, Svelte)
- styled-components, Emotion, Jotai Styles, Vanilla Extract.
- Beneficios:
	- Scoped styles.
	- Tematización con design tokens.
	- Dinamismo basado en props.
- Riesgos:
	- Runtime overhead si no se usa extracción estática.
- Ideal:
	- Apps UI altamente dinámicas, design systems complejos.

### Workflow 4: CSS Utility-First (Tailwind)
- Productividad máxima, sin escribir CSS.
- Tokens en el config, no en el CSS.
- Purga automática de estilos.
- Ideal:
	- MVPs, proyectos rápidos, equipos que quieren consistencia sin debates.

### Workflow 5: Cascade Layers + Custom Properties
- Arquitectura moderna 2023–2025.
- Uso de `@layer` para evitar conflictos.
- Variables por tema y modo:
	
```css
	:root {
		--spacing-sm: 0.5rem;
		--color-bg: light-dark(#fff, #111);
	}
	```

- Ideal para:
	- Design systems nativos sin frameworks.

### Workflow 6: Design Tokens + Build Automático
- Tokens en formatos JSON, YAML o TS.
- Herramientas:
	- **Style Dictionary**
	- **Token Studio**
	- **Figma variables**
- Generación automática:
	- CSS variables
	- SCSS
	- JS/TS themes
	- Variables para iOS/Android
- Perfecto para:
	- Sistemas multi-plataforma que requieren coherencia visual.

## 3. Enfoques según el tipo de proyecto

### Proyectos pequeños
- CSS modular + variables globales.
- ITCSS simplificado o solo BEM.

### Proyectos medianos
- SCSS + organización ITCSS completa.
- Design tokens simples.
- Linting: Stylelint + Prettier.

### Proyectos grandes / Enterprise
- Design system + design tokens.
- Storybook + pruebas visuales.
- CSS-in-JS con extracción estática o Vanilla Extract.
- Theming avanzado + dark mode automático.

### Proyectos multi-equipo
- Documentación de reglas CSS.
- Librería base de componentes.
- Convenciones de clases obligatorias (BEM/ITCSS/Utils).
- Revisión de PR con linters + visual regression tests (Lokí, Chromatic).

## 4. Herramientas recomendadas por Workflow

### Base / Transversal
- PostCSS
- Stylelint
- Prettier
- CSSNano
- Lightning CSS (muy rápido, reemplazo moderno)

### SCSS
- Dart Sass
- Autoprefixer
- Stylelint + reglas SCSS

### CSS-in-JS
- Vanilla Extract
- Emotion
- Linaria
- Stitches (legacy pero útil)

### Design Systems
- Storybook
- Style Dictionary
- Token Studio
- Figma Variables

## 5. Workflows avanzados

### Workflow de A/B Theming
- Temas generados automáticamente desde tokens.
- Build por “modes”: light, dark, high-contrast.
- Soporte a `prefers-color-scheme`.

### Workflow Component-Driven (Atomic Design)
- Diseño en niveles: Atom → Molecule → Organism → Template → Page.
- CSS organizado por componente, no por páginas.

### Workflow para performance
- Critical CSS (automático con herramientas de build).
- CSS chunking por route (Next.js, Astro).
- Eliminación de CSS muerto (Tree-Shaking CSS).
- Uso inteligente de containers queries.

### Workflow para mantenibilidad
- Restricción de capas con `@layer`.
- Separación estricta de tokens / utilidades / componentes.
- Procesos de revisión: lint + visual diff.

## 6. Flujo de trabajo ideal 2025 (recomendado)
1. Tokens en JSON + Style Dictionary.
2. Generación automática de CSS vars + SCSS.
3. Arquitectura ITCSS + Cascade Layers.
4. Componentes aislados en Storybook.
5. Pruebas visuales.
6. Build con Vite + Lightning CSS.
7. Documentación viva del sistema de estilos.


# Omnivore CSS

```base
type: list
name: "Notas con #css en Omnivore"
order:
  - property: date_saved
    direction: desc
columns:
  - file.name
  - date_saved
filters:
  and:
    - file.inFolder("Omnivore")
    - file.hasTag("css", "CSS")
views:
  - type: table
    name: Table
    sort:
      - property: file.mtime
        direction: DESC