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

Styling React components

Styling React components

CSS has come a long way from the inline styles in 96 to the inline styles in 2016, wait wut?

Let's take a journey and see what did we learn along the way and what's the best way to style your React components

Ea26ebbe66c3bb6afb5f711cfe766dff?s=128

Siddharth Kshetrapal

December 03, 2016
Tweet

More Decks by Siddharth Kshetrapal

Other Decks in Technology

Transcript

  1. Styling React components

  2. @siddharthkp

  3. @siddharthkp javascript and interfaces

  4. CSS syntax

  5. React component

  6. What if?

  7. History lesson

  8. 1990

  9. 1996

  10. 1996 Language for writing styles

  11. 2003 Separation of content and styles in DOM

  12. 2005 Semantic HTML

  13. None
  14. 2005 Semantic HTML

  15. 2005 Semantic HTML

  16. 2005 Semantic HTML

  17. 2005 Semantic HTML

  18. None
  19. 2007

  20. 2007

  21. 2007 Isolation

  22. 2009 OOCSS

  23. 2009 Lego driven development - Nicole Sullivan

  24. None
  25. 2009

  26. 20099 Components

  27. 20099 Components

  28. There are only two hard things in Computer Science: cache

    invalidation and naming things. - Phil Karlton
  29. 2010 - 2013 bem smacss suitcss rscss atomic design

  30. 2010 - 2013 Component state

  31. button button--active list 2010 - 2013 Components of components

  32. 2010 - 2013 Components of components button button--active list dropdown

  33. 2010 - 2013

  34. 2010 - 2013 Co-location

  35. 2013

  36. 2005 Semantic HTML

  37. 2013 React components

  38. None
  39. Learnings from 1996 - 2013 Language for writing styles -

    CSS Separation of content and styles in DOM Semantic HTML = Good names for elements Isolation Components Co-location
  40. 1. The React documentation way

  41. 1. The React documentation way - Inline Styles

  42. Language for writing styles - CSS Separation of content and

    styles Semantic HTML = Good names for elements Isolation Components Co-location No :hover :focus! 1. The React documentation way - Inline Styles
  43. 1. The React documentation way - Inline Styles

  44. 1. The React documentation way - Inline Styles Language for

    writing styles - CSS Separation of content and styles Semantic HTML = Good names for elements Isolation Components Co-location Advanced logic
  45. Content (HTML), styling (CSS) and interactions (JS) in one file.

    If you’re using React, you have access to a more powerful construct than CSS class names, you have components - Micheal Chan, @chantastic What’s so great about co-location anyways?
  46. Content (HTML), styling (CSS) and interactions (JS) in one file.

    - Convenience - Independent entity - Include a component and everything just works™ - Share + reuse components across pages and applications What’s so great about co-location anyways?
  47. 2. Radium - better inline styles

  48. 2. Radium - better inline styles ← ES7 decorator More

    info
  49. Language for writing styles - CSS Separation of content and

    styles Isolation Co-location Advanced logic 2. Radium - better inline styles
  50. 3. Good old CSS

  51. 3. Good old CSS Language for writing styles - CSS

    Separation of content and styles Isolation Co-location Advanced logic
  52. 4. CSS Modules

  53. 4. CSS Modules

  54. 4. CSS Modules Language for writing styles - CSS Separation

    of content and styles Isolation Co-location Advanced logic
  55. 5. Aphrodite

  56. 5. Aphrodite Language for writing styles - CSS Separation of

    content and styles Isolation Co-location Advanced logic Uses !important
  57. 6. Glamor

  58. 6. Glamor ← ES6 spread operator More info

  59. 6. Glamor Language for writing styles - CSS (beta) Separation

    of content and styles Isolation Co-location Advanced logic
  60. 7. styled-components

  61. 7. styled-components ← ES6 template tagged literals More info

  62. Language for writing styles - CSS Separation of content and

    styles Isolation Co-location Advanced logic Enforces container/presentation pattern 7. styled-components
  63. 7. styled-components

  64. Real CSS Conventions over configuration (styled-components, zeit/next) Simple API -

    css constructor - attaches styles to highest element in render() Future/Feature request
  65. Future/Feature request

  66. Update: I created css-constructor to make this possible :) github.com/siddharthkp/css-constructor

    Future/Feature request
  67. Inspired by talks from @rstacruz and @mxstbr Huge props to

    them!
  68. Thanks! @siddharthkp