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)
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
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
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
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