The Joy of CSS: RailsConf 2019

045d790f605ea8d482380c5075d802d5?s=47 Cecy C.
April 30, 2019

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!

045d790f605ea8d482380c5075d802d5?s=128

Cecy C.

April 30, 2019
Tweet

Transcript

  1. The Joy Cecy Correa RailsConf 2019 CSS of

  2. Hi! I’m Cecy Engineer at Thinkful

  3. None
  4. None
  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/
  93. None
  94. None
  95. Further reading:
 houdini.glitch.me css-houdini.rocks github.com/GoogleChromeLabs/houdini-samples

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