(CSSConf) Component-based Style Reuse

Transcript

1. Component-Based Style Reuse Pete Hunt @floydophone
2. Who am I?
7. Apps or documents?
8. CSS had one feature that distinguished it from all the others: it took into account that on the Web the style of a document couldn't be designed by either the author or the reader on their own, but that their wishes had to be combined, or "cascaded," in some way — https://www.w3.org/Style/LieBos2e/history/Overview.html
10. What's a component? A piece of UI that is reusable in different contexts.
11. "Object-oriented CSS" pioneered the idea of reusable components with CSS in 2010. Thanks, Nicole!
12. Let's build a media object. The media object is an image to the left, with descriptive content to the right — http://www.stubbornella.org/content/2010/06/25/the-media- object-saves-hundreds-of-lines-of-code/
18. < d i v c l a s s = " m e d i a a t t r i b u t i o n " > < a h r e f = " h t t p : / / f a c e b o o k . c o m / a s h l e e s i m p s o n " c l a s s = " i m g " > < i m g s r c = " h t t p : / / g r a p h . f a c e b o o k . c o m / a s h l e e s i m p s o n / p i c t u r e " a l t = " m e " / > < / a > < d i v c l a s s = " b d " > @ S t u b b o r n e l l a 1 4 m i n u t e s a g o < / d i v > < / d i v > / * = = = = = = m e d i a = = = = = = * / . m e d i a { m a r g i n : 1 0 p x ; } . m e d i a , . b d { o v e r f l o w : h i d d e n ; _ o v e r f l o w : v i s i b l e ; z o o m : 1 ; } . m e d i a . i m g { f l o a t : l e f t ; m a r g i n - r i g h t : 1 0 p x ; } . m e d i a . i m g i m g { d i s p l a y : b l o c k ; } . m e d i a . i m g E x t { f l o a t : r i g h t ; m a r g i n - l e f t : 1 0 p x ; }
19. https://jsfiddle.net/1pjr0u9h/
20. Let's build the media object with React.
21. React key ideas No static HTML. All DOM nodes are generated with JavaScript. Build components out of other components.
22. v a r M e d i a O b j e c t = R e a c t . c r e a t e C l a s s ( { r e n d e r : f u n c t i o n ( ) { r e t u r n ( < d i v c l a s s N a m e = " m e d i a a t t r i b u t i o n " > < a h r e f = { t h i s . p r o p s . l i n k } c l a s s N a m e = " i m g " > < i m g s r c = { t h i s . p r o p s . i m a g e } / > < / a > < d i v c l a s s N a m e = " b d " > { t h i s . p r o p s . c h i l d r e n } < / d i v > < / d i v > ) ; } } ) ;
23. v a r M y A p p = R e a c t . c r e a t e C l a s s ( { r e n d e r : f u n c t i o n ( ) { r e t u r n ( < d i v > < M e d i a O b j e c t l i n k = " h t t p s : / / w w w . f a c e b o o k . c o m / b a r e n a k e d l a d i e s " i m a g e = " h t t p s : / / g r a p h . f a c e b o o k . c o m / b a r e n a k e d l a d i e s / p i c R e p r e s e n t a t i v e b a n d o f t h e 9 0 s : ) < / M e d i a O b j e c t > < M e d i a O b j e c t l i n k = " h t t p s : / / w w w . f a c e b o o k . c o m / n i c k e l b a c k " i m a g e = " h t t p s : / / g r a p h . f a c e b o o k . c o m / n i c k e l b a c k / p i c t u r e " R e p r e s e n t a t i v e b a n d o f t h e 2 0 0 0 s : ( < / M e d i a O b j e c t > < / d i v > ) ; } } ) ;
24. https://jsfiddle.net/we7mcxg2/
25. Class name conflicts
26. . s e e - m o r e . i m g { m a r g i n - l e f t : 1 0 p x ; v e r t i c a l - a l i g n : m i d d l e ; } v a r S e e M o r e = R e a c t . c r e a t e C l a s s ( { r e n d e r : f u n c t i o n ( ) { r e t u r n ( < d i v c l a s s N a m e = " s e e - m o r e " > { t h i s . p r o p s . c h i l d r e n } < i m g c l a s s N a m e = " i m g " s r c = " h t t p : / / u p l o a d s . w e b f l o w . c o m / 5 3 6 3 f 4 6 0 5 b a 8 8 2 c 4 3 2 0 0 0 w i d t h = { 1 6 } h e i g h t = { 1 6 } / > < / d i v > ) ; } } ) ;
27. v a r M y A p p = R e a c t . c r e a t e C l a s s ( { r e n d e r : f u n c t i o n ( ) { r e t u r n ( < d i v > < S e e M o r e > R e p r e s e n t a t i v e b a n d o f t h e 9 0 s : ) < / S e e M o r e > < / d i v > ) ; } } ) ; https://jsfiddle.net/0esdk69j/
28. v a r M y A p p = R e a c t . c r e a t e C l a s s ( { r e n d e r : f u n c t i o n ( ) { r e t u r n ( < d i v > < M e d i a O b j e c t l i n k = " h t t p s : / / w w w . f a c e b o o k . c o m / b a r e n a k e d l a d i e s " i m a g e = " h t t p s : / / g r a p h . f a c e b o o k . c o m / b a r e n a k e d l a d i e s / p i c < S e e M o r e > R e p r e s e n t a t i v e b a n d o f t h e 9 0 s : ) < / S e e M o r e > < / M e d i a O b j e c t > < / d i v > ) ; } } ) ;
29. https://jsfiddle.net/q60oo8s6/
30. . s e e - m o r e . i m g { m a r g i n - l e f t : 1 0 p x ; v e r t i c a l - a l i g n : m i d d l e ; } / * = = = = = = m e d i a = = = = = = * / . m e d i a { m a r g i n : 1 0 p x ; } . m e d i a , . b d { o v e r f l o w : h i d d e n ; _ o v e r f l o w : v i s i b l e ; z o o m : 1 ; } . m e d i a . i m g { f l o a t : l e f t ; m a r g i n - r i g h t : 1 0 p x ; } . m e d i a . i m g i m g { d i s p l a y : b l o c k ; } . m e d i a . i m g E x t { f l o a t : r i g h t ; m a r g i n - l e f t : 1 0 p x ; }
31. / * = = = = = = m e d i a = = = = = = * / . m e d i a { m a r g i n : 1 0 p x ; } . m e d i a _ _ b d { o v e r f l o w : h i d d e n ; _ o v e r f l o w : v i s i b l e ; z o o m : 1 ; } . m e d i a _ _ i m g { f l o a t : l e f t ; m a r g i n - r i g h t : 1 0 p x ; } . m e d i a _ _ i m g t a g { d i s p l a y : b l o c k ; } . m e d i a _ _ i m g E x t { f l o a t : r i g h t ; m a r g i n - l e f t : 1 0 p x ; } . s e e - m o r e _ _ i m g { m a r g i n - l e f t : 1 0 p x ; v e r t i c a l - a l i g n : m i d d l e ; }
32. https://jsfiddle.net/aLqmypp0/
33. Single class name selectors only. No descendant selectors.
34. Class names should be unambiguously namespaced. You can use webpack's CSS modules to do this automatically.
35. Class names should be referenced exactly once in your JS code. These names should be private to the component that uses them. Reuse (React) components, not CSS classes.
36. < a c l a s s = " s p e c i a l - l i n k " h r e f = " . . . " > L e a r n m o r e < / a > vs < S p e c i a l L i n k h r e f = " . . . " > L e a r n m o r e < / S p e c i a l L i n k >
37. / * = = = = = = m e d i a = = = = = = * / . m e d i a { m a r g i n : 1 0 p x ; } . m e d i a _ _ b d { o v e r f l o w : h i d d e n ; _ o v e r f l o w : v i s i b l e ; z o o m : 1 ; } . m e d i a _ _ i m g { f l o a t : l e f t ; m a r g i n - r i g h t : 1 0 p x ; } . m e d i a _ _ i m g t a g { d i s p l a y : b l o c k ; } . m e d i a _ _ i m g E x t { f l o a t : r i g h t ; m a r g i n - l e f t : 1 0 p x ; } v a r M e d i a O b j e c t = R e a c t . c r e a t e C l a s s ( { r e n d e r : f u n c t i o n ( ) { r e t u r n ( < d i v c l a s s N a m e = " m e d i a a t t r i b u t i o n " > < a h r e f = { t h i s . p r o p s . l i n k } c l a s s N a m e = " m e d i a _ _ i m g " > < i m g c l a s s N a m e = " m e d i a _ _ i m g t a g " s r c = { t h i s . p r o p s . i m a g e } < / a > < d i v c l a s s N a m e = " m e d i a _ _ b d " > { t h i s . p r o p s . c h i l d r e n } < / d i v > < / d i v > ) ; } } ) ;
38. Why not write all the styles inline?
39. v a r M e d i a O b j e c t = R e a c t . c r e a t e C l a s s ( { r e n d e r : f u n c t i o n ( ) { r e t u r n ( < d i v s t y l e = { { m a r g i n : 1 0 } } > < a h r e f = { t h i s . p r o p s . l i n k } s t y l e = { { f l o a t : ' l e f t ' , m a r g i n R i g h t : 1 0 } } > < i m g s t y l e = { { d i s p l a y : ' b l o c k ' } } s r c = { t h i s . p r o p s . i m a g e } / > < / a > < d i v s t y l e = { { o v e r f l o w : ' h i d d e n ' } } > { t h i s . p r o p s . c h i l d r e n } < / d i v > < / d i v > ) ; } } ) ;
40. v a r M e d i a O b j e c t = R e a c t . c r e a t e C l a s s ( { r e n d e r : f u n c t i o n ( ) { r e t u r n ( < B l o c k m a r g i n = { 1 0 } > < B l o c k f l o a t = " l e f t " m a r g i n R i g h t = { 1 0 } > < a h r e f = { t h i s . p r o p s . l i n k } > < i m g s r c = { t h i s . p r o p s . i m a g e } / > < / a > < / B l o c k > < B l o c k o v e r f l o w = " h i d d e n " > { t h i s . p r o p s . c h i l d r e n } < / B l o c k > < / B l o c k > ) ; } } ) ;
41. I implemented this, and it's called jsxstyle. https://github.com/smyte/jsxstyle
42. Media queries? You can still use the same techniques you've used before.
43. Accessibility You can provide all a r i a attributes, and a c o m p o n e n t prop to indicate which HTML tag should be rendered.
44. Performance. jsxstyle runs your code and inserts stylesheets into the DOM rather than actually creating inline styles.
45. < B l o c k m a r g i n = { 5 } > H e l l o w o r l d < / B l o c k > turns into: < s t y l e > . j s x s t y l e 0 { m a r g i n : 5 p x ; } < / s t y l e > < d i v c l a s s = " j s x s t y l e 0 " > H e l l o w o r l d < / d i v >
46. More performance. There is an experimental webpack loader to statically analyze your code and create static CSS files. This means there should be no performance impact vs. hand-coded CSS in most cases. You can always fall back to hand-coded CSS.
47. Inheritance Makes it difficult to reuse your component in different contexts.
48. https://jsfiddle.net/b86k2o0L/
49. . a p p { f o n t - v a r i a n t : s m a l l - c a p s ; } v a r M y A p p = R e a c t . c r e a t e C l a s s ( { r e n d e r : f u n c t i o n ( ) { r e t u r n ( < d i v c l a s s N a m e = " a p p " > < M e d i a O b j e c t l i n k = " h t t p s : / / w w w . f a c e b o o k . c o m / b a r e n a k e d l a d i e s " i m a g e = " h t t p s : / / g r a p h . f a c e b o o k . c o m / b a r e n a k e d l a d i e s / p i c < S e e M o r e > R e p r e s e n t a t i v e b a n d o f t h e 9 0 s : ) < / S e e M o r e > < / M e d i a O b j e c t > < / d i v > ) ; } } ) ;
50. https://jsfiddle.net/Ln2hmfzz/
51. Crazy idea: apply a "CSS reset" on every component to "opt out" of inheritance? Less crazy: make inheritance "opt in" rather than "opt out"? Needs a few tricks to be performant, may never work for server rendering.
52. tl;dr CSS isn't particularly well suited to the needs of 2016 apps. Reuse components, not CSS classes. Inline styles have a lot of advantages, and the disadvantages can be mitigated. Interesting future work around inheritance
53. Thanks! @floydophone https://github.com/smyte/jsxstyle