Se basa en conocer el nombre de la clase, para saber que elemento del HTML estamos seleccionando
En primera instancia trata de organizar las clases la contenedora, y las clases de los elementos
hijos, la clase principal lleva su nombre el elemento hijo se conformara del elemento padre dos guiones bajos(__)
y el identificador de la clase, si es necesario un tercer elemento, entonces a este le sumaremos dos guiones medios (--)
1. Bloque: .bloque
2. Elemento: .bloque__elemento
3. Modificador: .bloque--modificador o .bloque__elemento--modificador
Es decir en HTML organizado el codigo se veria asi:
Y en CSS organizado el codigo se veria asi:
Si tenemos un elemento padre con varios elementos hijos podemos, especificar en cada uno
en el HTML:
en el CSS:
Si se requiriera un elemento mas es decir, que dentro del tercero existiera un 4 elemento,
entonces deberiamos volver a usar en ese elemento los dos guiones bajos (__), asi:
