/* Componente */
.header{
height:60px;
}
/* Elemento interno */
.header__logo{
width:100px;
}
/* Modificador */
.header--inverse{
color:white;
background-color:black;
} Ojo! Hay que estar atentos a los elementos internos ya que es probable que muchos se conviertan en componentes y está super bien.
/* Ejemplos */
.header{}
.footer{}
.banner{}
.slider{}
.product-thumbnail{}
.products-grid{}
.product-detail{}
.product-image-slider{}
.about-info{}https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.header{
display:flex;
justify-content:space-between;
}
.header__logo{
}
.header__menu{
flex:1;
}#header{
height:60px;
} ... a menos que sea este el caso
.header__logo{
float:left;
} .header .logo{
height:60px;
} ####block__element--modifier
