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. 3.
  2. 4.
  3. 35.

    –Phil Karlton “There are only two hard things in Computer

    Science: cache invalidation and 
 NAMING THINGS”
  4. 39.

    Improvements • Find the common elements, group them • Create

    a style for exceptions • Use descriptive, yet reusable naming
  5. 47.
  6. 48.
  7. 49.

    #00F 0 1 2 3 4 5 6 a b

    c d e f 100% 0%
  8. 50.
  9. 52.

    red

  10. 53.

    #00F 0 1 2 3 4 5 6 a b

    c d e f 100% 0%
  11. 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
  12. 65.

    Powerful mixins @mixin fontStyles($font, $size, $color) { font-family: $font; font-size:

    $size; color: $color; } … h1 { @include fontStyles($body, 1rem, black); }
  13. 68.

    What is flex? • Allows a parent container to fill

    its own space • Move items horizontally or vertically!
  14. 69.
  15. 70.

    Old way #container { width: 600px; } .sidebar { float:

    left; width: 20%; } .main { float: right; width: 80%; }
  16. 71.

    With flex #container { display: flex; } .sidebar { width:

    20%; } .main { /* width calculated automatically */ }
  17. 83.

    Var scoping Vars are global and local global :root {

    --primary-color: blue; }
 
 local .btn { --primary-color: red; }
  18. 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!
  19. 87.
  20. 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/
  21. 93.
  22. 94.