Mejores Prácticas
## Objetivos de Aprendizaje
- Escribir CSS mantenible
- Organizar archivos CSS
- Seguir convenciones de nomenclatura
- Optimizar para rendimiento
## Organización de CSS
### Archivo Único vs Múltiples Archivos
```css
/* Proyecto grande - considerar dividir */
/* styles.css */
/* typography.css */
/* layout.css */
/* components.css */
/* utilities.css */
/* O usar una herramienta de build para combinar */
```
### Metodologías CSS
#### BEM (Block Element Modifier)
```css
/* Block */
.card { }
/* Element */
.card__title { }
.card__body { }
.card__image { }
/* Modifier */
.card--featured { }
.card__title--large { }
```
#### Utility-First (Inspirado en Tailwind)
```css
/* Clases de utilidad */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.d-flex { display: flex; }
.gap-1 { gap: 0.25rem; }
```
## Convenciones de Nomenclatura
### Usar Nombres Descriptivos
```css
/* Bien */
.navigation-primary { }
.button-submit { }
.section-about { }
/* Mal */
.nav { }
.btn { }
.sec { }
```
### Nomenclatura de Componentes
```css
/* Componente + parte */
.article-card { }
.article-card__header { }
.article-card__image { }
.article-card__content { }
.article-card--featured { }
```
## Gestión de Especificidad
### Mantener la Especificidad Baja
```css
/* Bien - especificidad baja */
.button {
background-color: blue;
}
/* Mal - especificidad alta */
header nav ul li a.button {
background-color: blue;
}
```
### Evitar !important
```css
/* Usar especificidad en su lugar */
/* Mal */
.button {
background-color: blue !important;
}
/* Bien */
header .button-primary {
background-color: blue;
}
```
## Estilo de Código
### Formateo Consistente
```css
/* Usar indentación consistente */
/* Usar espacios, no tabs */
/* Un selector por línea para múltiples */
/* Bien */
.button,
.button-secondary,
.button-tertiary {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
}
/* Mal */
.button, .button-secondary, .button-tertiary {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
}
```
### Agrupar Propiedades Relacionadas
```css
.button {
/* Display */
display: inline-flex;
align-items: center;
justify-content: center;
/* Modelo de caja */
padding: 10px 20px;
margin: 5px;
/* Tipografía */
font-size: 16px;
font-weight: 500;
color: white;
/* Visual */
background-color: blue;
border: none;
border-radius: 4px;
}
```
### Usar Abreviaciones con Criterio
```css
/* Bien - usando abbreviación */
margin: 10px 20px;
padding: 10px;
/* Cuando necesitas valores específicos */
/* Mal - resetea otros valores */
margin: 10px 0 10px 0; /* Podría usar margin-top, margin-bottom */
```
## Rendimiento
### Minimizar Repaints y Reflows
```css
/* Mal - múltiples reflows */
.elemento {
width: 100px;
height: 100px;
background-color: red;
}
.elemento {
width: 200px;
}
/* Bien - agrupar cambios */
/* Usar clases en su lugar */
.elemento {
transition: width 0.3s, height 0.3s;
}
.elemento.expanded {
width: 200px;
height: 200px;
}
```
### Usar transforms para Animaciones
```css
/* Bien - acelerado por GPU */
.animated {
transform: translateX(100px);
transition: transform 0.3s;
}
/* Mal - causa layout */
.animated {
left: 100px;
transition: left 0.3s;
}
```
### Optimizar Selectores
```css
/* Mal - excesivamente específico */
html body div.container ul li a.link { }
/* Bien - simple y específico */
.nav-link { }
```
### Usar will-change con Moderación
```css
/* Usar antes de animar */
.animated-element {
will-change: transform;
}
/* Eliminar después de animar */
.animated-element.done {
will-change: auto;
}
```
## Diseño Responsivo
### Mobile-First
```css
/* Estilos base (móvil) */
.container {
width: 100%;
padding: 0 15px;
}
/* Tableta y superior */
@media (min-width: 768px) {
.container {
width: 720px;
margin: 0 auto;
}
}
```
### Puntos de Quiebre
```css
/* Elegir puntos de quiebre basados en contenido */
/* No en dispositivos específicos */
@media (min-width: 576px) { /* Teléfonos pequeños */ }
@media (min-width: 768px) { /* Tabletas */ }
@media (min-width: 992px) { /* Portátiles */ }
@media (min-width: 1200px) { /* Escritorios */ }
```
## Accesibilidad
### Contraste de Color
```css
/* Asegurar contraste suficiente */
.texto {
color: #333; /* En fondo claro */
background-color: #f5f5f5;
}
/* Verificar ratios de contraste */
/* WCAG AA: 4.5:1 para texto normal */
/* WCAG AA: 3:1 para texto grande */
```
### Estados de Enfoque
```css
/* Nunca eliminar outlines de enfoque sin reemplazo */
.button:focus {
outline: 2px solid blue;
outline-offset: 2px;
}
/* Estilo de enfoque personalizado */
.button:focus-visible {
outline: 2px solid blue;
outline-offset: 2px;
}
```
### Movimiento Reducido
```css
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
```
## Propiedades Personalizadas CSS
### Usar Variables para Design Tokens
```css
:root {
/* Colores */
--color-primary: #007bff;
--color-text: #333;
--color-background: #fff;
/* Espaciado */
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
/* Tipografía */
--font-size-base: 16px;
--font-family: system-ui, sans-serif;
/* Sombras */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
}
```
## Depuración
### Chrome DevTools
- Usar panel de Estilos para editar CSS
- Alternar casillas para habilitar/deshabilitar propiedades
- Ver estilos calculados
- Visualización del modelo de caja
### Firefox DevTools
- Inspectores de Grid y Flexbox
- Visor de fuentes
- Inspector de animaciones
## Resumen
- Organizar CSS con metodología (BEM, utility-first)
- Mantener especificidad baja
- Usar propiedades personalizadas CSS para mantenibilidad
- Usar transforms para animaciones (rendimiento)
- Enfoque responsivo mobile-first
- Respetar accesibilidad (contraste, enfoque, movimiento reducido)
- Usar DevTools para depuración
- Mantener código consistente y legible
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →