The Joy of CSS: RailsConf 2019

“I try to avoid it” or “just use !important” are things I hear developers say when it comes to CSS. Writing CSS that yields beautiful websites is an art, just as writing well-organized, reusable CSS is a science. In this talk, we’ll mix both art and science to level up your knowledge of CSS. We’ll revisit the basics to build a stronger CSS foundation. Then, we’ll step it up to SCSS, Flex, and pseudo-classes to build more advanced logic. And lastly, we’ll take a peek at what’s coming next with CSS Variables, Grid, and Houdini. By the end of the talk, you’ll be excited to work on CSS again!

Transcript

1. The Joy Cecy Correa RailsConf 2019 CSS of
2. Hi! I’m Cecy Engineer at Thinkful
5. CSS in JS?
6. Tips for making CSS better
7. 1. Base Need a strong foundation to build upon
8. 2. Add happy trees Fill in more details
9. 3. The future What’s coming next
10. Let’s get started!
11. 1. Base Need a strong foundation to build upon
12. Address basic paint points
13. Pain point #1 Targeting a specific element
14. CSS specificity
15. p > .class > #id
16. CSS specificity with Star Wars! https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
17. <p> https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
18. <a> <p> https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
19. .foo https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
20. a.foo https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
21. p a .foo https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
22. .foo .bar https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
23. p .foo a .bar https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
24. #foo https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
25. a#foo https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
26. .foo a#bar https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
27. .foo .bar #baz https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
28. inline styles https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
29. !important https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
30. When everything is !important nothing is
31. More at Stuff & Nonsense https://stuffandnonsense.co.uk/archives/ css_specificity_wars.html
32. More CSS specificity practice at: CSS Diner flukeout.github.io
33. Pain point #2 Code is not DRY, hard to read
34. Bad habits • Bad naming conventions • Not coding with reusability in mind
35. –Phil Karlton “There are only two hard things in Computer Science: cache invalidation and 
 NAMING THINGS”
36. Let’s break it down
37. Let’s break it down .box1 .box2 .box3
38. Let’s break it down .yellow-box .green-box .blue-box
39. Improvements • Find the common elements, group them • Create a style for exceptions • Use descriptive, yet reusable naming
40. Let’s break it down |—— .pricing-base —-| .blue .yellow .green
41. Let’s break it down |—— .pricing-base —-| .pricing-highlight .micro .large
42. Further reading:
 BEM
 Block, Element, Modifier https://css-tricks.com/bem-101/
43. BEM alternatives • Pleasant BEM • Suit CSS • ABEM
44. Pain point tip #3 Color
45. “make the button more blue”
46. How do hex color codes work?
47. #RRGGBB
48. #RGB
49. #00F 0 1 2 3 4 5 6 a b c d e f 100% 0%
50. blue
51. #FF0000 0 F 100% 0%
52. red
53. #00F 0 1 2 3 4 5 6 a b c d e f 100% 0%
54. Pro-tip Type ‘color picker’ into Google
55. 2. Add happy trees Fill in more details
56. Level up #1
 SCSS
57. SCSS optimization: Break up your files
58. SCSS file structure • MODULES • Vars, Mixins • PARTIALS • header, sidebar, footer • breakdown further: typography • VENDOR • 3rd party code http://thesassway.com/beginner/how-to-structure-a-sass-project
59. Main SCSS file @import “modules/variables” @import “partials/header” @import “partials/sidebar” @import “partials/typography” …
60. Naming your vars!
61. Common mistake $red: #f4e242;
62. Better naming! $primary: #f4e242; $secondary: …; $tertiary: …;
63. Better naming! $timesNewRoman: ‘Times New Roman’; $body: ‘Times New Roman’; $headline: ‘…’; $subHead: ‘…’;
64. Powerful mixins!
65. Powerful mixins @mixin fontStyles($font, $size, $color) { font-family: $font; font-size: $size; color: $color; } … h1 { @include fontStyles($body, 1rem, black); }
66. Level up #2 Flex
67. Flex killed the clearfix star
68. What is flex? • Allows a parent container to fill its own space • Move items horizontally or vertically!
69. Example
70. Old way #container { width: 600px; } .sidebar { float: left; width: 20%; } .main { float: right; width: 80%; }
71. With flex #container { display: flex; } .sidebar { width: 20%; } .main { /* width calculated automatically */ }
72. Example in prod https://codepen.io/cecyc/pen/LXPGQL
73. More flex practice at: Flexbox Froggy https://flexboxfroggy.com
74. Level up #3 pseudo elements
75. pseudo classes • :last-of-type, :last-child • :nth-of-type, :nth-child
76. https://codepen.io/cecyc/pen/LvvaRN
77. pseudo classes • :checked • :active • :hover • :disabled
78. pseudo classes • :checked • :active • :hover • :disabled
79. https://codepen.io/cecyc/pen/yrrwXr
80. 3. The future What’s coming next
81. Beyond #1 CSS Vars
82. Vars in CSS! Define them:
 --primary-color: blue; 
 Use them:
 color: var(--primary-color);
83. Var scoping Vars are global and local global :root { --primary-color: blue; }
 
 local .btn { --primary-color: red; }
84. Can I use?
85. Beyond #2 CSS Grid
86. CSS Grid • Tables, divs, floats are the old way • Flex is 1-dimensional (meant for smaller things) • Grid is 2-dimensional! Specifically made for layout!
87. Grid vs. Flex • Grid: Larger scale layout (page) • Flex: within a component (nav)
88. CSS Grid + Flex = ❤
89. Further reading:
 https://css-tricks.com/snippets/css/complete- guide-grid/ https://cssgridgarden.com
90. Beyond #3 CSS Houdini
91. “Extend CSS at CSS speeds” http://houdini.glitch.me/
92. “Much like Service Workers are a low-level JavaScript API for the browser's cache, Houdini introduces low-level JavaScript APIs for the browser's render engines” http://houdini.glitch.me/
95. Further reading:
 houdini.glitch.me css-houdini.rocks github.com/GoogleChromeLabs/houdini-samples
96. We don’t make mistakes, just happy little accidents