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

Components: A Styling Odyssey

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.

Alex Lande

October 20, 2016
Tweet

More Decks by Alex Lande

Other Decks in Programming

Transcript

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

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

    purple; } .header a { color: white; }
  3. // 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">
  4. // 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">
  5. // 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">
  6. CAREFUL WITH DESCENDANT SELECTORS PREFER CLASS SELECTORS CAREFUL WITH MULTI-CLASS

    PATTERN OOCSS ADVICE USE STYLELINT TO CHECK FOR THE ABOVE
  7. 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/