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

Components: A Styling Odyssey

5e7b5c8f18818bbead8a2093c5ca300d?s=47 Alex Lande
October 20, 2016

Components: A Styling Odyssey

The past few years have seen an explosion of methodologies for styling component-based web applications, fueled in part by explorations of CSS in JS with React. Let's look at the CSS challenges that have driven these approaches and the ways that different methods meet (or ignore!) them. We'll run the gamut from traditional CSS to styling with JavaScript and back.

5e7b5c8f18818bbead8a2093c5ca300d?s=128

Alex Lande

October 20, 2016
Tweet

Transcript

  1. COMPONENTS A STYLING ODYSSEY

  2. @alexlande alexlande.com

  3. SCALE STYLE at

  4. None
  5. .Sidebar {} .Sidebar.isExpanded {} .Sidebar__section {} .Btn {} .Btn--primary {}

    .Btn--round {} NAMING CONVENTIONS
  6. CODE STANDARDS

  7. CODE REVIEW

  8. DESPITE OUR BEST EFFORTS

  9. CSS AT SCALE IS HARD

  10. SPECIFICITY HELL

  11. SPECIFICITY HELL

  12. SPECIFICITY HELL

  13. SOURCE ORDER WOES

  14. .header a { color: white; } .flyout a { color:

    purple; } SOME OPTIONS Pages LOG IN MENU
  15. SOME OPTIONS Pages LOG IN MENU .flyout a { color:

    purple; } .header a { color: white; }
  16. NAMING COLLISIONS

  17. .product-page .sidebar .btn {…}

  18. .ui-ProductSideBar__button

  19. DEAD CODE

  20. HOW DO WE FIX IT?

  21. INLINE STYLES RIGHT?

  22. Christopher “vjeux” Chedeau React: CSS in JS

  23. I HEARD YOU HAVE TO USE INLINE STYLES IN REACT

    - Unattributed “
  24. IT’S REALLY CSS IN JS

  25. JSS APHRODITE FELA GLAMOR STYLED COMPONENTS RADIUM

  26. BUTTON TIME styles = { background: "purple", display: "block", padding:

    "1rem" }
  27. BUTTON TIME ":hover": { background: "blue" }

  28. "@media (min-width: 400px)": { display: "inline-block" } BUTTON TIME

  29. NO SPECIFICITY SOURCE ORDER INDEPENDENT NO NAMING COLLISIONS STYLE CO-LOCATION

    RUNTIME COMPUTATION GREAT
  30. INCREASES JS BUNDLE SIZE CAN’T USE CSS ECOSYSTEM MORE RUNTIME

    COMPLEXITY LESS GREAT
  31. CSS MODULES

  32. // blog-post.css .title { font-size: 2rem; } // blog-post.js var

    styles = require("./blog-post.css"); <h2 className={{styles.title}}> // Rendered HTML <h2 class="title_12ekjlk">
  33. COMPOSITION

  34. // blog-post.css .normal { font-size: 2rem; } .highlight { composes:

    normal; color: orange; } // blog-post.js var styles = require("./blog-post.css"); <h2 className={{styles.highlight}}> // Rendered HTML <h2 class="normal_41awdnl highlight_98qoijs">
  35. NO NAMING COLLISIONS EXPLICIT SELECTOR IMPORTS COMPOSITION GREAT

  36. DOESN’T HELP WITH SPECIFICITY DOESN’T HELP WITH SOURCE ORDER MORE

    BUILD COMPLEXITY LESS GREAT
  37. FUNCTIONAL CSS

  38. None
  39. None
  40. COMPOSITION (AGAIN)

  41. // virtual-classes.js var title = 'font-md color-black mb3 uppercase' //

    blog-post.js <h2 class={ styles.title }> // Rendered HTML <h2 class="font-md color-black mb3 uppercase">
  42. FLAT SPECIFICITY GRAPH SOURCE ORDER INDEPENDENT SMALL CSS BUNDLE SIZES

    GREAT
  43. NAMING COLLISIONS POSSIBLE LEARNING CURVE LESS GREAT

  44. OBJECT ORIENTED CSS

  45. CHALLENGES CAN BE SOLVED WITH DILIGENCE

  46. CAREFUL WITH DESCENDANT SELECTORS PREFER CLASS SELECTORS CAREFUL WITH MULTI-CLASS

    PATTERN OOCSS ADVICE USE STYLELINT TO CHECK FOR THE ABOVE
  47. THERE IS NO RIGHT ANSWER

  48. BETTER UX BETTER DX means

  49. KEEP PUSHING

  50. @alexlande alexlande.com THANKS!

  51. LINKS Specificity Graphs http://csswizardry.com/2014/10/the-specificity- graph/ React: CSS in JS https://vimeo.com/116209150

    CSS Modules https://github.com/css-modules/css-modules Basscss http://www.basscss.com/ Tachyons http://tachyons.io/ Basscss Box Example http://www.basscss.com/#box React Functional CSS Protips (Virtual Classes) https://github.com/chibicode/react-functional- css-protips Radium https://formidable.com/open-source/radium/ JSS https://github.com/cssinjs/jss Aphrodite https://github.com/Khan/aphrodite Glamor https://github.com/threepointone/glamor Fela http://fela.js.org/ Styled Components https://styled-components.com/