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
   

   View Slide

2. Hi! I’m Cecy
   Engineer at
   Thinkful
   

   View Slide

3. View Slide

4. View Slide

5. CSS in JS?
   

   View Slide

6. Tips for making
   CSS better
   

   View Slide

7. 1. Base
   Need a strong
   foundation to
   build upon
   

   View Slide

8. 2. Add
   happy trees
   Fill in more details
   

   View Slide

9. 3. The
   future
   What’s coming next
   

   View Slide

10. Let’s get started!
    

    View Slide

11. 1. Base
    Need a strong
    foundation to
    build upon
    

    View Slide

12. Address basic
    paint points
    

    View Slide

13. Pain point #1
    Targeting a
    specific element
    

    View Slide

14. CSS specificity
    

    View Slide

15. p > .class > #id
    

    View Slide

16. CSS specificity
    with Star Wars!
    https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
    

    View Slide

17. 
    https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
    

    View Slide

18. 
    https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
    

    View Slide

19. .foo
    https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
    

    View Slide

20. a.foo
    https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
    

    View Slide

21. p a .foo
    https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
    

    View Slide

22. .foo .bar
    https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
    

    View Slide

23. p .foo a .bar
    https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
    

    View Slide

24. #foo
    https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
    

    View Slide

25. a#foo
    https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
    

    View Slide

26. .foo a#bar
    https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
    

    View Slide

27. .foo .bar #baz
    https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
    

    View Slide

28. inline styles
    https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
    

    View Slide

29. !important
    https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
    

    View Slide

30. When everything is !important
    nothing is
    

    View Slide

31. More at
    Stuff & Nonsense
    https://stuffandnonsense.co.uk/archives/
    css_specificity_wars.html
    

    View Slide

32. More CSS specificity practice at:
    CSS Diner
    flukeout.github.io
    

    View Slide

33. Pain point #2
    Code is not DRY,
    hard to read
    

    View Slide

34. Bad habits
    • Bad naming conventions
    • Not coding with reusability in mind
    

    View Slide

35. –Phil Karlton
    “There are only two hard things in Computer
    Science: cache invalidation and 

    NAMING THINGS”
    

    View Slide

36. Let’s break it down
    

    View Slide

37. Let’s break it down
    .box1 .box2 .box3
    

    View Slide

38. Let’s break it down
    .yellow-box .green-box .blue-box
    

    View Slide

39. Improvements
    • Find the common elements, group them
    • Create a style for exceptions
    • Use descriptive, yet reusable naming
    

    View Slide

40. Let’s break it down
    |—— .pricing-base —-|
    .blue
    .yellow .green
    

    View Slide

41. Let’s break it down
    |—— .pricing-base —-|
    .pricing-highlight
    .micro .large
    

    View Slide

42. Further reading:

    BEM

    Block, Element, Modifier
    https://css-tricks.com/bem-101/
    

    View Slide

43. BEM alternatives
    • Pleasant BEM
    • Suit CSS
    • ABEM
    

    View Slide

44. Pain point tip #3
    Color
    

    View Slide

45. “make the button
    more blue”
    

    View Slide

46. How do hex color
    codes work?
    

    View Slide

47. #RRGGBB
    

    View Slide

48. #RGB
    

    View Slide

49. #00F
    0 1 2 3 4 5 6 a b c d e f
    100%
    0%
    

    View Slide

50. blue
    

    View Slide

51. #FF0000
    0 F
    100%
    0%
    

    View Slide

52. red
    

    View Slide

53. #00F
    0 1 2 3 4 5 6 a b c d e f
    100%
    0%
    

    View Slide

54. Pro-tip
    Type ‘color picker’
    into Google
    

    View Slide

55. 2. Add
    happy trees
    Fill in more details
    

    View Slide

56. Level up #1

    SCSS
    

    View Slide

57. SCSS optimization:
    Break up your files
    

    View Slide

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
    

    View Slide

59. Main SCSS file
    @import “modules/variables”
    @import “partials/header”
    @import “partials/sidebar”
    @import “partials/typography”
    …
    

    View Slide

60. Naming your vars!
    

    View Slide

61. Common mistake
    $red: #f4e242;
    

    View Slide

62. Better naming!
    $primary: #f4e242;
    $secondary: …;
    $tertiary: …;
    

    View Slide

63. Better naming!
    $timesNewRoman: ‘Times New Roman’;
    $body: ‘Times New Roman’;
    $headline: ‘…’;
    $subHead: ‘…’;
    

    View Slide

64. Powerful mixins!
    

    View Slide

65. Powerful mixins
    @mixin fontStyles($font, $size, $color) {
    font-family: $font;
    font-size: $size;
    color: $color;
    }
    …
    h1 {
    @include fontStyles($body, 1rem, black);
    }
    

    View Slide

66. Level up #2
    Flex
    

    View Slide

67. Flex killed the
    clearfix star
    

    View Slide

68. What is flex?
    • Allows a parent container to fill its own space
    • Move items horizontally or vertically!
    

    View Slide

69. Example
    

    View Slide

70. Old way
    #container {
    width: 600px;
    }
    .sidebar {
    float: left;
    width: 20%;
    }
    .main {
    float: right;
    width: 80%;
    }
    

    View Slide

71. With flex
    #container {
    display: flex;
    }
    .sidebar {
    width: 20%;
    }
    .main {
    /* width calculated automatically */
    }
    

    View Slide

72. Example in prod
    https://codepen.io/cecyc/pen/LXPGQL
    

    View Slide

73. More flex practice at:
    Flexbox Froggy
    https://flexboxfroggy.com
    

    View Slide

74. Level up #3
    pseudo elements
    

    View Slide

75. pseudo classes
    • :last-of-type, :last-child
    • :nth-of-type, :nth-child
    

    View Slide

76. https://codepen.io/cecyc/pen/LvvaRN
    

    View Slide

77. pseudo classes
    • :checked
    • :active
    • :hover
    • :disabled
    

    View Slide

78. pseudo classes
    • :checked
    • :active
    • :hover
    • :disabled
    

    View Slide

79. https://codepen.io/cecyc/pen/yrrwXr
    

    View Slide

80. 3. The
    future
    What’s coming next
    

    View Slide

81. Beyond #1
    CSS Vars
    

    View Slide

82. Vars in CSS!
    Define them:

    --primary-color: blue;
    

    Use them:

    color: var(--primary-color);
    

    View Slide

83. Var scoping
    Vars are global and local
    global
    :root {
    --primary-color: blue;
    }

    

    local
    .btn {
    --primary-color: red;
    }
    

    View Slide

84. Can I use?
    

    View Slide

85. Beyond #2
    CSS Grid
    

    View Slide

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!
    

    View Slide

87. Grid vs. Flex
    • Grid: Larger scale layout (page)
    • Flex: within a component (nav)
    

    View Slide

88. CSS Grid + Flex = ❤
    

    View Slide

89. Further reading:

    https://css-tricks.com/snippets/css/complete-
    guide-grid/
    https://cssgridgarden.com
    

    View Slide

90. Beyond #3
    CSS Houdini
    

    View Slide

91. “Extend CSS at
    CSS speeds”
    http://houdini.glitch.me/
    

    View Slide

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/
    

    View Slide

93. View Slide

94. View Slide

95. Further reading:

    houdini.glitch.me
    css-houdini.rocks
    github.com/GoogleChromeLabs/houdini-samples
    

    View Slide

96. We don’t make mistakes,
    just happy little accidents
    

    View Slide