¿Cómo gestionar una arquitectura eficiente de clases en HTML?
Un aspecto fundamental en la creación de una página web es el adecuado manejo de clases CSS. Esto facilita la reutilización de estilos y asegura una consistencia visual en todas las páginas de un sitio. Vamos a explorar cómo lograr una arquitectura de clases bien organizada para desarrollar un "Blog punto html".
¿Por qué es importante un buen manejo de clases?
El uso correcto de clases:
Permite un mantenimiento más sencillo del código.
Evita la duplicación de estilos.
Facilita la escalabilidad del proyecto.
Asegura que cada página tenga estilos específicos.
Imagínate tener que cambiar el estilo de un componente en todas las páginas de un sitio web. Al tener una arquitectura de clases bien definida, este proceso se simplifica enormemente.
¿Cómo nombrar las clases de manera efectiva?
Nombrar las clases de forma clara y específica es crucial. Aquí te comparto algunas estrategias:
Por contexto: Las clases deben reflejar la sección o la función que cumplen en la página. Por ejemplo, si estás en una página específica del blog, todas las clases podrían empezar con "Blog".
Por función: Considera qué rol juega cada elemento. Por ejemplo, una clase puede llamarse blog-main si es la sección principal.
Especificidad gradual: Empieza con una definición general y desciende a lo específico. Por ejemplo:
<divclass="blog-main"><sectionclass="blog-news-content"><divclass="blog-main-action"><imgsrc="imagen.jpg"class="blog-news-image"><p>Este es un ejemplo de texto.</p><buttonclass="blog-button">Leer más</button></div></section></div>
¿Cuál es el siguiente paso después de definir las clases?
Una vez definida la arquitectura de clases, el siguiente paso es replicar estas clases en todos los componentes similares para asegurar la coherencia de estilos. Por ejemplo, blog-news-content puede replicarse en múltiples artículos para mantener un diseño uniforme.
Además, no te olvides de los elementos comunes, como los footer. Al ser una parte repetitiva en todas las páginas, pueden utilizar una clase general como:
<footerclass="site-footer"><!-- Contenido del footer --></footer>
¿Qué sigue después de organizar tus clases?
Con las clases bien definidas y aplicadas, estás listo para comenzar a crear tus estilos CSS. Mantén tus archivos CSS organizados, comenta bloques de código cuando sea necesario y sigue las buenas prácticas para asegurarte de que tu estilo sea manejable y escalable.
Siempre recuerda, organizar bien desde un inicio te ahorrará mucho tiempo futuramente. ¡Adelante, sigue explorando y aprendiendo en el fascinante mundo del desarrollo web!
¿Cómo gestionar una arquitectura eficiente de clases en HTML?
Un aspecto fundamental en la creación de una página web es el adecuado manejo de clases CSS. Esto facilita la reutilización de estilos y asegura una consistencia visual en todas las páginas de un sitio. Vamos a explorar cómo lograr una arquitectura de clases bien organizada para desarrollar un "Blog punto html".
¿Por qué es importante un buen manejo de clases?
El uso correcto de clases:
Permite un mantenimiento más sencillo del código.
Evita la duplicación de estilos.
Facilita la escalabilidad del proyecto.
Asegura que cada página tenga estilos específicos.
Imagínate tener que cambiar el estilo de un componente en todas las páginas de un sitio web. Al tener una arquitectura de clases bien definida, este proceso se simplifica enormemente.
¿Cómo nombrar las clases de manera efectiva?
Nombrar las clases de forma clara y específica es crucial. Aquí te comparto algunas estrategias:
Por contexto: Las clases deben reflejar la sección o la función que cumplen en la página. Por ejemplo, si estás en una página específica del blog, todas las clases podrían empezar con "Blog".
Por función: Considera qué rol juega cada elemento. Por ejemplo, una clase puede llamarse blog-main si es la sección principal.
Especificidad gradual: Empieza con una definición general y desciende a lo específico. Por ejemplo:
<div class="blog-main">
<section class="blog-news-content">
<div class="blog-main-action">
<img src="imagen.jpg" class="blog-news-image">
<p>Este es un ejemplo de texto.</p>
<button class="blog-button">Leer más</button>
</div>
</section>
</div>
¿Cuál es el siguiente paso después de definir las clases?
Una vez definida la arquitectura de clases, el siguiente paso es replicar estas clases en todos los componentes similares para asegurar la coherencia de estilos. Por ejemplo, blog-news-content puede replicarse en múltiples artículos para mantener un diseño uniforme.
Además, no te olvides de los elementos comunes, como los footer. Al ser una parte repetitiva en todas las páginas, pueden utilizar una clase general como:
<footer class="site-footer">
<!-- Contenido del footer -->
</footer>
¿Qué sigue después de organizar tus clases?
Con las clases bien definidas y aplicadas, estás listo para comenzar a crear tus estilos CSS. Mantén tus archivos CSS organizados, comenta bloques de código cuando sea necesario y sigue las buenas prácticas para asegurarte de que tu estilo sea manejable y escalable.
Siempre recuerda, organizar bien desde un inicio te ahorrará mucho tiempo futuramente. ¡Adelante, sigue explorando y aprendiendo en el fascinante mundo del desarrollo web!
Son una serie de normas que buscan tener nuestro código CSS bien organizado. Existen muchas metodologías, pero BEM es de las más populares. Cubre la necesidad de tener proyectos complejos bien estructurados para evitar confusiones o redundancia.
.
BEM es una abreviación de las palabras "Block", "Element" y "Modifier" (Bloque, elemento y modificador en español), esto es por la forma en la que trataremos cada elemento de nuestra página web.
Bloque: Es un elemento que existe por si mismo, es completamente independiente. En el proyecto de este clase, el bloque bien podría ser la sección de Noticias.
Elemento: Son las partes que componen el bloque; cuadros de texto, imagenes, títulos, botones, etc.
Modificadores: Son las distintas versiones de un elemento; el mejor ejemplo es cuando tienes el mismo boton en varios bloques, pero con colores distintos.
.
Frecuentemente las clases se llaman con el siguiente formato: [class="bloque__elemento--modificador"], siendo el modificador opcional.
.
Las metodologías nos permite reciclar código y conocerlas también nos va a nos facilitará integrarnos a un equipo de trabajo.
.
Puedes encontrar más información sobre BEM aquí
En el minuto 1:59 cuando el tutor agrega el nombre de la clase al <div> le nombra como "blogs-main-new". Nada más les quiero decir que la palabra new, en inglés significa nuevo, no significa noticia, como seguramente el profesor tenía intencionado, esto se debe a que el en inglés hay ciertas palabras que vienen pluralizadas, es decir añadida la S al final, lo que quiero decir es que no existe el singular de la palabra news, para decir solo noticia, lo correcto es "news" siempre, sea que te refieras a una sola noticia como singular o, a muchas noticias en forma plural. Diego de Granda me parece un excelente tutor, más yo soy profesor de inglés desde hace 12 años, por eso les hago este aporte más que no tenga mucho que ver con el código, pero saber escribir bien inglés te ayudará a tener un código muy fácil de digerir para cualquier otro programador en el mundo. Sigamos aprendiendo, con este excelente maestro, hasta aquí yo he aprendido mucho y le agradezco a él y al equipo platzi.
Los contenedores de imagenes deberian ser <figure>en lugar de <div> en html semantic,para que los page readers puedan interpretar que hay una imagen ese campo.
Recuerdo que cuando estaba en la escuela, recién salia los template strings, se abrió un mundo posibilidades, era novato y sabia la existencia de los frameworks en ese entonces. Nos dejaron la tarea de crea un blog con muchas páginas y lo normal era repetir el código, así lo que hice fue crear funciones con los nombre de cada sección y dentro de cada sección retorne un template string con el html necesario. El día de entregar el proyecto el profesor se quedo con la cara de sorprendido por el monto de código que me ahorre XD, fue épico ese día, me senti como un pro.
Tener una buena práctica agregando Clases es muy importante, para no estar peleando con nuestro Css..Un metodología BEM, fácil de aplicar y fácil de leer.
