Sass, BEM, & Responsive Design (4 hr beginners course)

Curso tomado del canal de youtube Coder Coder.
Se usó la creación y configuración inicial del proyecto del tutorial de 01.youtube_designcode.

Ejecución del proyecto

El proyecto ya fue configurado en el archivo package.json:

"scripts": {
    "sass": "sass --watch ./app/scss/style.scss ./dist/style.css"
  },

Por lo tanto, para ejecutar la compilación escribir en la terminal (siempre ubicados en la raíz del proyecto):

$ npm run sass

Metodología BEM (Block Element Modifier)

Con esta metodología para establecer estilos únicamente lo haremos a través de clases y pseudoselectores como por ejemplo el :hover.

Bloques

Contenedor donde se ubicarán los diversos elementos.
Los siguientes elementos son considerados bloques a simple vista:

Header
Sidebar
Aside
Main
Footer
Article
Section
ul
ol
div

Todo elemento debe estar siempre dentro de un bloque.
A continuación se define un bloque cuyo nombre de clase que lo identifica es header:

<header class="header">
  <!--Aquí irán los elementos-->
</header>

Bloque modificado

Para agregar una variación del mismo bloque se usan dos guiones medios (--).

<header class="header header--dark">
  <!--Aquí irán los elementos-->
</header>

Observemos que el bloque modificado siempre inicia en la clase el nombre del bloque header y a continuación el nombre del bloque seguido de dos guiones medios con el nombre del bloque modificado header--dark.

Elementos

Jamás existirán elementos si estos no se han definido dentro de un bloque.
Son las diversas partes que componen un bloque.
Cada elemento nace a partir de la clase del bloque a la que conforma seguido de 2 guiones bajos (__).

<header class="header">
  <!-- Elemento 1 -->
  <img src="img.png" alt="logo" class="header__logo">
  <!-- Elemento 2 -->
  <a href="#" class="header__link">enlace</a>
</header>

Elemento modificado

Son variaciones de los elementos y al igual que el bloque modificado, usan 2 guiones medios (--) al mismo nivel de dicho elemento.

<header class="header header--dark">
  <!-- Elemento 1 -->
  <img src="img.png" alt="logo" class="header__logo header__logo--light">
  <!-- Elemento 2 -->
  <a href="#" class="header__link header__link--light">enlace</a>
</header>

NOTA

Siempre es bloque-elemento-modificador