RSCSS: Writing CSS without losing your sanity

First presented at MelbCSS Nov 2015.

Transcript

1. CSS is complicated. MYTH:
2. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU Modern CSS makes it easy to style components, such as this one. However, not everyone writes CSS the same way. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIU UIUNUN INU UIN
3. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to write classes and nest them properly. article
4. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to write classes and nest them properly. article div.image
5. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to write classes and nest them properly. article div.heading div.image
6. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to write classes and nest them properly. article div.heading div.description div.image
7. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to write classes and nest them properly. article div.heading div.description div.actions div.image
8. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to write classes and nest them properly. article div.heading div.description div.actions div.image img
9. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to write classes and nest them properly. article div.heading div.description div.actions div.image img h2.title h2.description
10. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to write classes and nest them properly. article div.heading div.description div.actions div.image img h2.title h2.description p
11. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU HTML makes it intuitive to write classes and nest them properly. article div.heading div.description div.actions div.image img h2.title h2.description p a.button
12. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU article div.image img div.heading h2.title h2.description div.description p div.actions a.button "Semantic"
13. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { }
14. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ... } }
15. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ... } .text { padding: 24px; } }
16. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ... } .text { padding: 24px; .heading { font-size: 2em; } } }
17. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ... } .text { padding: 24px; .heading { font-size: 2em; @media (min-width: 768px) { font-size: 3em; } } } }
18. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .image { ... } .text { padding: 24px; .heading { font-size: 2em; @media (min-width: 768px) { font-size: 3em; } } .subheading { font-size: 2em; @media (min-width: 768px) { font-size: 3em; } } } }
19. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU article div.image img div.heading h2.title h2.description div.description p div.actions a.button "Semantic" The naïve approach
20. This approach makes you prone to have very complicated CSS.
21. CSS feels complicated. REALLY:
22. It doesn't have to. TRUTH:
23. @rstacruz Rico Sta. Cruz
24. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { .photo { img { ... } } .text { .heading { .title { ... } .subtitle { ... } } .description { p { ... } } .action { .btn { ... } } } } Over-nesting is a common problem with this approach, though. CSS becomes hard to read.
25. Block-element-modifier http://bem.info
26. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU BEM Makes this a little easier. .photo_card .photo_card--photo .photo_card--heading .photo_card--subheading .photo_card--description .photo_card--action
27. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU BEM Makes this a little easier. Block Element .photo_card .photo_card--photo .photo_card--heading .photo_card--subheading .photo_card--description .photo_card--action
28. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo_card { &--photo { ... } &--heading { ... } &--subheading { ... } &--description { ... } &--action { ... } } BEM Makes this a little easier.
29. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU It comes at the price of dirtier markup. <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> UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIU UIUNUN INU UIN
30. Bootstrap http://getbootstrap.com Bootstrap
31. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU Bootstrap has its own convention in class names. .panel .panel-head .panel-body .btn .btn-primary .btn-small UIIUIUIN UIIUNIUN UIUNUN INU UINUIU UIIUIUIN UIIU UIUNUN INU UIN
32. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card-image .photo-card-title .photo-card-subtitle .photo-card-description .photo-card-action Bootstrap would probably suggest something like this.
33. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU Bootstrap's approach is almost equivalent to BEM, anyway. .photo-card .photo-card-photo .photo-card-heading .photo-card-subheading .photo-card-description .photo-card-action
34. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU Bootstrap's approach is almost equivalent to BEM, anyway. Block Element .photo-card .photo-card-photo .photo-card-heading .photo-card-subheading .photo-card-description .photo-card-action
35. Naïve BEM Cleanliness (or Bootstrap)
36. Naïve BEM Cleanliness CSS cleanliness (or Bootstrap)
37. Naïve BEM Cleanliness Markup cleanliness CSS cleanliness (or Bootstrap)
38. Naïve BEM Cleanliness Markup cleanliness CSS cleanliness ?
39. What if... there is a way to make a compromise between both?
40. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card What if... there's a way to keep this semantic structure, yet have clean CSS?
41. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .image What if... there's a way to keep this semantic structure, yet have clean CSS?
42. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .heading .image What if... there's a way to keep this semantic structure, yet have clean CSS?
43. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .heading .description .image What if... there's a way to keep this semantic structure, yet have clean CSS?
44. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .heading .description .actions .image What if... there's a way to keep this semantic structure, yet have clean CSS?
45. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .heading .description .actions .image .title .description What if... there's a way to keep this semantic structure, yet have clean CSS?
46. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .heading .description .actions .image .title .description .button What if... there's a way to keep this semantic structure, yet have clean CSS?
47. rscss Reasonable System for CSS Stylesheet Structure http://rscss.io
48. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .photo-card > .image { ... }
49. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .photo-card > .heading { ... }
50. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .photo-card > .description { ... }
51. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card .photo-card > .actions { ... }
52. UIIUIUIN UIIUNIUN UIUNUN INU UINUIU .photo-card { > .image { ... } > .heading { ... } > .action { ... } > .action > .btn { ... } }
53. Always think in components.
54. .photo-card .search-field .buy-box Components are named with two (or more) words with a dash. Components
55. Components are made of elements.
56. .field .action .info Are always one word— no dashes. Elements
57. They can have variants.
58. .-compact .-large .-primary Variants start with a dash. Variants .photo-card .search-field .buy-box
59. Place one component per file.
60. .photo-card { ... ... } components/photo-card.scss
61. @import 'components/*'
62. @rstacruz Rico Sta. Cruz rscss.io