Buenas Prácticas en Desarrollo Frontend

¡Hola, Platzinauta! ¡Qué alegría que estés por iniciar el Curso Práctico de Frontend Developer! :rainbow:

En esta lectura quiero ayudarte a aclarar algunos conceptos sobre las próximas clases, tus posibles rutas de aprendizaje y el proyecto del curso. :green_heart:

¿Qué es una buena práctica?

Antes de seguir, responde la siguiente pregunta (mentalmente o en la sección de comentarios): ¿qué significa seguir "buenas prácticas"?

Para mí las buenas prácticas son un conjunto de costumbres, acciones, decisiones y/o herramientas que agilizan, mejoran el rendimiento, legibilidad, mantenimiento y/o escalabilidad de nuestros proyectos en un CONTEXTO muy específico.

La palabra clave es contexto. Las buenas prácticas NO son absolutas. Así como funcionan en ciertas situaciones, dejan de tener sentido en otras circunstancias.

Es un error común hablar de buenas o malas prácticas sin entender correctamente su contexto. Yo mismo he caído en esa falacia. Por fortuna, mis líderes, profes, compañeras y amigos han tenido la paciencia y empatía de explicarme cómo analizar el contexto de cada situación antes de llegar a una conclusión.

El contexto de este curso

El Curso Práctico de Frontend Developer pertenece a dos escuelas en Platzi:

• La ruta profesional de JavaScript: es la más corta para aprender desarrollo web desde cero hasta nivel muy avanzado con el Stack PERNN (PostgreSQL, Express.js, React.js, Next.js y Node.js).
• Escuela de Desarrollo Web: la ruta de aprendizaje más larga y completa para dominar y profundizar en todas las herramientas o stacks de programación más importantes del desarrollo web.

:bulb: Escuela de JavaScript vs. Escuela de Desarrollo Web: ¿Cuál elegir? ¿Cuál es mejor?

Junto al Curso de Frontend Developer, este curso es la introducción al gran mundo de la maquetación con HTML y CSS que estudiaremos en la Escuela de JavaScript. Luego de este curso seguirán las bases de JavaScript, frontend con React.js y backend con Node.js.

En cambio, en la Escuela de Desarrollo Web tenemos muchísimos más cursos para practicar HTML y CSS, crear aún más proyectos para tu portafolio profesional y profundizar en herramientas complejas como responsive design, CSS Grid, flexbox y animaciones con CSS.

Etiqueta style vs. archivos .css

Mi nombre es JuanDC, Course Director de este curso y la Escuela de JavaScript 2.0. También soy el responsable de que en este curso escribamos el HTML y CSS de cada página en el mismo archivo usando la etiqueta style.

En las próximas clases puede surgirte la duda de por qué decidimos no separar los estilos en sus propios archivos .css si supuestamente es una "mala práctica". Pero recuerda que las buenas o malas prácticas NO son absolutas, siempre dependen de un contexto. :sweat_smile:

Teniendo eso en cuenta: ¿por qué crees que es una mala práctica escribir el CSS en etiquetas style en vez de archivos .css?

Durante la etapa de planeación discutimos mucho junto a Teffcode, Oscar Barajas y Nico Molina para encontrar la mejor manera de conectar todos sus cursos en la Escuela de JavaScript y construir el mismo proyecto progresivamente.

Más adelante en tu ruta de aprendizaje vas a tomar el Curso Práctico de React.js. Uno de sus objetivos es enseñarte cómo convertir páginas en HTML y CSS a componentes en React. Vas a darte cuenta que allí descargamos el proyecto de este Curso Práctico de Frontend Developer para separarlo entre vistas, componentes y contenedores.

La razón de mantener el HTML y CSS de cada sección de nuestra tienda en un solo archivo .html es para facilitar nuestro trabajo de separar y unir todo ese código cuando tomemos el curso de React.

No es un error. ¡Y tampoco una mala práctica!

Conclusiones

Si tu proyecto con HTML y CSS es la versión final de la aplicación que desplegarás a producción (la que publicarás en internet y será usada por usuarios reales), entonces definitivamente es muy buena práctica separar tus estilos en archivos .css.

En cambio, si tu maquetación con HTML y CSS es apenas el principio de tu desarrollo frontend y más adelante convertirás estos elementos en componentes con alguna herramienta como Web Components, React.js, Angular, Svelte o Vue.js, entonces NO es una mala práctica separar cada elemento en su respectivo archivo ni mantener su HTML y CSS en el mismo lugar.

Espero que esta explicación te haya ayudado un poco a entender el flujo de desarrollo y decisiones que tomamos de este curso. Recuerda siempre tener muy claro el contexto de cada situación antes de determinar si es una buena o mala práctica.

Cuéntame sobre cualquier duda que tengas sobre buenas prácticas en la maquetación web. ¡Mucha suerte completando este curso!