A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Manejo de clases

14/26
Recursos

Aportes 43

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Metodolog铆a BEM

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 鈥淏lock鈥, 鈥淓lement鈥 y 鈥淢odifier鈥 (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 鈥渂logs-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 鈥渘ews鈥 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.

Este profe explica todo s煤per bien! 馃榿馃檶

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.

Con ayuda de las abreviaturas de Emmet

  • 1er Section: section>(div>h3+div>img)+(div>h2+p+a)
  • 2do Section: section>div>h3+(article.post-container>img+p*2+a)*6

Tener una buena pr谩ctica agregando Clases es muy importante, para no estar peleando con nuestro Css鈥n metodolog铆a BEM, f谩cil de aplicar y f谩cil de leer.

Les dejo el link de un post realizado por un alumno de PLATZI donde da una breve introducci贸n a la metodolog铆a BEM, que se usa para implementar una buena pr谩ctica al momento de generar clases para html y css (tambi茅n es aplicable para otros lenguajes).
https://platzi.com/tutoriales/1244-sass/2620-que-es-la-metodologia-bem-y-como-se-usa/

Falto agregar la clase blogs-button a los <a> en todos los articles.

Por buena pr谩ctica no deber铆a usarse un <figure> como contenedor de <img>?

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.

me gusta la manera como maqueta este profesor el html, super ordenado todo mas entendible

Es buena practica para las imagenes agregarle un contenedor con la etiqueta <figure> y no con un <div>.

La metodolog铆a BEM una maravilla, permite entender toda la maquetaci贸n de forma muy clara!!!

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 馃槈

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.

Interesante estructura. Hace todo mucho m谩s pr谩ctico.

BEM facilita mucho las cosas

muero por mejorar mis propios proyectos con estas practicas redise帽ar algunos proyectos personales

Como un tip. En la parte donde el profe copia y pega la clase del 鈥渁rticle鈥. Pueden seleccionar con el alt donde quieran pegar o escribir el mismo texto en varias l铆neas de c贸digo.

Si ponen div>h3+(article.post-container>img+p*2+a)*6 y luego enter se genera todo de una vez.

El orden es fundamental!

El amor a las buenas practicas.

Que buena clase y que bien que explica el profesor 馃槂

Genial, es muy importante aplicar algo de la metodologia BEN genera buena practicas y hace nuestro codigo mas legible para todos, Gran Clase

Estas buenas practicas de separar todo para que se entienda bien todo, es lo que hace la diferencia entre una buena pagina y una mala.

C贸mo hacemos para hacer que el scroll funcione en la p谩gina de blogs.html?

las buenas practicas son lo que hace a un buen front por nuestro bien y el de las personas que tengan el proyecto despues de nosotros
genial

Sigamos 馃槃

super, excelente 馃槃

Perfecto! A darle!

Tener organizado todo con la estructura de BEM me facilita mucho las cosas al momento de dar estilos.

Degranda especifica muy bien cuando debemos ser puntuales y cuando no en cuanto al nombramiento de las clases o el no nombramiento 馃榿

Seguirmos bien 馃槃

Estupenda clase instructor Diego, al mantener esta organizaci贸n de clases evitaremos que existan conflictos al momento de establecer las reglas en nuestro archivo .css.

Como siempre aprendiendo mucho de la manera en la que maqueta Diego,

Continuemos 馃槃

驴Cu谩l es la diferencia de usar section o article en vez de un div?

en el curso de desarrollo web online, el profe Leonidas mencionaba que lo m谩s dif铆cil era pensar en el nombre que pondr铆amos a nuestras clases.

Ac谩 tienen el emmet ```
div>h3+(article.post-container>img+p*2+a.blogs-button)*6

Hola, solo quiero decir que me volv铆 fan del profe De Granda, siempre ejemplifica de manera directa, sencilla y genial, he aprendido mucho de desarrollo front-end b谩sico con el, cosa que necesitaba mucho y que estos fundamentos, har谩n que tenga conocimientos m谩s s贸lidos para lo que se viene en la escuela de desarrollo web, lo se, como yo deben de haber muchos. Gracias Diego!

Excelente

s