Aprender a organizar y estructurar el CSS para proyectos grandes. Conocer metodologías como BEM y SMACSS.
Objetivos
- Aprender a organizar y estructurar el CSS para proyectos grandes.
- Conocer metodologías como BEM y SMACSS.
- Optimizar el rendimiento del CSS en producción.
- Adoptar buenas prácticas de mantenimiento y escalabilidad.
🔹 1. Organización del código
- Agrupa por componentes: cada bloque de la interfaz debe tener su propio conjunto de reglas.
- Evita duplicados: reutiliza clases y variables.
- Comentarios claros: documenta secciones y efectos especiales.
css
/* ===== Botones ===== */
.btn {
background: var(--color-primario);
color: #fff;
}
🔹 2. Metodología BEM (Block, Element, Modifier)
BEM ayuda a mantener un CSS escalable y fácil de entender.
css
/* Bloque: card */
.card { ... }
/* Elemento: título dentro de card */
.card__title { ... }
/* Modificador: card destacada */
.card--destacada { ... }
👉 Ventaja: evita conflictos y hace el CSS más legible.
🔹 3. Optimización de rendimiento
- Minificar CSS: elimina espacios y comentarios en producción.
- Combinar archivos: reduce peticiones HTTP.
- Usar preprocesadores (Sass, Less) para modularidad.
- Evitar selectores demasiado complejos: ralentizan el renderizado.
🔹 4. Buenas prácticas
- Usa variables CSS para colores y tipografía.
- Prefiere clases sobre selectores de ID o etiquetas.
- Aplica mobile first en media queries.
- Mantén un estilo consistente en nombres y estructura.
🔹 5. Herramientas útiles
- Autoprefixer: añade prefijos automáticamente para compatibilidad.
- Stylelint: detecta errores y mantiene estándares.
- DevTools: analiza rendimiento y depura estilos en el navegador.
📝 Actividad práctica
- Reestructura un bloque de tu web usando BEM.
- Minifica tu CSS y mide la diferencia en velocidad de carga.
- Configura variables globales (
:root) para colores y tipografía.
MODULO 7 CSS Frameworks y Preprocesadores
Visitas:206