- Blocks: Es una entidad que de por si representa algo en el sitio (ella sola). Un ejemplo podria ser un product card. Otro ejemplo es el navbar, o la forma en que se muestra una categoria, etc.
- Elements: Un elemento que por si solo no tiene ningun significado, siempre esta ligado a un block. Ejemplo es el titulo del producto (dentro del product card), la imagen, etc.
- Modifiers: Modificadores de un bloque o elemento, que hacen que cambie su estado, apariencia, etc.


```<div class="product-card"> // Un block. NO se usa IDs a menos que sea necesario.
  <span class="product-card__title"> // Un element dentro del block. No IDs. <block-name>__<element-name>
  <span class="product-card__price"> // Otro element dentro del block. No IDs
  ...
</div>```

Y los modifiers es para cambiar el estado del elemento/bloque. Por ejemplo, si tuviesemos que mostrar algunos product-cards transparentes (solo un ejemplo que se me ocurrio), seria algo asi:

`<div class="product-card--transparent">  // <item-name>--<modifier-name>`

o si quisieramos mostrar algunos precios mas grandes, algo asi:

`<span class="product-card__price--large"> // <item-name>--<modified-name>`

Eso hace que se entienda mucho mejor el HTML con tan solo mirarlo, y que el CSS quede organizado mucho mejor. El CSS del codigo anterior seria algo asi:

```.product-card {

  //...

  &__title {
    ...
  }

  &__price {
    ..
  }

  &--transparent {
    opacity: 0.5;
  }
}```