¿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!
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í
gracias hermano!!!
Que buen aporte
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.
Puede ser como decís vos, pero me parece que uso new para destacar que es una noticia nueva, fijate que ocupa el 3 lugar dentro del nombre de clase, lo que determina que se refiere a un modificador y no a un elemento o bloque. Por lo tanto lo veo como que "blogs-main-new" hace referencia a un nuevo articulo destacado de la página blogs.
Okay, pero si fuese así no tendría sentido anteponer la palanra main, porque si es principal, no se supone que pueda seguir creando nuevo contenido todo el tiempo y, en todo caso, lo mejor hubiese sido blog-main-new-post. Pero bueno, solo es una observación, nada como para generar una discusión grande de algo tan trivial.
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.
De acurdo. A mi me agrada usar figure como contenedor de imágenes.
hola! ¿que libro es?
Este profe explica todo súper bien! 😁🙌
también me gusta mucho
Hasta ahora, también considero que es de los mejores 🙌
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.
Muy bueno! Además está SMACSS, OOCSS, Atomic design y luego aprenderemos Sass.
Por buena práctica no debería usarse un <figure> como contenedor de <img>?
me gusta la manera como maqueta este profesor el html, super ordenado todo mas entendible
Yo viendo como lo hace el profe vs como lo hice yo
jajja
: )
Interesante estructura. Hace todo mucho más práctico.
Es buena practica para las imagenes agregarle un contenedor con la etiqueta <figure> y no con un <div>.
por?
Debido a que debemos utilizar HTML semantico, y segundo al tener una etiqueta figure le podemos asignar el ancho y alto que queramos que tome nuestra imagen, y solo nos quedaria darle a la imagen un width del 100% y heigth del 100%.
Asi la imagen toma el tamñano completo de su padre en este caso la etiqueta <figure>
muero por mejorar mis propios proyectos con estas practicas rediseñar algunos proyectos personales
La metodología BEM una maravilla, permite entender toda la maquetación de forma muy clara!!!
Toda la razón, me gusta eso.
La metodología BEM (Block, Element, Module) es una forma de organizar de manera efectiva nuestras etiquetas en CSS, logrando código reutilizable y autodescriptible!
Si quieres saber más, y ver un ejemplo, te dejo este vídeo ;)
Muchas gracias :D
Tengo que practicar más el tema del nombre de las clases, me cuesta en ocasiones saber que nombre especificar. Con esta clase despeje dudas que tenía.
a mi me gusta la variación que plantean en este blog:
Corazoncito si te diste cuenta del error de Diego en el div del minuto 2:53 :P
