Introducción

¿Por qué?

• Trabajar en un equipo de varios developers.
• Generar un código mantenible y escalable.
• Reutilizar código.

¿Cómo?

• Generando un código organizado, estructurado y bien documentado
• Fragmentando el código en pequeños trozos (componentes/módulos/objetos) independientes
• Separando los componentes de su contexto
• Refactorizando continuamente

Enlaces relacionados

• “Breaking Good Habits” - Harry Roberts
• “CSS Architectures: Scalable and Modular Approaches” - Denise Jacobs

Guía de estilos de código

Una guía de estilos:

• Genera un código más legible y fácil de mantener.
• Disminuye la cantidad de errores.
• Refuerza las buenas prácticas.
• Permite trabajar en un mismo proyecto a desarrolladores de diferente nivel.

Ejemplos:

• CSS Guidelines
• Sass Guidelines
• Primer (Github)
• Code Guide by @mdo

Existen herramientas que nos ayudarán a que todos los miembros del equipo sigan las pautas definidas.

• Sass Lint
• CSS Comb
• EditorConfig

Selectores

Carcterísticas de un buen selector

• Tiene baja especificidad
• Es sólido (no depende del contexto)
• Es autodocumentado (su función se entiende solo con leerlo)

El gráfico de especificidad es una representación de cómo se distribuye la misma a lo largo de una hoja de estilo.

Es recomendable que la especificidad vaya aumentando gradualmente, empezando con estilos más genéricos (selectores de elemento) y acabando con casos más específicos.

Gráfico de especificidad

The Specificity Graph - Harry Roberts

Especificidad plana

Intentar mantener los selectores lo más cortos posibles (evitar nesting) nos ayudará a que nuestros componentes no estén atados a un contexto determinado y sean independientes del HTML.

  /* Cuidado! */
  #main-header nav ul > li .nav-link:first-child { ... }  /* 0, 1, 2, 3 */

  /* Mejor */
  .MainNav-link--first { ... }  /* 0, 0, 1, 0 */
    

Sistemas de Nomenclaturas

"What we want is to be able to write code that is as transparent and self-documenting as possible. Transparency means that it is clear and obvious (to others) in its intent; self-documenting means that we don’t have to lose time to writing and reading lengthy, supplementary documentation."

Enlaces relacionados:

• “CSS For Software Engineers For CSS Developers” - Harry Roberts
• “Naming CSS Stuff Is Really Hard” - Ethan Muller
• “More Transparent UI Code with Namespaces” - Harry Roberts
• BEM Methodology
• SUIT
• “SMACSS” - Jonathan Snook

Arquitectura de carpetas

Es recomendable centralizar los estilos en un ùnico fichero (main.css, style.css) que no contenga reglas, únicamente @import a otros ficheros.

Podemos encontrar varias arquitecturas en internet pero es importante conseguir una que se adapte a las necesidades de nuestro proyecto.

La clave está en tener claro la función de cada selector que utilicemos y ubicarlo en el archivo correspondiente.

Un ejemplo:
El patrón 7-1

7 carpetas, 1 archivo:

  sass/
  |
  |– base/
  |   |– _reset.scss
  |   |– _typography.scss
  |   ...
  |
  |– components/
  |   |– _buttons.scss
  |   |– _carousel.scss
  |   |– _cover.scss
  |   |– _dropdown.scss
  |   ...
  |
  |– layout/
  |   |– _navigation.scss
  |   |– _grid.scss
  |   |– _header.scss
  |   |– _footer.scss
  |   |– _sidebar.scss
  |   |– _forms.scss
  |   ...
  |
  |– pages/
  |   |– _home.scss
  |   |– _contact.scss
  |   ...
  |
  |– themes/
  |   |– _theme.scss
  |   |– _admin.scss
  |   ...
  |
  |– utils/
  |   |– _variables.scss
  |   |– _functions.scss
  |   |– _mixins.scss
  |   |– _helpers.scss
  |
  |– vendors/
  |   |– _bootstrap.scss
  |   |– _jquery-ui.scss
  |   ...
  |
  |
  `– main.scss
    

• base/

  Es el punto de partida del proyecto (reset, tipografía, etc). Los selectores de esta carpeta tendrán una especificidad muy baja, probablemente la mayoría serán selectores de tipo.

• layout/

  Todo aquello referente al layout de nuestro sitio: grid, header, footer, sidebar, etc. Aquellos componentes que se repiten página a página.

• components/

  El core de nuestra web. Todos aquellos componentes reutilizables que utilizaremos a lo largo de nuestra web.

  @import 'utils/variables';
  @import 'utils/functions';
  @import 'utils/mixins';
  @import 'utils/placeholders';

  @import 'vendors/bootstrap';
  @import 'vendors/jquery-ui';

  @import 'base/reset';
  @import 'base/typography';

  @import 'layout/navigation';
  @import 'layout/grid';
  @import 'layout/header';
  @import 'layout/footer';
  @import 'layout/sidebar';
  @import 'layout/forms';

  @import 'components/buttons';
  @import 'components/carousel';
  @import 'components/cover';
  @import 'components/dropdown';

  @import 'pages/home';
  @import 'pages/contact';

  @import 'themes/theme';
  @import 'themes/admin';
    

Enlaces relacionados:

• “A Look at Different Sass Architectures” - Vinay Raghu