Módulo 8: Buenas prácticas en CSS
Hemos llegado al último módulo del curso. Aquí aprenderás cómo escribir CSS limpio, organizado y eficiente, algo esencial para que tus proyectos sean fáciles de mantener y escalar.
- ✔️ Cómo organizar tu código CSS de forma clara.
- ✔️ Cómo usar comentarios y convenciones de nombres.
- ✔️ Qué evitar para no sobrecargar tu web.
- ✔️ Cómo mejorar la accesibilidad y el rendimiento.
📂 Organización del código
Un CSS bien estructurado es más fácil de leer y actualizar. Es buena práctica agrupar estilos por secciones o componentes.
✅ Así sabrás rápidamente dónde está cada estilo.
📝 Comentarios y convenciones
Los comentarios ayudan a otros (y a ti mismo en el futuro) a entender qué hace cada bloque de código.
✅ Usa nombres de clases claros y descriptivos (ejemplo: .menu-principal en lugar de .mp).
🚫 Qué evitar en CSS
Hay errores comunes que pueden hacer tu CSS difícil de manejar:
- ❌ Usar IDs (#) en lugar de clases para todo (los IDs son demasiado específicos).
- ❌ Llenar tu CSS de !important sin necesidad.
- ❌ No reutilizar estilos, copiando código en exceso.
✅ Mantén tu código DRY: Don’t Repeat Yourself.
🌍 Accesibilidad y rendimiento
CSS no solo mejora la estética, también puede hacer tu web más accesible:
- ✔️ Asegúrate de que haya buen contraste entre texto y fondo.
- ✔️ Usa unidades relativas como
emyrempara tamaños flexibles. - ✔️ Optimiza tus archivos CSS (minifícalos en producción).
📥 Preguntas de repaso
Pregunta 1
¿Cuál es la mejor forma de mantener tu código CSS ordenado?
- A) Usar solo una hoja gigante sin comentarios.
- B) Agrupar estilos por secciones y usar comentarios.
- C) Escribir todo en línea dentro del HTML.
- D) Usar solo IDs en todo el CSS.
Pregunta 2
¿Qué significa la regla DRY en CSS?
- A) Don’t Repeat Yourself – No repitas código innecesariamente.
- B) Design Responsive Yardstick.
- C) Display Rules Yearly.
- D) Divide Resources Yourself.
Pregunta 3
¿Por qué es importante usar unidades como em o rem?
- A) Porque hacen tu web más rápida.
- B) Porque permiten tamaños flexibles y mejor accesibilidad.
- C) Porque ocupan menos espacio que los px.
- D) Porque eliminan la necesidad de media queries.
🎉 ¡Felicidades! Has completado el curso básico de CSS. Ahora puedes crear sitios web con estilos limpios, profesionales y optimizados.
No hay comentarios:
Publicar un comentario