A quick guide for writing MAINTAINABLE and SCALABLE CSS

Presented @ Codemotion Madrid 2016

Transcript

1. A QUICK GUIDE FOR WRITING MAINTAINABLE AND SCALABLE CSS
2. Sergio Álvarez · @sergioalvz_ Software Engineer Breakfast-Driven Development practitioner #CleanCode #MaintainableCode #CodeForHumans
4. Asturias Hacking
5. What’s MAINTAINABLE CSS?
6. What’s SCALABLE CSS?
7. Any fool can write code that a computer can understand. Good programmers write code that humans can understand. — MARTIN FOWLER
8. WHAT’S THE PROBLEM WITH CSS?
9. It’s global by default
10. It’s easy to learn, but hard to master
11. It’s browser dependent
12. It has a complex specificity system
13. HOW DOES SPECIFICITY WORK?
14. button#submit { background-color: red; } button[id="submit"] { background-color: blue; } What background-color is finally applied to button?
15. button#submit { background-color: red; } button[id="submit"] { background-color: blue; } What background-color is finally applied to button?
17. 1 #ID 2 Classes & Attributes 3 Elements
18. 1 #ID 2 Classes & Attributes 3 Elements
19. STRATEGIES FOR DEALING WITH SPECIFICITY
20. Avoid #selectors. Use nesting wisely. Don’t over qualify.
21. .nav { /* ... */ } .nav li { /* ... */ } .nav ul { /* ... */ } .nav li ul { /* ... */ } .nav > li { /* ... */ } .nav ul li { /* ... */ } Item 1 Item 2 Item 3 Sub Item 1.1 Sub Item 1.2 Sub Item 1.3
22. .nav { /* ... */ } .nav-item { /* ... */ } .nav-submenu { /* ... */ } .nav-submenu-item { /* ... */ } Item 1 Item 2 Item 3 Sub Item 1.1 Sub Item 1.2 Sub Item 1.3
23. WRITING MODULAR CSS
24. Components are bits of User Interface
25. Encapsulation. Composition. Documentation.
26. OOCSS. SMACSS. BEM. ITCSS.
27. OOCSS. SMACSS. BEM. ITCSS.
28. It’s a full-featured framework for front-end development powered by Yandex
29. We’ll only talk about its naming conventions
30. Feo. Fuerte. Formal.
31. Block Element Modifier
32. Block .dropdown { /* ... */ } Edit Remove Update
33. Element .dropdown__item { /* ... */ } .dropdown__icon { /* ... */ } .dropdown__text { /* ... */ } Edit Remove Update
34. Modifier .dropdown__item--is-selected { /* ... */ } .dropdown__item--is-disabled { /* ... */ } .dropdown__item--has-only-text { /* ... */ } Edit Remove Update
35. Edit Remove Update .dropdown { /* ... */ } .dropdown__item { /* ... */ } .dropdown__item--is-selected { /* ... */ } .dropdown__item--has-only-text { /* ... */ } .dropdown__text { /* ... */ }
36. Edit Remove Update <div class="dropdown"> <div> <div class="dropdown__item dropdown__item--has-only-text dropdown__item--is-selected"> <span class="dropdown__text"> Update </span> </div> <div class="dropdown__item dropdown__item--has-only-text"> <span class="dropdown__text"> Edit </span> </div> <div class="dropdown__item dropdown__item--has-only-text"> <span class="dropdown__text"> Remove </span> </div> </div> </div>
37. Edit Remove Update <ul class="dropdown"> <li class="dropdown__item dropdown__item--has-only-text dropdown__item--is-selected"> <p class="dropdown__text"> Update </p> </li> <li class="dropdown__item dropdown__item--has-only-text"> <p class="dropdown__text"> Edit </p> </li> <li class="dropdown__item dropdown__item--has-only-text"> <p class="dropdown__text"> Remove </p> </li> </ul>
38. ├── base │ ├── font.css │ └── reset.css ├── components │ ├── avatar.css │ ├── button.css │ └── dropdown.css ├── modules │ ├── home.css │ └── sidebar.css ├── utilities │ ├── mixins │ └── variables.css ├── vendor │ ├── bootstrap.css │ └── datepicker.css └── main.css Best project organization
39. BEM… improves semantics. avoids inheritance. reduces specificity.
40. Prefer duplication over the wrong abstraction — SANDI METZ
41. DECOUPLING CSS FROM EVERYTHING
42. BEM has already decoupled our CSS from HTML
43. What about JavaScript?
44. <button class="button button--is-secondary"> Cancel </button> document.querySelector( '.button--is-secondary' );
45. <button class=" js-button button button--is-secondary"> Cancel </button> document.querySelector( ' .js-button ' ); JavaScript hooks!
46. CUSTOM PROPERTIES THE CSS BUILT-IN VARIABLES
48. .button { font-size: 16px; } .page__text { font-size: 16px; } .dropdown__item { font-size: 16px; }
49. :root { --base-font-size: 16px; } .button { font-size: var(--base-font-size); } .page__text { font-size: var(--base-font-size); } .dropdown__item { font-size: var(--base-font-size); }
50. .button { background-color: #fc3952; } .dropdown__item--is-selected { background-color: #fc3952; } .link { color: #fc3952; }
51. :root { --primary-color: #fc3952; } .button { background-color: var(--primary-color); } .dropdown__item--is-selected { background-color: var(--primary-color); } .link { color: var(--primary-color); }
52. :root { --primary-color: #fc3952; } .button { background-color: var(--primary-color); } .dropdown__item--is-selected { background-color: var(--primary-color); } .link { color: var(--primary-color); } This can be dynamically updated!
53. FLEXBOX A NEW LAYOUT MODEL
55. Declarative. Dynamic. Direction-agnostic.
56. Vertical centering. Sticky footer. Full-height columns. Holy Grail layout.
57. .box { align-items: center; display: flex; } .box
58. .page { display: flex; flex-direction: column; min-height: 100vh; } .header { height: 4vh; } .content { flex-grow: 1; } .footer { height: 10vh; } .page .header .content .footer
59. .page .column .column .column .page { display: flex; min-height: 100vh; } .column { flex-basis: 33%; }
60. THE FUTURE CODEMOTION 2017
61. Web Components. CSS Modules. Grid Layout.
62. RESOURCES
63. CSS Specificity: Things you should know (Smashing Magazine) · http://bit.ly/2fQpC2R Hacks for dealing with specificity (Harry Roberts) · http:// bit.ly/2fqUOVy MindBEMding – getting your head ’round BEM syntax (Harry Roberts) · http://bit.ly/2foR5W4 Code smells in CSS (Harry Roberts) · http://bit.ly/2fQnc41
64. Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them (Smashing Magazine) · http:// bit.ly/2fuvjPH CSS at BBC Sport (Part 1) · http://bit.ly/2eLDHuc CSS for Software Engineers for CSS Developers (Harry Roberts) · http://bit.ly/2fI4g8l MaintainableCSS (Adam Silver) · http://bit.ly/2fsrdcw
65. CSS Flexbox Toolbox - Learning Guides, Tools & Frameworks (speckyboy) · http://bit.ly/2fr1Gm5 @LeaVerou · http://bit.ly/2ecWx0X @SaraSoueidan · http://bit.ly/2fqZIBT @csswizardry · http://bit.ly/2f6Mvxx
66. ¡GRACIAS! @sergioalvz_ Saturday, November 19th Codemotion Madrid 2016