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
2. @siddharthkp
3. @siddharthkp javascript and interfaces
4. CSS syntax
5. React component
6. What if?
7. History lesson
10. 1996 Language for writing styles
11. 2003 Separation of content and styles in DOM
12. 2005 Semantic HTML
14. 2005 Semantic HTML
15. 2005 Semantic HTML
16. 2005 Semantic HTML
17. 2005 Semantic HTML
21. 2007 Isolation
22. 2009 OOCSS
23. 2009 Lego driven development - Nicole Sullivan
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
36. 2005 Semantic HTML
37. 2013 React components
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