# Frontend CSS Styling

> Guides choosing between Tailwind, CSS Modules, and global CSS with BEM, and implementing responsive layouts with Grid, Flexbox, and Container Queries.

- Skill: `leandrobenjaminl/frontend-css-styling` (Agent Skill)
- Install (CLI): `npx skillmds@latest add leandrobenjaminl/frontend-css-styling`
- Raw SKILL.md: https://api.skillmd.com/api/skills/leandrobenjaminl/frontend-css-styling/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, CSS & Styling
- Tags: Bem, Container Queries, Css Modules, Flexbox, Grid, Responsive Layout, Tailwind
- License: MIT
- Author: LeandroBenjaminL (https://skillmd.com/u/leandrobenjaminl)
- Updated: 2026-08-22
- Page: https://skillmd.com/skills/leandrobenjaminl/frontend-css-styling

---


# Skill: frontend-css-styling

CSS moderno. Seleccioná la estrategia correcta y no mezcles todo.

## Trigger

- Necesitás maquetar un componente o página
- No sabés si usar Tailwind, CSS Modules o CSS-in-JS
- Un layout no se comporta como esperás en mobile
- Hay estilos duplicados o que se pisan entre componentes

## Workflow LEND

1. ANALIZAR
   ├── Stack: ¿Tailwind ya está en el proyecto? ¿CSS Modules?
   ├── Tipo: ¿layout global o componente aislado?
   ├── Estado: ¿estilos dinámicos (prop-driven) o estáticos?
   └── Escala: ¿proyecto chico o grande? Tailwind brilla en equipos grandes

2. OFRECER (Menú del Senior)
   ├── A) Tailwind CSS — utility-first, consistente, ideal para equipos
   ├── B) CSS Modules — scoped por componente, CSS puro, sin runtime
   └── C) CSS Global + BEM — para proyectos chicos o landing pages

3. ELEGIR → confirmación

4. HACER
   ├── Tailwind: config con colores, fonts, spacing en tailwind.config
   ├── CSS Modules: un archivo .module.css por componente
   ├── Layout: Grid para 2D, Flexbox para 1D. Container Queries para responsive por componente
   ├── Variables CSS para temas (--color-primary, --spacing-md)
   └── Mobile-first: min-width en media queries, no max-width

5. VERIFICAR
   ├── El layout se ve bien en mobile y desktop
   ├── No hay estilos que se pisan entre componentes
   └── Los breakpoints son consistentes (no 5 media queries distintos)