Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Joy of CSS: RailsConf 2019

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!

Cecy C.

April 30, 2019
Tweet

More Decks by Cecy C.

Other Decks in Technology

Transcript

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

    Science: cache invalidation and 
 NAMING THINGS”
  2. Improvements • Find the common elements, group them • Create

    a style for exceptions • Use descriptive, yet reusable naming
  3. #00F 0 1 2 3 4 5 6 a b

    c d e f 100% 0%
  4. red

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

    c d e f 100% 0%
  6. 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
  7. Powerful mixins @mixin fontStyles($font, $size, $color) { font-family: $font; font-size:

    $size; color: $color; } … h1 { @include fontStyles($body, 1rem, black); }
  8. What is flex? • Allows a parent container to fill

    its own space • Move items horizontally or vertically!
  9. Old way #container { width: 600px; } .sidebar { float:

    left; width: 20%; } .main { float: right; width: 80%; }
  10. With flex #container { display: flex; } .sidebar { width:

    20%; } .main { /* width calculated automatically */ }
  11. Var scoping Vars are global and local global :root {

    --primary-color: blue; }
 
 local .btn { --primary-color: red; }
  12. 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!
  13. “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/