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

Transcript

1. Styling React components
   

   View Slide

2. @siddharthkp
   

   View Slide

3. @siddharthkp
   javascript and interfaces
   

   View Slide

4. CSS syntax
   

   View Slide

5. React component
   

   View Slide

6. What if?
   

   View Slide

7. History lesson
   

   View Slide

8. View Slide

9. View Slide

10. 1996 Language for writing styles
    

    View Slide

11. 2003 Separation of content and styles in DOM
    

    View Slide

12. 2005
    Semantic HTML
    

    View Slide

13. View Slide

14. 2005 Semantic HTML
    

    View Slide

15. 2005 Semantic HTML
    

    View Slide

16. 2005 Semantic HTML
    

    View Slide

17. 2005 Semantic HTML
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. 2007 Isolation
    

    View Slide

22. 2009
    OOCSS
    

    View Slide

23. 2009
    Lego driven development
    - Nicole Sullivan
    

    View Slide

24. View Slide

25. View Slide

26. 20099 Components
    

    View Slide

27. 20099 Components
    

    View Slide

28. There are only two hard things in Computer Science:
    cache invalidation and naming things.
    - Phil Karlton
    

    View Slide

29. 2010 - 2013
    bem
    smacss
    suitcss
    rscss
    atomic design
    

    View Slide

30. 2010 - 2013 Component state
    

    View Slide

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

    View Slide

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

    View Slide

33. 2010 - 2013
    

    View Slide

34. 2010 - 2013 Co-location
    

    View Slide

35. View Slide

36. 2005 Semantic HTML
    

    View Slide

37. 2013 React components
    

    View Slide

38. View Slide

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
    

    View Slide

40. 1. The React documentation way
    

    View Slide

41. 1. The React documentation way - Inline Styles
    

    View Slide

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
    

    View Slide

43. 1. The React documentation way - Inline Styles
    

    View Slide

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
    

    View Slide

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?
    

    View Slide

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?
    

    View Slide

47. 2. Radium - better inline styles
    

    View Slide

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

    View Slide

49. Language for writing styles - CSS
    Separation of content and styles
    Isolation
    Co-location
    Advanced logic
    2. Radium - better inline styles
    

    View Slide

50. 3. Good old CSS
    

    View Slide

51. 3. Good old CSS
    Language for writing styles - CSS
    Separation of content and styles
    Isolation
    Co-location
    Advanced logic
    

    View Slide

52. 4. CSS Modules
    

    View Slide

53. 4. CSS Modules
    

    View Slide

54. 4. CSS Modules
    Language for writing styles - CSS
    Separation of content and styles
    Isolation
    Co-location
    Advanced logic
    

    View Slide

55. 5. Aphrodite
    

    View Slide

56. 5. Aphrodite
    Language for writing styles - CSS
    Separation of content and styles
    Isolation
    Co-location
    Advanced logic
    Uses !important
    

    View Slide

57. 6. Glamor
    

    View Slide

58. 6. Glamor
    ← ES6 spread operator
    More info
    

    View Slide

59. 6. Glamor
    Language for writing styles - CSS (beta)
    Separation of content and styles
    Isolation
    Co-location
    Advanced logic
    

    View Slide

60. 7. styled-components
    

    View Slide

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

    View Slide

62. Language for writing styles - CSS
    Separation of content and styles
    Isolation
    Co-location
    Advanced logic
    Enforces container/presentation pattern
    7. styled-components
    

    View Slide

63. 7. styled-components
    

    View Slide

64. Real CSS
    Conventions over configuration (styled-components, zeit/next)
    Simple API - css constructor - attaches styles to highest element
    in render()
    Future/Feature request
    

    View Slide

65. Future/Feature request
    

    View Slide

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

    View Slide

67. Inspired by talks from
    @rstacruz and @mxstbr
    Huge props to them!
    

    View Slide

68. Thanks!
    @siddharthkp
    

    View Slide