ITCSS + BEM + Namespaces = Normandy CSS

Una proposta d'organització per mantenir una arquitectura escalable de CSS en els projectes de Calidae.

Transcript

1. Una proposta una mica sensata per mantenir una arquitectura escalable del CSS en els projectes de Calidae. CSS IS AWESOME AND BEERS
2. Les preguntes ens agraden!
3. CSS escalable? CSS fàcil d’entendre i de mantenir? CSS fàcil de revisar? CSS comú en diversos projectes? (Això existeix…?)
4. Què tenim?
7. Què tenim (realment)?
8. Cascada (La “C” de CSS) Especificitat Un sol document (DOM)
9. Com ho solucionem?
10. “Convention over configuration” O sigui: reduir el nombre de decisions que un desenvolupador ha de prendre. Arribar a acords i mantenir-los.
11. (Sass) Arquitectura ITCSS Namespaces Nomenclatura BEM Bones pràctiques
12. Introducing...
13. ITCSS Inverted Triangle CSS
14. Settings Tools Generic Base Objects Components Utilities Arquitectura ITCSS
15. Arquitectura ITCSS
16. “[ITCSS] is a fully managed CSS architecture. It’s not a framework or library; there’s nothing to download or install. It’s a collection of principles and metrics by which developers should group and order their CSS in order to keep it scalable, terse, logical, and manageable.” - Harry Roberts Arquitectura ITCSS
17. 1 - Settings Configuracions globals: colors, mides, variables... 2 - Tools Funcions i mixins globals
18. 3 - Generic 4 - Base Estils de molt baix nivell: Normalize.css, box-sizing... Estils base per elements HTML “plans” (<h1>, <img>...)
19. 5 - Objects Patrons de disseny. Dóna estructura i no estil “cosmètic”. Simples i reusables fins i tot entre projectes. Modificar els estils d’un Object és una acció perillosa.
20. Object: Media Imatge a l’esquerra, amb contingut a la dreta (Link)
21. Object: Block Imatge i continguts apilats (stacked)
22. Object: Cover Imatge com a cover del contingut
23. Object: Pack Elements horitzontals en tota l’amplada disponible
24. Settings Tools Generic Base Objects on érem…?
25. 6 - Components Implementacions concretes de la nostra UI. Reusables i flexibles. És on passarem la major part del temps escrivint CSS. Es poden modificar sense conseqüències inesperades.
26. Objects per reaprofitament Heredables pels components. Un Object està obert a extensions i tancat a modificacions. Estils per la distribució (layout). Separen l’estructura de la vista, i els contenidors del contingut. Components per concretesa Reusables i flexibles. Semàntica associada a l’apariència, no al contingut. Estils cosmètics.
27. Objects per reaprofitament display, position, float, margin, padding, alignment, width, clearfix… Components per concretesa colors, borders, font-size, font-family… (i distribució d’elements fills!)
28. 7 - Utilities Single Responsibility Principle: Amagar un element, afegir un marge, centrar un text… Immutabilitat Dissenyades per excepcions Tenen molta especificitat: !important
29. 7 - Utilities .hidden { display: none !important; } .color-primary { color: $color-primary !important; } .width-1/2 { width: 50% !important; }
30. En resum: Abast ampli Abast limitats Selectors universals Selectors específics Baixa especificitat Alta especificitat Output CSS Classes
31. La majoria d’elements de la UI estan formats d’Objects i Components <div class="media testimonial"> ... </div> <div class="media featured-tweet"> ... </div> Com sabem quina classe és un Object i quina un Component?
32. Introducing...
33. Namespaces
34. Namespaces Indicador (prefix) per saber a quina capa pertany cada classe. <div class="media testimonial"> ... </div> <div class="media featured-tweet"> ... </div>
35. Namespaces Indicador (prefix) per saber a quina capa pertany cada classe. <div class="o-media c-testimonial"> ... </div> <div class="o-media c-featured-tweet"> ... </div>
36. Namespaces .o- per Objects .c- per Components .u- per Utilities .js- per javascript hooks Les 3 últimes capes del triangle! Separation of Concerns (SoC)
37. Namespaces .o- per Objects .c- per Components .u- per Utilities .js- per javascript hooks .o-pack .c-button .u-text-right .js-featured-items
38. “Només hi ha dues coses complicades en l’enginyeria del software: la invalidació de la caché i posar nom a les coses.” Però… - Phil Karlton
39. <div class="media user premium"> <img src="" alt="" class="img photo avatar" /> <p class="body bio">...</p> </div> Exercici: esborrar totes les classes relacionades amb l’usuari per poder reaprofitar el codi.
40. Ets un exagerat i t’ho estàs fent venir bé.
41. <div class="border logged text-normal"> <span class="name">...</span> <span class="role">...</span> </div> <li class="border dropdown text-normal"> <a class="adminLink"> <span class="adminMenu">...</span> </a> </li>
42. Introducing...
43. Nomenclatura BEM Block - Element - Modifier
44. Block: L’arrel del component/object. El contenidor. Element: Un element intern del Block. Modifier: Una variant / extensió d’un Block o un Element. Nomenclatura BEM
45. Nomenclatura BEM .block__element--modifier .search-box {} .search-box__input {} .search-box--christmas {} .search-box__input--rounded {}
47. Nomenclatura BEM - Media Object .media { display: flex; align-items: flex-start; } .media .body { flex: 1; } .media .image { margin-right: 1em; } <div class="media"> <div class="image">...</div> <div class="body">...</div> </div>
48. Nomenclatura BEM - Media Object <div class="media"> <div class="media__image">...</div> <div class="media__body">...</div> </div> .media { display: flex; align-items: flex-start; } .media__body { flex: 1; } .media__image { margin-right: 1em; }
49. <div class="o-media"> <div class="o-media__image">...</div> <div class="o-media__body">...</div> </div> Nomenclatura BEM - Media Object .o-media { display: flex; align-items: flex-start; } .o-media__body { flex: 1; } .o-media__image { margin-right: 1em; }
50. Nomenclatura BEM - Media Object .o-media--large { > .o-media__image { margin-right: 2em; } } <div class="o-media o-media--large"> <div class="o-media__image">...</div> <div class="o-media__body">...</div> </div>
51. Nomenclatura BEM - Exemple // BAD .person__head__face {} .person__head__face__eye {} .person--female__head {} // GOOD .person {} .person__head {} .person__face {} .person__eye {} .person--female {} .person__eye--blue {}
52. Nomenclatura BEM - Exemple (2) // BAD .page__sub-content { } .page__footer { } .page__copyright { } // GOOD(?) .page { } .content { } .sub-content { } .footer { } .footer__copyright { } Les classes no han de reflectir l’esquelet del DOM.
53. .btn { font-size: 1.2em; } .promo .btn { font-size: 2em; } Una classe, dos outputs. No ens agrada.
54. .btn { font-size: 1.2em; } .btn--large { font-size: 2em; } Immutable Menys específic Reaprofitable Simple
55. Nomenclatura BEM - Exemple (4) .btnLogin { display: inline-block; padding: 20px; background-color: #BADA55; color: white; } Base Estructural Cosmètic
56. Nomenclatura BEM - Exemple (4) .btn { display: inline-block; } .btn--large { padding: 20px; } .btn--positive { background-color: #BADA55; color: white; } .btn--small {} .btn--disabled {} .btn--secondary {} .btn--full {} .btn--negative {} ...
57. “The most reusable components are those with class names that are independent of the content” - Nicholas Gallager
58. <div class="media user premium"> <img src="" alt="" class="img photo avatar" /> <p class="body bio">...</p> </div> Exercici: esborrar totes les classes relacionades amb l’usuari per poder reaprofitar el codi.
59. <div class="o-media c-user c-user--premium"> <img src="" alt="" class="o-media__img c-user__photo c-avatar" /> <p class="o-media__body c-user__bio">...</p> </div> Exercici: esborrar totes les classes relacionades amb l’usuari per poder reaprofitar el codi. Si hem aplicat BEM i Namespaces...
60. <div class="o-media c-user c-user--premium"> <img src="" alt="" class="o-media__img c-user__photo c-avatar" /> <p class="o-media__body c-user__bio">...</p> </div> Exercici: esborrar totes les classes relacionades amb l’usuari per poder reaprofitar el codi. 1 Object (o-media)
61. <div class="o-media c-user c-user--premium"> <img src="" alt="" class="o-media__img c-user__photo c-avatar" /> <p class="o-media__body c-user__bio">...</p> </div> Exercici: esborrar totes les classes relacionades amb l’usuari per poder reaprofitar el codi. 1 Object (o-media) 1 Component (c-avatar)
62. <div class="o-media c-user c-user--premium"> <img src="" alt="" class="o-media__img c-user__photo c-avatar" /> <p class="o-media__body c-user__bio">...</p> </div> Exercici: esborrar totes les classes relacionades amb l’usuari per poder reaprofitar el codi. 1 Object (o-media) 1 Component (c-avatar) 1 Component (c-user) 5-Objects/_objects.media.scss 6-Components/_components.avatar.scss 6-Components/_components.user.scss
63. AFONCU Y U DO DIS xque tantas clases? ¿xque? wow much block element xque no me kiere? XQ? XQ? jo posaré !important i al palco... ¿xque? bete en bici wow__such--amaze
64. “Tot això t’ho has tret de la màniga”
65. SoundCloud
66. Google Pixel
67. Trivago
68. Financial Times
69. Typeform
70. We Barcelona
71. - Google Web Developers (https://goo.gl/c7U4JM) “If you’re looking for a good way to organize your CSS, BEM is a really good starting point, both from a structure point-of-view, but also because of the simplifications of style lookup.”
72. Bones pràctiques Show CSS some love
73. Bones pràctiques 1. No utilitzar #IDs 2. Inception Rule 3. Encapsular frameworks de tercers 4. CSS linting ...
74. 1. No utilitzar #IDs ...als fulls d’estil!
75. 1. No utilitzar #IDs ...als fulls d’estil! #loginForm { al: palco; } Res supera l’especificitat d’un estil definit en un #id Impossible de reaprofitar Simplifica el codi: com si no existíssin
76. 2. Inception Rule
78. 2. Inception Rule No arribar mai als 4 nivells de profunditat ...i amb menys n’hi ha prou!!
79. Regla d’or: Sempre que declaris un estil, fes-ho amb la menor quantitat de selectors possible. body { div.wrapper { article.featured { > p:first-of-type { font-size: 1.2em; } } }
80. article#Featured { > p.introText { font-size: 1.2em; } } Regla d’or: Sempre que declaris un estil, fes-ho amb la menor quantitat de selectors possible.
81. .c-featured-news__intro { font-size: 1.2em; } Regla d’or: Sempre que declaris un estil, fes-ho amb la menor quantitat de selectors possible.
82. .block { .block--mod { .block__element { &:hover { font-size: 1.2em; } } } Regla d’or: Sempre que declaris un estil, fes-ho amb la menor quantitat de selectors possible. 4 nivells (tot i que només en compten 3)
83. xD
84. body.product .content-body-wrapper.tabs-block .switch .offer section.accommodation .content-width .accommodation .select-accommodation-box .list .map { width: 100%; height: 300px; } body.product .content-body-wrapper.tabs-block .switch .offer section.accommodation .content-width .accommodation .select-accommodation-box .list .list-content .items .accommodation-info #formAccomodation .accommodation-form .mealplan .select-price input { display: inline-block }
85. 3. Encapsular frameworks
86. 3. Encapsular frameworks <p class="o-media c-user c-user--premium [ uk-grid uk-width-1-3 ]"> Realment necessites un altre framework? <p class="uk-grid o-media c-user c-user--premium uk-width-1-1">
87. 4. (S)CSS Linting
88. Recap 1. Estructura ITCSS: 7 capes 2. Nomenclatura BEM: block__element--mod 3. Namespacing: prefix de capa 4. Bones pràctiques: IDs, linting, inception rule...
89. Sass Sass + ITCSS Sass + ITCSS + Namespaces Sass + Namespaces + ITCSS + BEM
90. Què hem aconseguit amb tot això? 1. Estructura de selectors plana (no nesting) 2. Codi organitzat (ja no escrivim estils al final) 3. Les classes fan una sola cosa, i la fan bé 4. Desacoplem per reaprofitar
91. Normandy CSS Documentació i Boilerplate Normandy Vue Implementació d’Objects en VueJS
92. ...i a partir d’aquí…? Adoptar la metodologia en nous projectes. Aplicar-ne parts a projectes existents (Capa de Settings i Tools? BEM? Bones pràctiques? Encapsular BEM - noBEM?)
93. Ampliar la guia! ...media queries? ...més Objects (Grid, Layout, Island, Bare List....)? ...més namespaces (.is-, .has-)? ...modificar/afegir regles linting? ...magic numbers? ...i a partir d’aquí…?
94. CSS IS AWESOME
95. NORMANDY IS AWESOMER
96. Thanks! Dubtes? (segur que sí!)
97. Demo time!