Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

CSS in React - The Good, The Bad, and The Ugly

CSS in React - The Good, The Bad, and The Ugly

Overview of the top frameworks for writing CSS in JS apps written in ReactJS - Presented at SXSW 2017

Joe Seifi

March 13, 2017
Tweet

Other Decks in Programming

Transcript

  1. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not

    DRY Developer Experience DOM updates require JS
  2. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not

    DRY Developer Experience DOM updates require JS UGLY Globals
  3. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not

    DRY Developer Experience DOM updates require JS UGLY Globals Cascades
  4. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not

    DRY Developer Experience DOM updates require JS UGLY Globals Cascades Specificity
  5. Familiarity Matured browser support Continuous growth GOOD BAD Naming Not

    DRY Developer Experience DOM updates require JS UGLY Globals Cascades Specificity Source Order
  6. BAD Naming Not DRY Developer Experience DOM updates require JS

    Familiarity Matured browser support Continuous growth GOOD UGLY Globals Cascades Specificity Source Order IDEAL FEATURES 
 FOR CSS IN REACT FRAMEWORKS
  7. BAD Naming Not DRY Developer Experience DOM updates require JS

    Familiarity Matured browser support Continuous growth GOOD UGLY Globals Cascades Specificity Source Order IDEAL FEATURES 
 FOR CSS IN REACT FRAMEWORKS Components with local CSS Optional global CSS
  8. BAD Naming Not DRY Developer Experience DOM updates require JS

    Familiarity Matured browser support Continuous growth GOOD UGLY Globals Cascades Specificity Source Order Full CSS support Server side rendering / Extract CSS IDEAL FEATURES 
 FOR CSS IN REACT FRAMEWORKS Components with local CSS Optional global CSS
  9. BAD Naming Not DRY Developer Experience DOM updates require JS

    Familiarity Matured browser support Continuous growth GOOD UGLY Globals Cascades Specificity Source Order Full CSS support Server side rendering / Extract CSS No dead CSS Themes Debugging in DevTools Linting & syntax highlighting Automatic vendor prefixing IDEAL FEATURES 
 FOR CSS IN REACT FRAMEWORKS Components with local CSS Optional global CSS
  10. :any :checked :default :dir() :disabled :empty :enabled :first :first-child :first-of-type

    :fullscreen :indeterminate :in-range :invalid :lang() :last-child :last-of-type :left :link :not() :nth-child() :nth-last-child() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :read-only :read-write :required :right :root :scope :target :valid :visited
 ::after ::before ::first-letter ::first-line ::selection ::backdrop ::placeholder ::marker ::spelling-error ::grammar-error css pseudo
 classes &
 elements
 :active :focus :hover Radium
  11. ShoppingCart.js VideoItem.js global.css Button.js Languages Separation of Functionality button.css shopping-cart.css

    ShoppingCart.js VideoItem.js video-item.css button.js Separation of Concerns button.css button.js
  12. ShoppingCart.js VideoItem.js global.css Button.js Languages Separation of Functionality button.css shopping-cart.css

    ShoppingCart.js VideoItem.js video-item.css button.js Separation of Concerns
  13. .button_btn_18iwj { } {
 btn: “button_btn_18iwj” } Generated CSS JS

    maps classnames React CSS Modules } Original .button CSS
  14. .button_btn_18iwj { } {
 btn: “button_btn_18iwj” } Generated CSS JS

    maps classnames React CSS Modules } Original .button CSS
  15. .button_btn_18iwj { } {
 btn: “button_btn_18iwj” } Generated CSS JS

    maps classnames React CSS Modules } Original .button CSS
  16. Styletron Source style objects Generated CSS {
 font: ‘bold 32px’

    text-align: ‘center’ } {
 color: ‘#ec4800’ font: ‘bold 32px’ }
  17. Styletron Source style objects Generated CSS {
 font: ‘bold 32px’

    text-align: ‘center’ } {
 color: ‘#ec4800’ font: ‘bold 32px’ } {
 text-align: ‘center’ color: ‘#ec4800’ }
  18. Styletron Source style objects Generated CSS {
 font: ‘bold 32px’

    text-align: ‘center’ } {
 color: ‘#ec4800’ font: ‘bold 32px’ } {
 text-align: ‘center’ color: ‘#ec4800’ } 
 .a { color: #ec4800 } .b { font: bold 32px } .c { text-align: center }
  19. Styletron Source style objects Generated CSS {
 font: ‘bold 32px’

    text-align: ‘center’ } {
 color: ‘#ec4800’ font: ‘bold 32px’ } {
 text-align: ‘center’ color: ‘#ec4800’ } 
 .a { color: #ec4800 } .b { font: bold 32px } .c { text-align: center }
  20. Styletron Source style objects Generated CSS {
 font: ‘bold 32px’

    text-align: ‘center’ } {
 color: ‘#ec4800’ font: ‘bold 32px’ } {
 text-align: ‘center’ color: ‘#ec4800’ } 
 .a { color: #ec4800 } .b { font: bold 32px } .c { text-align: center }
  21. Styletron Source style objects Generated CSS {
 font: ‘bold 32px’

    text-align: ‘center’ } {
 color: ‘#ec4800’ font: ‘bold 32px’ } {
 text-align: ‘center’ color: ‘#ec4800’ } 
 .a { color: #ec4800 } .b { font: bold 32px } .c { text-align: center } 
 “a b” “b c” “b a”
  22. Styletron Source style objects Generated CSS 6 Rules 3 Rules

    {
 font: ‘bold 32px’ text-align: ‘center’ } {
 color: ‘#ec4800’ font: ‘bold 32px’ } {
 text-align: ‘center’ color: ‘#ec4800’ } 
 .a { color: #ec4800 } .b { font: bold 32px } .c { text-align: center } 
 “a b” “b c” “b a”
  23. .a .b .c .d .e .f .g .h .i .j

    .l .btn .btn:hover .btn.depressed Styletron .a .b .c .d .e .f .g .h .i .j .j .k .l .l:hover .m .n .o
  24. .a .b .c .d .e .f .g .h .i .j

    .l .btn .btn:hover .btn.depressed Styletron .a .b .c .d .e .f .g .h .i .j .j .k .l .l:hover .m .n .o
  25. - Bret Victor Technology changes quickly, people’s minds change slowly.

    So it’s easy to adopt new technologies, it can be hard to adopt new ways of thinking. “ ”