metodologia - modelo bem en css

Confusiones BEM con nombres de elementos

Question

He estado utilizando BEM en un proyecto en el trabajo para mantener mi CSS más modular y me he encontrado con algunas situaciones en las que siento la necesidad de aclarar un poco:

Estilos dependientes del contexto Sigo encontrándome con la necesidad de cambiar el estilo de un módulo / componente que depende de una clase en un elemento principal.

Di que soy una lista de productos de estilo. Tengo mi componente .product-list y dentro de eso todos mis .product-list__item ''s. El .product-list__item ''s puede tener un <h3> dentro como título del producto.

Mis preguntas son:

• ¿El .product-list__item también tiene una clase de .item ?

• Debe el título dentro del producto tener las siguientes clases:

• • .item__title ?
• • .product-list__item__title ?

Supongamos que el artículo también tiene un cuadro de descripción dentro y que contiene el precio:

• ¿Debería la descripción tener:
• • .item__description ?
• • .product-list__item__description ?

• Si el precio tiene:

• • .item__description__price ?
• • .description__price ?
• • .price ?

Yo hago un tipo de subcomponentes que necesitan su propio nombre de componente agregado separatley, es decir: .item o .description . Supongo que los necesitan porque ¿de qué otro modo obtienen su estilo aplicado?

Además, si tuviera lo anterior, tendría un componente .product-list que funciona bien, pero si los subcomponentes tienen su propio nombre de componente agregado como clase, como .item entonces eso no es muy descriptivo de sí mismo, ¿verdad?

Sé que puede sonar complicado, pero en serio estoy confundido aquí y me encantaría escuchar sus opiniones. He leído muchos artículos sobre BEM y ninguno explica este tipo de cosas.

Neil

Answer 1

Según la metodología BEM, no hay elementos de elementos, por lo que en lugar de product-list__item__title debe usar product-list__item-title .

En cuanto a los estilos dependientes del contexto, puede usar cascada (y colocar estilos en el archivo principal) o mezclar como en sus ejemplos. La regla es simple: tan pronto como te encuentres usando algún elemento en alguna parte sin su bloque padre: haz que separe el bloque y usa mezclas, pero si los elementos son absolutamente inútiles sin el uso de los padres, Cascade tiene más sentido.