How to create a highly scalable CSS Architecture

Transcript

1. How to create a highly scalable CSS Architecture. What I get from Harry Roberts workshop, Smashing Magazine Conference in San Francisco 2016 Mateusz Mrawski
2. CSS Problems in real life
3. 3 CSS problems CSS’ fault vs. our fault •  Lack of documentation. •  Lack of structure, quality assurance. •  Lack of knowledge (about CSS or the project itself) •  Different styles, preferences, ways of working. •  Not looking to see/being aware of what exists already. •  Adding new styles to the end of stylesheets. •  The cascade and inheritance. •  Very loose. •  Highly dependent on source order. •  Specificity •  Lots of gotchas
4. 4 CSS problems Ways of ordering stylesheets? •  Mirror the web page •  Thematic chunks – typography, forms, buttons, etc. •  Just stick it on the end of the stylesheet.
5. 5 CSS problems
6. 6 CSS problems Undoing CSS: Writing more CSS in order to undo other CSS.
7. 7 CSS problems
8. 8 The Specificity Graph Problem with the order of specificity B.
9. 9 The Specificity Graph
10. 10 The Specificity Graph Example
11. 11 The Specificity Graph
12. 12 ITCSS - Inverted triangle CSS Scalable, managed architecture for CSS by Harry Roberts.
13. 13 ITCSS
14. 14 ITCSS
15. 15 ITCSS
16. 16 ITCSS
17. 17 ITCSS – in practice Example
18. Naming conventions What is BEM and why they use it
19. 19 BEM - CSS /** * The top-level ‘Block’ of a component. */ .modal {} /** * An ‘Element’ that is a part of the larger Block. */ .modal__title {} /** * A ‘Modifier’ of the Block. */ .modal--large {}
20. 20 BEM - HTML <div class="modal modal--large"> <h1 class="modal__title">Sign into your account</h1> <div class="modal__content"> <form class="form-login"> </form> </div> </div>
21. 21 BEM in SCSS /** * The top-level ‘Block’ of a component. */ .modal{ &__title{ } &__content{ } &--large{ } }
22. The Namespaces BEM & ITCSS = BEMIT D.
23. 23 The Namespaces o-; Signify that something is an Object c-; Signify that something is a Component u-; Signify that this class is a Utility class t-; Signify that a class is responsible for adding a Theme to a view s-; Signify that a class creates a new styling context or Scope is-,has-; Signify that the piece of UI in question is currently styled a certain way because of a state or condition. _; Signify that this class is a hack js-; Signify that this piece of the DOM has some behaviour acting upon it, and that JavaScript binds onto it to provide that behaviour qa-; Signify that a QA or Test Engineering team is running an automated UI test which needs to find or bind onto these parts of the DOM
24. 24 The Namespaces
25. 25 Object Namespaces: o- Format Example: .o-object-name[<element>|<modifier>] {} .o-layout {} .o-layout__item {} .o-layout--fixed {} Rules: •  Objects are abstract. •  They can be used in many places •  Avoid modifying their styles •  Be careful around anything with a leading
26. 26 Component Namespaces: c- Format Example: .c-component-name[<element>|<modifier>] {} .c-modal {} .c-modal__title {} .c-modal--gallery {} Rules: •  Components are implementation of UI •  They are quite safe to modify •  Anything with a leading c- is a specific thing
27. 27 Utility Namespaces: u- Format Example: .u-utility-name {} .u-clearfix {} Rules: •  Utilities are style heavyweights •  Alert people as to their existence •  Never reassign to anything that carries a leading u-
28. 28 Theme Namespaces: t- Format Example: .t-theme-name {} .t-light {} .tabs { background-color: gray; .t-red & { background-color: red; } .t-blue & { background-color: blue; } } SCSS format: Rules: •  Theme namespaces are very high-level •  They provide a context or scope for many other rules •  It’s useful to signal the current condition of the UI
29. 29 Scope Namespaces: s- Format Example: .s-scope-name {} .s-cms-content {} Rules: •  Scopes are pretty rare: make triple sure you need them •  They rely entirely on nesting, so make sure people are aware of this
30. 30 Stateful Namespaces: is-/has- Format Example: .[is|has]-state {} .is-open {} .has-dropdown {} Rules: •  States are very temporary •  Ensure that States are easily noticed and understood in our HTML •  Never write a bare State class.
31. 31 Hack Namespaces: _ Format Example: ._<namespace>hack-name {} ._c-footer-mobile {} Rules: •  Hacks are ugly—give them ugly classes •  Hacks should be temporary, do not reuse or bind onto their classes •  Keep an eye on the number of Hacks classes in your codebase
32. 32 JavaScript Namespaces: js- Format Example: .js-component-name {} .js-modal {} Rules: •  JavaScript and CSS are separate concerns—use separate hooks for them •  Giving different teams/roles different hooks makes for safer collaboration.
33. 33 QA Namespaces: qa- Format Example: .qa-node-name {} .qa-error-login {} Rules: •  Binding automated UI tests onto style hooks is too inexplicit—don’t do it •  Bind tests onto dedicated test classes •  Ensure that any UI refactoring doesn’t affect the QA team’s hooks
34. 34 BEMIT Example <body class="t-light"> <article class="c-modal c-modal--wide js-modal is-open”> <div class="c-modal__content"> <div class="s-cms-content"> ... </div> </div><!-- /.c-modal__content à <div class="c-modal__foot"> <p class="o-layout"> <span class="o-layout__item u-1/3"> <a href="c-btn c-btn--negative qa-modal-dismiss">Cancel</a> </span> <span class="u-hidden">or</span> <span class="o-layout__item u-2/3"> <a href="c-btn c-btn--positive qa-modal-accept">Confirm</a> </span> </p> </div><!-- /.c-modal__foot à </article><!-- /.c-modal à <footer class="c-page-foot"> <small class="c-copyright _c-copyright">...</small> </footer> </body> </html>
35. 35 Responsive Suffixes How use BEMIT for Responsive Web Design D.
36. 36 Responsive Suffixes Format Example: @<breakpoint> <div class="o-media@md c-user c-user--premium"> <img src="" alt="" class="o-media__img@md c- user__photo c-avatar”> <p class="o-media__body@md c-user__bio">...</p> </div> CSS syntax: @media print { .u-hidden\@print { display: none; } }
37. 37 Healthchecks How to debug the code C.
38. 38 Healthchecks /** * Outline all classes. */ [class] { outline: 5px solid lightgrey; } /** * Outline all BEM Elements. */ [class*="__"] { outline: 5px solid grey; } /** * Outline all BEM Modifiers. */ [class*="--"] { outline: 5px solid darkgrey; } /** * Outline all Object classes. */ [class^="o-"], [class*=" o-"] { outline: 5px solid orange; } /** * Outline all Component classes. */ [class^="c-"], [class*=" c-"] { outline: 5px solid cyan; } /** * Outline all Responsive classes. */ [class*="@"] { outline: 5px solid rosybrown; }
39. 39 Healthchecks /** * Outline all Hack classes. */ [class^="_"] { outline: 5px solid red; } .s-healthcheck { ... /** * Outline all Responsive classes. */ [class*="@"] { outline: 5px solid rosybrown; } ... }
40. 40 Questions ?
41. 41 Links •  https://github.com/csswizardry/discovr •  https://en.bem.info/ •  https://en.bem.info/platform/i-bem/ •  http://xslc.org/jquery-bem/ •  https://github.com/bem/bem-js-tutorial •  https://specificity.keegan.st/ •  http://www.sassmeister.com/ •  http://sass-mq.github.io/sass-mq/