Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

The road to <> styled-components: CSS in component-based systems by Max Stoiber

613 visualizaciones

Publicado el

There's been a revolution; welcome the Component Age! Now what about styles? Max sat down with Glen Maddern (CSS modules) to think about how styles fit into our post-revolution world. They took the best of CSS and the web to create a fantastic new way to style component-based systems.

Publicado en: Tecnología
  • Sé el primero en comentar

The road to <> styled-components: CSS in component-based systems by Max Stoiber

  1. 1. <💅> styled-components Max Stoiber @mxstbr CTO, Space Program
  2. 2. spectrum.chat/~react
  3. 3. The Component Age
  4. 4. 1. Small, focussed components 2. Use container components Best Practices: Components
  5. 5. Small, focussed components
  6. 6. <Button className="btn"></Button> <Button className="btn btn--primary"></Button>
  7. 7. <Button className="btn"></Button> <Button className="btn btn--primary"></Button> Implementation detail! Implementation detail!
  8. 8. <Button></Button> <Button primary></Button>
  9. 9. Split containers and components
  10. 10. class Sidebar extends React.Component { componentDidMount() { fetch('api.com/sidebar') .then(res => { this.setState({ items: res.items }) }); } render() { return ( <div className="sidebar"> {this.state.items.map(item => ( <div className="sidebar__item">{item}</div> ))} </div> ) } }
  11. 11. class SidebarContainer extends React.Component { componentDidMount() { fetch('api.com/sidebar') .then(res => { this.setState({ items: res.items }) }); } render() { return ( <Sidebar> {this.state.items.map(item => ( <SidebarItem item={item} /> ))} </Sidebar> ) } }
  12. 12. Containers = How things work Components = How things look
  13. 13. What about styling?
  14. 14. 1. Single-use classes 2. Components as a styling construct Best Practices: Styling
  15. 15. If you’re writing React, you have access to a more powerful styling construct than CSS class names. You have components.” – Michael Chan, @chantastic “
  16. 16. Enforcing best practices?
  17. 17. styled-components
  18. 18. Glen Maddern frontend.center
  19. 19. Remove the mapping between styles and components
  20. 20. import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; const Wrapper = styled.section` color: palevioletred; padding: 4em; width: 100%; height: 100%; background: papayawhip; `;
  21. 21. import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; const Wrapper = styled.section` color: palevioletred; padding: 4em; width: 100%; height: 100%; background: papayawhip; `;
  22. 22. import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; const Wrapper = styled.section` color: palevioletred; padding: 4em; width: 100%; height: 100%; background: papayawhip; `; styled.h1
  23. 23. import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; const Wrapper = styled.section` color: palevioletred; padding: 4em; width: 100%; height: 100%; background: papayawhip; `;
  24. 24. import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; const Wrapper = styled.section` color: palevioletred; padding: 4em; width: 100%; height: 100%; background: papayawhip; `;
  25. 25. const App = () => ( <Wrapper> <Title> Hello World, this is my first styled component! </Title> </Wrapper> ); ReactDOM.render( <App />, document.getElementById(‘#app') );
  26. 26. styled-components
  27. 27. Write actual CSS
  28. 28. import styled from 'styled-components'; const ColorChanger = styled.section` background: papayawhip; > h2 { color: palevioletred; } @media (min-width: 875px) { background: mediumseagreen; > h2 { color: papayawhip; } } `;
  29. 29. import styled from 'styled-components'; const ColorChanger = styled.section` background: papayawhip; > h2 { color: palevioletred; } @media (min-width: 875px) { background: mediumseagreen; > h2 { color: papayawhip; } } `;
  30. 30. import styled from 'styled-components'; const ColorChanger = styled.section` background: papayawhip; > h2 { color: palevioletred; } @media (min-width: 875px) { background: mediumseagreen; > h2 { color: papayawhip; } } `;
  31. 31. color-changer
  32. 32. Adapting based on props
  33. 33. <Button>Normal</Button> <Button primary>Primary</Button>
  34. 34. const Button = styled.button` /* Adapt the colors based on primary prop */ background: ${(props) => props.primary ? 'palevioletred' : 'white' }; color: ${(props) => props.primary ? 'white' : 'palevioletred' }; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `; export default Button;
  35. 35. <Button>Normal</Button> <Button primary>Primary</Button>
  36. 36. styled-components
  37. 37. Theming Built In
  38. 38. import { ThemeProvider } from 'styled-components'; const theme = { primary: 'palevioletred', }; const App = () => ( <ThemeProvider theme={theme}> <Root /> </ThemeProvider> );
  39. 39. import { ThemeProvider } from 'styled-components'; const theme = { primary: 'palevioletred', }; const App = () => ( <ThemeProvider theme={theme}> <Root /> </ThemeProvider> );
  40. 40. import { ThemeProvider } from 'styled-components'; const theme = { primary: 'palevioletred', }; const App = () => ( <ThemeProvider theme={theme}> <Root /> </ThemeProvider> );
  41. 41. import styled from 'styled-components'; const Button = styled.button` /* Adjust background based on the theme */ background: ${props => props.theme.primary}; color: white; `;
  42. 42. styled-components
  43. 43. const redTheme = { primary: 'palevioletred', }; const greenTheme = { primary: 'mediumseagreen', }; // … <ThemeProvider theme={redTheme}> <Button>I'm red!</Button> </ThemeProvider> <ThemeProvider theme={greenTheme}> <Button>I'm green!</Button> </ThemeProvider>
  44. 44. styled-components
  45. 45. <ThemeProvider theme={redTheme}> <Button>I'm red!</Button> </ThemeProvider>
  46. 46. <ThemeProvider theme={redTheme}> <div> <Button>I'm still red!</Button> </div> </ThemeProvider>
  47. 47. <ThemeProvider theme={redTheme}> <div> <Container> <Button>I'm still red!</Button> </Container> </div> </ThemeProvider>
  48. 48. <ThemeProvider theme={redTheme}> <div> <Container> <div> <Button>I'm still red!</Button> </div> </Container> </div> </ThemeProvider>
  49. 49. <ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Button>I'm still red!</Button> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
  50. 50. <ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Sidebar> <Button>I'm still red!</Button> </Sidebar> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
  51. 51. <ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Sidebar> <SidebarItem> <Button>I'm still red!</Button> </SidebarItem> </Sidebar> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
  52. 52. <ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Sidebar> <SidebarItem> <div> <Button>I'm still red!</Button> </div> </SidebarItem> </Sidebar> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
  53. 53. <ThemeProvider theme={redTheme}> <div> <Container> <div> <SidebarContainer> <Sidebar> <SidebarItem> <div> <span> <Button>I'm still red!</Button> </span> </div> </SidebarItem> </Sidebar> </SidebarContainer> </div> </Container> </div> </ThemeProvider>
  54. 54. Full ReactNative Support
  55. 55. import styled from 'styled-components/native'; const Wrapper = styled.View` background-color: papayawhip; flex: 1; justify-content: center; align-items: center; `; const Title = styled.Text` font-size: 20; text-align: center; margin: 10; color: palevioletred; font-weight: bold; `;
  56. 56. import styled from 'styled-components/native'; const Wrapper = styled.View` background-color: papayawhip; flex: 1; justify-content: center; align-items: center; `; const Title = styled.Text` font-size: 20; text-align: center; margin: 10; color: palevioletred; font-weight: bold; `;
  57. 57. import styled from 'styled-components/native'; const Wrapper = styled.View` background-color: papayawhip; flex: 1; justify-content: center; align-items: center; `; const Title = styled.Text` font-size: 20; text-align: center; margin: 10; color: palevioletred; font-weight: bold; `;
  58. 58. import styled from 'styled-components/native'; const Wrapper = styled.View` background-color: papayawhip; flex: 1; justify-content: center; align-items: center; `; const Title = styled.Text` font-size: 20; text-align: center; margin: 10; color: palevioletred; font-weight: bold; `;
  59. 59. import styled from 'styled-components/native'; const Wrapper = styled.View` background-color: papayawhip; flex: 1; justify-content: center; align-items: center; `; const Title = styled.Text` font-size: 20; text-align: center; margin: 10; color: palevioletred; font-weight: bold; `;
  60. 60. class StyledComponentsNative extends Component { render() { return ( <Wrapper> <Title> Hello World, this is my first native styled component! </Title> </Wrapper> ); } }
  61. 61. $ yarn add styled-components github.com/ styled-components/styled-components $ npm install styled-components
  62. 62. @mixin tone($property, $color, $lighten, $desaturate: $lighten) { #{$property}: desaturate(lighten($color, $lighten), $desaturate); } ?????
  63. 63. @mixin tone($property, $color, $lighten, $desaturate: $lighten) { #{$property}: desaturate(lighten($color, $lighten), $desaturate); }
  64. 64. @mixin tone($property, $color, $lighten, $desaturate: $lighten) { #{$property}: desaturate(lighten($color, $lighten), $desaturate); } Function?
  65. 65. function tone(property, color, lighten, desaturate = lighten) { #{$property}: desaturate(lighten(color, lighten), desaturate); }
  66. 66. function tone(property, color, lighten, desaturate = lighten) { #{$property}: desaturate(lighten(color, lighten), desaturate); } return?
  67. 67. function tone(property, color, lighten, desaturate = lighten) { return `${property}: ${ desaturate(lighten(color, lighten), desaturate) }`; }
  68. 68. function tone(property, color, lighten, desaturate = lighten) { return `${property}: ${ desaturate(lighten(color, lighten), desaturate) }`; } ??????
  69. 69. A lightweight toolset for writing styles in JavaScript polished.js.org by @nikgraf, @bhough and @mxstbr
  70. 70. function tone(property, color, lighten, desaturate = lighten) { return `${property}: ${ desaturate(lighten(color, lighten), desaturate) }`; }
  71. 71. function tone(property, color, lighten, desaturate = lighten) { return `${property}: ${ desaturate(desaturate, lighten(lighten, color)) }`; }
  72. 72. Mixins clearFix ellipsis fontFace hiDPI hideText normalize placeholder radialGradient retinaImage selection timingFunctions wordWrap Color adjustHue complement darken desaturate grayscale hsl hsla invert lighten mix opacify parseToHsl parseToRgb rgb rgba saturate setHue setLightness setSaturation shade tint transparentize Shorthands animation backgroundImages backgrounds borderColor borderRadius borderStyle borderWidth buttons margin padding position size textInputs transitions Helpers directionalProperty em modularScale rem stripUnit polished.js.org by @nikgraf, @bhough and @mxstbr
  73. 73. $ yarn add polished github.com/ styled-components/polished Come get some 💅 styled-components stickers!

×