<aside> 💡 5 Reasons To Use BEM
</aside>
BEM es un paradigma que anticipa modificadores de un componente.En esta metodología categorizamos o dividimos las clases de la siguiente manera:
Los bloques consideran contenedores de los componentes que nos sirven para englobarlos tipo objetos.
A block represents the main component name. If you were building a house component, the class name would be .house. All of the properties you want included for all houses would be included in the base .house class.
Los elementos que van dentro de estos contenedores.
An element represents a part of a component and is separated by two underscores. The door of the house would be represented by the class .house__door. A window would be .house__window.
Be careful to look for smaller component possibilities within a larger component. Especially if it’s a pattern that might be repeated in an unrelated component. Avoid using a class like .house__stair__step. Instead, either use .house__stair-step (a single dash does not indicate anything in BEM and can simply be used for compound naming). Or if the stair portion of the component might be used inside another component, make the .stair a smaller component within the larger component and use .stair__step as an element of it.
Son clases de lo más geniales, nos permiten modificar el comportamiento o estilo de un componente.
A modifier is a component or element variation and is separated by a single underscore. The variation can apply to the overall component or it can be applied to an element within the component.
Since the properties that should apply to every house are placed on the main .house class, all houses receive the .house class as the base. If there is a variation of a house — perhaps it is gray — the .house_gray class would be added to the component in addition to the .house class.
If the house has a pink door, a variation can be placed on the door element itself — .house__door_pink.
Example of component named in BEM
