Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Arquitectura frontend con BEM y SASS

3,575 views

Published on

Expongo un método para estructurar nuestros proyectos con BEM y SASS.

Published in: Design

Arquitectura frontend con BEM y SASS

  1. 1. @rlucha Arquitectura front-end CSS para proyectos a gran escala
  2. 2. ¿Qué es un proyecto a gran escala? Media o larga duración / Requisitos indefinidos / Recursos indefinidos
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 12. BEM + SASS & referencia al contexto superior #{&} interpolación a string @at-root añade la regla al root sin nesting
  13. 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. 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. 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. 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. 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. 18. inuit.css GRID responsive Headers Sprites Buttons Lists Media Object Pagination ...
  19. 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. 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. 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. 22. Resumen separar en módulos / identificarlos / encapsularlos / reutilizarlos scaffolding / extender FMW / integrar módulos / customizar temas Y después...
  23. 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. 24. Generadores estáticos Assemble / Jekyll / DocPad
  25. 25. En el futuro... Preprocesadores customizables Interpolaciones arbitrarias de selectores Nuevas reglas y relaciones ReWork Shadow DOM Directivas
  26. 26. @rlucha ¡Muchas gracias!

×