Modular Future of CSS

Originally presented in Meta Refresh 2016, India.

Links:

- RSCSS: http://rscss.io
- BEM: http://bem.info
- SMACSS: https://smacss.com
- OOCSS: http://www.slideshare.net/stubbornella/object-oriented-css

Transcript

1. The modular future of CSS @rstacruz Rico Sta. Cruz ricostacruz.com Subtitle here Title goes here ACTION 2 ACTION 1 ACTION Single-line snackbar 60 Groceries: almond milk coconut water cucumber Campbell Groceries: almond milk coconut water cucumber Trevor Hansen Arial Courier Calibri Arial Verdana Courier Calibri Arial 1 4:15 One Day DISABLED DISABLED Subtitle here Title goes here ACTION 2 ACTION 1 ACTION Single-line snackbar 60 Campbell Groceries: almond milk coconut water cucumber Campbell Groceries: almond milk coconut water cucumber Trevor Hansen Arial Verdana Courier Calibri Arial Verdana Courier Calibri Arial 1 4:15 One Day DISABLED DISABLED
2. “ The world writes a lot of front-end code.
3. The Tragedy of Hamlet, Prince of Denmark William Shakespeare c. 1599–1602 Shakespeare's Hamlet took up to 3 years to write.
4. Word count: 34 thousand words (including footnotes, copyright info, etc) Shakespeare wrote a lot of text for Hamlet.
5. So that's the case for William Shakespeare.
6. What about your average Front-end developer?
7. Show everything from $NAME in this folder filter it by lines added count the number of words git log --author=$NAME -c \ -- app/assets/stylesheets/ \ | grep -E '^\+ ' \ | wc -w Let's inspect how one of my coworkers wrote CSS code.
8. git log ... | grep | wc -w 43671= 1.25 Hamlets One coworker wrote 1.25 Hamlets worth of CSS.
9. WordPress 4.6.1 Significant line of code count More than half our code bases is front-end code. PHP 165k lines CSS 76k JS 50k
10. Pinterest.com: 1.6MB of CSS. That's 47k lines of CSS code, 148k words of CSS. That's around 4.3 Hamlets of CSS code.
11. One Hamlet is roughly equivalent of 10k lines of CSS code, which, in my experience, is the point when CSS gets really complicated. Assuming around 3.2 words per line.
12. The world writes, and needs, a lot of front-end code. “
13. Just as much as back-end code, in fact. “
14. Why isn't writing CSS as well thought-out as programming? “
15. Why do we seem to lack standards in front-end coding? “
16. Nah, we don't. Don't worry. ”
17. @rstacruz Rico Sta. Cruz
18. @rstacruz The modular future of CSS Rico Sta. Cruz ricostacruz.com on
19. Before we talk about the future, let's visit the past. The evolution of modern CSS
20. 1 9 9 0 –2 0 0 0
21. A long, long time ago...
22. In a galaxy far away...
23. HTML was written very differently. <table cellpadding=0 cellspacing=0> <tr> <td width="100%" valign="top"> <img src="spacer.gif">
24. apple.com, circa 2004. Notice the tables.
25. One of the first books that talked about CSS positioning. <font face="Arial" color="#338899"> <b>Zen Garden</b> </font>
26. 2 0 0 3
27. Eventually people thought differently. Couldn't we use CSS to separate content from style? “
28. People started separating content from style. <font face="Arial" color="#338899"> <b>Zen Garden</b> </font>
29. People started separating content from style. CO N TE NT <h1>Zen Garden</h1> h1 { font-weight: bold; color: #338899; font-face: Arial, sans-serif; } ST Y LE <font face="Arial" color="#338899"> <b>Zen Garden</b> </font>
30. This used to be called "CSS Positioning." Nowadays it's just "CSS." "CSS positioning" {
31. CSS tricks started to appear. B EF ORE <img src="spacer.gif" width="8" height="1"> div { margin-left: 8px; } A FT E R
32. CSS tricks started to appear. B EF ORE <tr> <td>...</td> <td>...</td> </tr> .container { overflow: hidden; } .box { float: left; } A FT E R
33. One of the first books that talked about CSS positioning. Designing with Web Standards 2003
34. We were moving towards separating concerns. .html .css .js Content Style Behavior
35. Take this component, for example. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU
36. We started using classes to describe content based on what they were. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU <div class='image'> <div class='heading'> <div class='description'> <div class='actions'>
37. We used the correct HTML tags based on content, too. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU <div class='heading'> <h2 class='title'> <p class='author'>
38. This led to a movement of making your markup "semantic." "Semantic HTML" <>
39. This led to a movement of making your markup "semantic." One problem— no one knew how to properly write CSS for Semantic HTML. <>
40. No one knew how to write CSS for it, though. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { }
41. We took advantage of Sass, Less, and other preprocessors. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { height: 240px; background: $green; } }
42. You can nest indefinitely. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ... } .text { padding: 16px; } }
43. No one warned us about nesting too much, though. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ... } .text { padding: 16px; .heading { font-size: 2em; } } }
44. With more complicated things like media queries... UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ... } .text { padding: 16px; .heading { font-size: 2em; @media (min-width: 768px) { font-size: 3em; } } } }
45. CSS became more and more of a nightmare. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ... } .text { padding: 16px; .heading { font-size: 2em; @media (min-width: 768px) { font-size: 3em; } } .subheading { font-size: .9em; } } }
46. Too much nesting can kill your brain. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ... } .text { padding: 16px; .heading { font-size: 2em; @media (min-width: 768px) { font-size: 3em; } } .subheading { font-size: .9em; @media (min-width: 768px) { font-size: .95em; } } } }
47. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU Before you know it, you've written a Hamlet of CSS code. .photo-card { .image { ... } .text { padding: 16px; .heading { font-size: 2em; @media (min-width: 768px) { font-size: 3em; } } .subheading { font-size: .9em; @media (min-width: 768px) { font-size: .95em; } } } } Too many lines, too much CSS.
48. CSS is so complicated. “
49. What have we learned so far: ✓ Separate content and style. 2003 ✗ Writing CSS properly is hard. 2003
50. 2 0 0 9
51. Eventually people thought differently. Can we apply lessons we've learned in programming to CSS? “
52. We started using classes to describe content based on what they were. Button Save Delete More info
53. This was very similar to some OOP patterns that have been in use in programming. class Button { ... } class SaveButton extends Button { ... } class DeleteButton extends Button { ... } "Object-oriented Programming"
54. How about we apply the same ideas to CSS? Button Save Delete More info class="button" class="button button-delete" class="button button-save" class="button button-info" PA RE N T SUB - CL AS S
55. One of the first books that talked about CSS positioning. OOCSS: Object Oriented CSS Nicole Sullivan 2009
56. OOCSS tells us to build components like Lego's. Button Text box Campbell Groceries: almond milk coconut water cucumber Abcdefghijklmno Third Second First "Lego's first"
57. OOCSS tells us to build components like Lego's. Button Text box Campbell Groceries: almond milk coconut water cucumber Abcdefghijklmno Third Second First "Components are like legos"
58. What have we learned so far: ✓ Separate content and style. 2003 ✓ Create a component library. 2009 ✗ Writing CSS properly is still hard. 2009
59. 2 0 1 2
60. checkin-form invoice-heading invoice-table book-button Everything is a component in a component in a component. listing-page listing-actions
61. "Sub-classing" is still a thing, though no one seems to call it that. Button Save Delete More info CO M PO NENT STAT ES
62. One of the first books that talked about CSS positioning. SMACSS: Scalable and Modular Architecture for CSS 2012
63. Modules was a way to think of your UI in pieces. "Modules" listing-actions
64. Modules can have states. "States" Save Delete More info
65. Modules can have states. "Layers" Base Layouts Modules States button { font-family: sans-serif; } .button-group > button { margin: 0 5px; } .button { ... } .button.delete { background: $red; }
66. What have we learned so far: ✓ Separate content and style. 2003 ✓ Create a component library. 2011 ✓ Everything is a component. 2012 ✗ Writing CSS properly is still hard. 2012
67. 2 0 1 3
68. We started turning them into actual conventions. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU <div class='photo-card__image'> <div class='photo-card__heading'> <div class='photo-card__description'> <div class='photo-card__actions'> <div class='photo_card'>
69. Class names are based on block, element and modifiers. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU Block Element .photo-card .photo-card__photo .photo-card__heading .photo-card__subheading .photo-card__description .photo-card__description_long .photo-card__description_short .photo-card__action Modifier
70. BEM was started as a convention for these classnames. BEM: Block, Element, Modifier 2013
71. BEM offers a simple naming convention for CSS classes. .block-name__element-name_modifier "Block, Element, Modifier"
72. checkin-form invoice-heading invoice-table book-button A "block" is still a component, same as before. listing-page listing-actions
73. Sass's ampersands made it easy to write BEM. & Sass ampersand operator
74. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { &__image { ... } &__heading { ... }
 &__description { ... } &__actions { ... } } BEM with Sass made CSS very fun to write. BEM wi t h SAS S
75. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card__image { ... } .photo-card__heading { ... }
 .photo-card__description { ... } .photo-card__actions { ... } The ampersand operator removes redundancies. O U T PU T
76. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { &__image { ... } &__heading { ... }
 &__description { ... } &__actions { ... } } The ampersand operator removes redundancies. BEM wi t h SAS S
77. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU <div class='photo-card'> <div class='photo-card__photo'> <img src='foo.jpg' class='photo-card__image'> </div> <div class='photo-card__text'> <h2 class='photo-card__heading'>...</h2> <p class='photo-card__subheading'>...</p> </div> <div class='photo-card__description'> <p>...</p> </div> <div class='photo-card__actions'> <a class='photo-card__button'></a> </div> </div> HTML was painfully dirty, though.
78. What have we learned so far: ✓ Separate content and style. 2003 ✓ Create a component library. 2011 ✓ Everything is a component. 2012 ✓ CSS conventions are extremely useful. 2013 ✗ Writing CSS and markup properly is hard. 2013
79. 2 0 1 4
80. Frontend JavaScript was just about taking an interesting turn. React.js: JavaScript library for building user interfaces 2014
81. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU var PhotoCard = React.createClass({ render () { return <div> <PhotoImage /> <PhotoHeading /> <PhotoDescription /> <PhotoActions /> </div> } }) React let you write things in nested components. RE ACT. js
82. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU Vue.component('PhotoCard', { el: '#card-template' }) <script id='card-template'> <div> <PhotoImage /> <PhotoHeading /> <PhotoDescription /> <PhotoActions /> </div> </script> So did Vue.js. VU E .j s
83. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU <div> {{photo-image}} {{photo-heading}} {{photo-description}} {{photo-actions}} </div> So did Ember.js. EM BE R .j s
84. Everything is a component in the new world. { JavaScript components
85. What have we learned so far: ✓ Separate content and style. 2003 ✓ Create a component library. 2011 ✓ Everything is a still component. 2012, 2014 ✓ CSS conventions are extremely useful. 2013 ✗ Writing CSS and markup properly is hard. 2014
86. 2 0 1 5
87. Atomic Design is about thinking about your UI in pieces.
88. Atomic Design is about thinking about your UI in pieces.
89. Atomic Design is about thinking about your UI in pieces.
90. Atomic Design is about thinking about your UI in pieces.
91. Atomic Design is about thinking about your UI in pieces.
92. In fact, Atomic Design tells us about this design ideology. Atomic Design 2015
94. All these ideas build on top of one another.
95. One theme persists in all these ideas:
96. Everything is a component. Subtitle here Title goes here ACTION 2 ACTION 1 Subtitle here Title goes here ACTION 2 ACTION 1 ACTION Single-line snackbar 60 ACTION Single-line snackbar 60 Campbell Groceries: almond milk coconut water cucumber Campbell Groceries: almond milk coconut water cucumber Trevor Hansen Verdana Courier Calibri Arial Verdana Courier Calibri Arial Verdana Courier Calibri Arial 1 4:15 One Day 1 4:15 One Day 1 4:15 One Day DISABLED DISABLED Subtitle here Title goes here ACTION 2 ACTION 1 Subtitle here Title goes here ACTION 2 ACTION 1 ACTION Single-line snackbar 60 Campbell Groceries: almond milk coconut water cucumber Campbell Groceries: almond milk coconut water cucumber Trevor Hansen Verdana Courier Calibri Arial Verdana Courier Calibri Arial Verdana Courier Calibri Arial 1 4:15 One Day 1 4:15 One Day 1 4:15 One Day DISABLED DISABLED Subtitle here Title goes here ACTION 2 ACTION 1 Single-line snackba 60 Groceries: almond m coconut w
97. What's next?
98. What have we learned so far: ✓ Separate content and style. 2003
 ✓ Create a component library. 2011
 ✓ Everything is a component. 2012 ✓ CSS conventions are extremely useful. 2013 ✗ Writing CSS and markup properly is hard.
99. Shakespeare's Hamlet took up to 3 years to write. RSCSS: Reasonable System for CSS Stylesheet Structure 2015 http://rscss.io
100. Just like with all other CSS systems. Everything is made with components.
101. Remember this example component? UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU
102. RSCSS class names are still "semantic" style. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU <div class='image'>...</div> <div class='heading'>...</div> <div class='description'>...</div> <div class='actions'>...</div> <div class='photo-card'> </div>
103. The CSS structure mirrors the HTML structure. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU <div class='image'> <div class='heading'> <div class='description'> <div class='actions'> <div class='photo-card'> </div> > .image { ... } > .heading { ... } > .description { ... } > .actions { ... } .photo-card { }
104. <div class='image'> <div class='heading'> <div class='description'> <div class='actions'> <div class='photo-card'> </div> The secret is in the direct child selector (>). UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { > .image { ... } > .actions > .button { ... } } RS CSS w it h SAS S
105. These words are separated with a hyphen. .two-words Components are always two or more words. Rule No. 1—
106. If it needs to be more than one word, don't use underscores or hyphens. .button Elements are always one word. Rule No. 2—
107. This differentiates it from components and elements. .-small Variants begin with a hyphen. Rule No. 3—
108. This is a good idea, let me explain later. > Use the child descendant selector. Rule No. 4—
109. .photo-card Components .image > .-large Elements Variants This way, we remove ambiguity on the meaning of class names. .search-box .field > .-selected .audio-controls .button > .-play
110. Here's a simple component. .button-box { ... }
111. We'll probably write it with a variant. .button-box { &.-small { ... } }
112. That component is part of a bigger component. <div class="callout-box"> <div class="image"> <div class="text"> <h2 class="heading">...</h2> <div class="button-box">
113. That component has more elements. <div class="callout-box"> <div class="image"> <div class="text"> <h2 class="heading">...</h2> <div class="button-box">
114. The CSS mirrors the HTML structure. .callout-box { > .image { ... } > .text { ... } > .text > .heading { ... } }
115. Organize your components per file. .callout-box { > .image { ... } > .text { ... } > .text > .heading { ... } } callout-box.scss • • • One component per CSS file. Rule No. 5—
116. .callout-box { > .image { ... } > .text { ... } > .text > .heading { ... } } callout-box.scss • • • This makes it easy to include them all. One component per CSS file. Rule No. 5— @import 'components/*'; application.scss • • •
117. Let's look at an example of how we would write RSCSS.
118. .nav-bar Component
119. .nav-bar .logo Nested components
120. .nav-bar .logo .search-bar Nested components
121. .nav-bar .logo .search-bar .nav-links Nested components
122. .nav-bar .logo .search-bar .nav-links .user-links Nested components
123. .project-header
124. .project-nav
125. .project-nav > .tab Elements
126. .project-nav > .tab.-active Variants
127. .project-overview
128. .project-toolbar .left .right Layouts
129. .button-group Layouts
130. rscss.io
131. Everything is a component. “ That's our most important lesson from all these ideas.
132. Where do we go from here?
133. One of the first books that talked about CSS positioning. Web Components and Shadow DOM w3.org www.w3.org/wiki/WebComponents/
134. <div class="warning"> <style> h3 { color: red !important; } </style> <h3>Warning!</h3> <p>Don't try this at home.</p> </div> <link rel="import" href="warning.html"> People started separating content from style. warning.html index.html
135. There's a proposal to make CSS components easier. CSS @scope Proposal w3.org www.w3.org/TR/css-scoping-1/
136. @scope .user-profile { ... } CSS scoping lets you write CSS without components bleeding into other components.
137. Always think in components. @rstacruz Rico Sta. Cruz ricostacruz.com Subtitle here Title goes here ACTION 2 ACTION 1 ACTION Single-line snackbar 60 Groceries: almond milk coconut water cucumber Campbell Groceries: almond milk coconut water cucumber Trevor Hansen Arial Courier Calibri Arial Verdana Courier Calibri Arial 1 4:15 One Day DISABLED DISABLED Subtitle here Title goes here ACTION 2 ACTION 1 ACTION Single-line snackbar 60 Campbell Groceries: almond milk coconut water cucumber Campbell Groceries: almond milk coconut water cucumber Trevor Hansen Arial Verdana Courier Calibri Arial Verdana Courier Calibri Arial 1 4:15 One Day DISABLED DISABLED