Semana 3 - CSS Básico y Avanzado

Objetivos de Aprendizaje

Dominar selectores CSS y el modelo de cascada
Comprender el modelo de caja y sistemas de posicionamiento
Implementar layouts modernos con Flexbox y Grid
Aplicar técnicas de diseño responsivo y mobile-first
Utilizar características avanzadas como variables CSS y funciones
Optimizar el rendimiento de estilos en proyectos web

CSS Básico

Selectores

Modelo de Caja

Layouts

Animaciones

Selectores Básicos

/* Selector de elemento */
p { color: blue; }

/* Selector de clase */
.destacado { font-weight: bold; }

/* Selector de ID */
#header { background: #333; }

/* Selector descendente */
nav ul li { display: inline-block; }

Especificidad Cascada Herencia

Pseudo-clases/elementos

/* Estados de interacción */
a:hover { color: red; }
input:focus { outline: 2px solid blue; }

/* Posición en listas */
li:nth-child(odd) { background: #f5f5f5; }

/* Pseudo-elementos */
p::first-letter { font-size: 1.5em; }
.blockquote::before { content: '"'; }

:hover :nth-child ::before

Box Model

Contenido

.elemento {
  width: 300px;
  padding: 20px;
  border: 5px solid #333;
  margin: 10px;
  box-sizing: border-box; /* Alternativa */
}

margin border padding

Posicionamiento

static

relative

absolute

fixed

sticky

.relative { position: relative; }
.absolute { position: absolute; top: 0; }
.fixed { position: fixed; bottom: 0; }
.sticky { position: sticky; top: 0; }

Flexbox

.contenedor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.item {
  flex: 1 0 auto;
}

display: flex justify-content align-items

CSS Grid

Main

.contenedor {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }

display: grid grid-template fr units

Transiciones

Pasa el cursor

.elemento {
  transition: all 0.3s ease;
  background: blue;
}

.elemento:hover {
  background: red;
  transform: scale(1.1);
}

transition easing duration

Animaciones

✨

@keyframes slidein {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.elemento {
  animation: slidein 1s ease infinite alternate;
}

@keyframes animation transform

CSS Avanzado

Variables

Funciones

Responsive

Efectos

Variables CSS

:root {
  --primary-color: #3498db;
  --spacing-unit: 1rem;
  --max-width: 1200px;
}

.elemento {
  color: var(--primary-color);
  margin: calc(var(--spacing-unit) * 2);
  max-width: var(--max-width);
}

Custom Properties --variable-name var()

Buena Práctica:

Define variables en :root para acceso global y usa nombres descriptivos.

Modificación con JS

// Obtener variable
const primary = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color');

// Cambiar variable
document.documentElement.style
  .setProperty('--primary-color', '#e74c3c');

Funciones Matemáticas

.elemento {
  width: calc(100% - 2rem);
  font-size: clamp(1rem, 2vw, 1.5rem);
  padding: min(2rem, 5%);
  margin: max(1rem, 3vh);
}

calc() clamp() min()/max()

Uso Práctico:

clamp() es ideal para tipografía fluida que se escala entre valores mínimo y máximo.

Ejemplo: Grid Fluido

.grid-container {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(250px, 100%), 1fr)
  );
  gap: clamp(1rem, 3vw, 2rem);
}

Item 1

Item 2

Item 3

Item 4

Media Queries

/* Mobile-first approach */
.container {
  padding: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

@media mobile-first breakpoints

Container Queries

.card {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

Título

Contenido que cambia según el ancho del contenedor

Clip-path & Mask

.elemento {
  clip-path: polygon(
    0 0, 100% 0, 
    100% 75%, 0 100%
  );
  
  mask-image: linear-gradient(
    to right, 
    transparent, black 20%
  );
}

clip-path mask shapes

Filtros y Blend Modes

.imagen {
  filter: blur(1px) brightness(1.2);
  mix-blend-mode: multiply;
  backdrop-filter: blur(5px);
}

filter blend-mode backdrop-filter

Optimización CSS

Métricas Clave

Tamaño del CSS: Minificar y comprimir
CSS no utilizado: Eliminar con herramientas como PurgeCSS
Complexity: Evitar selectores demasiado específicos
Render blocking: Critical CSS para above-the-fold

Herramientas

Auditoría: Chrome DevTools, Lighthouse
Optimización: PostCSS, cssnano
Organización: BEM, SMACSS, ITCSS
Preprocesadores: Sass, Less (con moderación)

Técnicas Avanzadas

CSS Containment: contain: paint
Will-change: will-change: transform
Content-visibility: content-visibility: auto
Layer: @layer base, components, utilities;

Ejercicios de Laboratorio

Ejercicio 1: Galería Responsive

Implementé una galería de imágenes que se adapta a diferentes tamaños de pantalla usando:

CSS Grid con auto-fit y minmax()
Media Queries para ajustes específicos
Efectos hover con transiciones
Container Queries para componentes reutilizables

Resultado:

Imagen 1

Imagen 2

Imagen 3

Imagen 4

Ejercicio 2: Dashboard con CSS Grid

Desarrollé un dashboard complejo utilizando:

CSS Grid con áreas nombradas
Variables CSS para temas personalizables
Transiciones para interacciones suaves
Flexbox para componentes internos

Resultado:

Header

Main Content

Ejercicio 3: Efectos Visuales Avanzados

Creé componentes con efectos visuales sofisticados:

Tarjetas con clip-path interactivo
Animaciones con @keyframes y scroll-timeline
Efectos de parallax con solo CSS
Máscaras y gradientes complejos

Resultado:

Clip-path Effect

Pasa el cursor para ver el efecto

Scroll Animation

Desplázate para activar

Reflexión sobre el Aprendizaje

¿Qué aprendí?

Esta semana ha sido una inmersión profunda en el poder de CSS:

Fundamentos sólidos: Comprendí completamente el modelo de caja, especificidad y cascada, lo que me permite depurar problemas de estilos con mayor eficiencia.
Layouts modernos: Domino Flexbox y Grid al punto de poder crear diseños complejos con menos código y mayor mantenibilidad.
Diseño responsivo: Aprendí a implementar estrategias mobile-first y a usar container queries para componentes verdaderamente independientes.
Performance: Entendí cómo el CSS afecta el rendimiento y cómo optimizarlo mediante técnicas como el critical CSS y la contención.
Efectos avanzados: Descubrí que muchos efectos que antes requerían JavaScript ahora son posibles solo con CSS, como animaciones complejas y scroll effects.

¿Cómo aprendí?

Mi proceso de aprendizaje fue multifacético:

Práctica deliberada: Creé múltiples versiones de cada ejercicio, forzándome a usar diferentes enfoques para resolver los mismos problemas.
Análisis de código: Inspeccioné sitios web profesionales para entender cómo implementan sus diseños y luego intenté replicar sus técnicas.
Desafíos personales: Me impuse limitaciones como "no usar JavaScript" para dominar las capacidades puras de CSS.
Retroalimentación: Compartí mis ejercicios con compañeros y mentores para recibir críticas constructivas.
Documentación: Llevé un registro detallado de mis descubrimientos y soluciones a problemas comunes.

El momento más revelador fue cuando entendí cómo las variables CSS pueden cambiar completamente la forma de organizar los estilos y permitir temas dinámicos. Implementar un sistema de temas con variables y JavaScript fue un punto de inflexión en mi comprensión.

Próximos Pasos

Para continuar mi aprendizaje en CSS:

CSS Houdini: Explorar las nuevas APIs de pintura y animación para llevar mis diseños al siguiente nivel.
Scroll-driven Animations: Dominar las nuevas capacidades de animación vinculadas al scroll.
Accesibilidad avanzada: Profundizar en cómo el CSS afecta la accesibilidad y cómo mejorarla.
Arquitectura CSS: Aprender metodologías avanzadas como ITCSS para proyectos grandes.
Herramientas modernas: Integrar PostCSS y otras herramientas en mi flujo de trabajo.

También quiero enfocarme en crear una biblioteca de componentes reutilizables con CSS moderno que pueda usar en proyectos futuros, documentando cada decisión de diseño y técnica utilizada.

Resumen Semana 3

Conceptos Clave

Selectores, especificidad y modelo de caja
Sistemas de layout: Flexbox y Grid
Variables CSS y funciones modernas
Diseño responsivo y mobile-first
Técnicas de optimización y performance

Herramientas Dominadas

Media Queries y Container Queries
Animaciones y transiciones CSS
Clip-path y efectos visuales
Métricas de rendimiento
Organización de código CSS

Próximos Pasos

Profundizar en CSS Houdini
Explorar Scroll-driven Animations
Patrones de diseño accesibles
Integración con frameworks CSS
CSS en arquitecturas modernas