Este documento describe una metodología para el desarrollo de proyectos front-end a gran escala basada en los principios de modularización, encapsulamiento y reutilización de código. Se recomienda el uso de BEM para nombrar bloques, elementos y modificadores, combinado con Sass para controlar la especificidad y herencia. También sugiere extender marcos de componentes existentes para dotar a los bloques de funcionalidad común mediante el uso de @extend en Sass.

1. @rlucha
Arquitectura front-end CSS
para proyectos a gran escala

2. ¿Qué es un proyecto a gran escala?
Media o larga duración / Requisitos indefinidos / Recursos indefinidos

3. Cambiar el enfoque
Facilidad de mantenimiento
Absorber nuevos requisitos minimizando el impacto
Incorporar nuevos recursos al equipo lo más rápidamente posible

4. Modularización
Separar un gran proyecto en pequeñas partes discretas
Independencia de las partes / encapsulamiento
Reutilización de código / DRY
... similar a la programación OO

5. OOCSS
Un objeto CSS es una estructura repetitiva independiente del contexto
Principio de responsabilidad única
Principio open/closed (fácil de extender, difícil de modificar)

6. SMACSS
Módulo
Componente
Submódulo
Guía de prácticas
Jerarquía por capas
Es una metodología
Elimina la especificidad
BEM
Bloque
Elemento
Modificador

7. Colisión de especificidad
La cascada tiene muchísima potencia pero es difícil de controlar
Una colisión afecta a partes dispares del proyecto

8. Ejemplo
<div class=”contentHolder”>
<ul class=”movieList”>
<li> Item 1</li>
<li> Item 2</li>
<li class=”fav”> Item 3</li>
<li> Item 4</li>
</ul>
</div>
...
<span class=”fav”>
Añadir a favoritos
</span>
· item 1
· item 2
· item 3
· item 4
Añadir a favoritos
.contentHolder .movieList li {
font-size: 10pt;
}
.movieList .fav {
font-weight: 600;
color: #F00;
font-size: 12pt;
}
.fav {
font-size: 14pt;
color: #0F0;
text-decoration: underline;
}
Consecuencias inesperadas

9. BEM
Bloque
movieList
- --Elemento
item
Modificador
fav
<div class=”contentholder”>
<ul class=”movieList”>
<li class=”movieList-item”> Item 1</li>
<li class=”movieList-item”> Item 2</li>
<li class=”movieList-item movieList-item--fav”> Item 3</li>
<li class=”movieList-item”> Item 4</li>
</ul>
</div>
...
<span class=”fav”>
Añadir a favoritos
</span>
.movieList-item {
font-size: 10pt;
}
.movieList-item--fav {
font-weight: 600;
color: #F00;
font-size: 12pt;
}
.fav {
font-size: 14pt;
color: #0F0;
text-decoration: underline;
}

10. BEM es modular y pseudoespecífico
Creando namespaces locales por módulo/bloque solucionamos los dos
principales problemas de un proyecto a gran escala.
Identificación de las partes y control de la especificidad.

11. BEM + SASS
Podemos utilizar la sintaxis BEM con la
anidación de SASS utilizando el operador “&”
en conjunción con la directiva @at-root
· & es una referencia al contexto superior
· #{&} interpola el nombre del contexto
· @at-root crea la regla en el root del
documento compilado sin tener en cuenta el
nesting
.movieList {
@at-root #{&}-item {
font-size: 10pt;
@at-root #{&}--fav {
font-weight: 600;
color: #F00;
font-size: 12pt;
}
}
}

12. BEM + SASS
&
referencia al
contexto superior
#{&}
interpolación
a string
@at-root
añade la regla al
root sin nesting

13. Mixins
El uso de mixins abstrae la necesidad de
conocer la nomenclatura exacta en SASS
Permite a gente que no conoce SASS extender
el proyecto sin curva de aprendizaje
Reduce los errores de sintaxis
No usamos selectores CSS
@include block(movieList) {
@include element(item) {
font-size: 10pt;
@include modifier(fav) {
font-weight: 600;
color: #F00;
font-size: 12pt;
}
}
}

14. Herencia (aka Submódulos)
Al controlar con SASS cómo se interpolan
los nombres de clase podemos controlar
el contexto en el que se crean las
propiedades.
El mixin extendBlock crea la clase
.movieList--horizontal .movieList-item
y le aplica inline-block manteniendo el
resto de propiedades intactas. Con esta
sobrecarga tenemos un control total de la
especificidad.
@include block(movieList) {
@include element(item) {
font-size: 10pt;
@include modifier(fav) {
...
}
}
}
@include extendBlock(movieList,horizontal) {
@include element(item) {
display: inline-block;
}
}
.movieList--horizontal .movieList-item

15. BEM.scss
$extend: false;
$blockExtended: "";
@mixin block($name) {
@at-root .#{$name} {
@content;
}
}
@mixin modifier($name) {
@at-root #{&}--#{$name} {
@content;
}
}
@mixin element($name) {
@if $extend == true {
@at-root #{&} .#{$blockExtended}-#{$name} {
@content;
}
}
@else {
@at-root #{&}-#{$name} {
@content;
}
}
}
@mixin extendBlock($blockExtended,$name) {
$extend: true !global;
$blockExtended: $blockExtended !global;
@at-root .#{$blockExtended}--#{$name} {
@content;
}
$extend: false !global;
}

16. BEM dentro del proyecto
Un archivo scss por bloque
Un archivo template por bloque
Los bloques son específicos del proyecto
/public
/css
/scss/
/vendor
/framework
_base.scss
_variables.scss
_app.scss
/blocks
_movieList.scss
_topNavigation.scss
...
/partials/
movieList.hbs

17. Combinando FMWs
Hacer la transición de frameworks de
soluciones a frameworks de componentes.
Ofrecen componentes abstraídos de
presentación con los que podemos dotar a
nuestros bloques de funcionalidades comunes.
· inuit.css
· suit.css
/public
/css
/scss/
/vendor
/framework
_base.scss
_variables.scss
_app.scss
/blocks
_movieList.scss
_topNavigation.scss
...
/partials/
movieList.hbs

18. inuit.css
GRID responsive
Headers
Sprites
Buttons
Lists
Media Object
Pagination
...

19. Usando la directiva @extend podemos extender la funcionalidad de nuestros
bloques con las abstracciones del framework de componentes
Reutilizamos abstracciones comunes a todos los proyectos
Extendiendo el proyecto

20. @extend %placeholders
@include block(movieList) {
@extend %framework-blockList;
@include element(item) {
@extend %framework-blockList-item;
font-size: 10pt;
@include modifier(fav) {
font-weight: 600;
color: #F00;
font-size: 12pt;
}
}
}
%framework-blockList {
margin: 0;
padding: 0;
list-style: none;
}
%framework-blockList-item {
padding: $fmw-block-list-padding;
}

21. open/close por capas
Scaffolding ( normalize.css, animate.css, ... )
Theme ( pink.scss, ocean.scss, ... )
Blocks ( movieLIst.scss, mainMenu.scss, ... )
@extend
override
@import
Framework ( inuit.scss, suit.scss, ... )

22. Resumen
separar en módulos / identificarlos / encapsularlos / reutilizarlos
scaffolding / extender FMW / integrar módulos / customizar temas
Y después...

23. Testing
.movieList-item {
@extend %error;
}
.movieList .movieList-item {
@extend %success;
}
Partir de un estado de error que sólo se
resuelve si se usa en el contexto apropiado
Inyectar CSS desde el navegador con
extensiones

24. Generadores estáticos
Assemble / Jekyll / DocPad

25. En el futuro...
Preprocesadores customizables
Interpolaciones arbitrarias de selectores
Nuevas reglas y relaciones
ReWork
Shadow DOM
Directivas

26. @rlucha
¡Muchas gracias!