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

JavaScriptures 3 - Styled Components

JavaScriptures 3 - Styled Components

Artsy Open Source

April 11, 2018
Tweet

More Decks by Artsy Open Source

Other Decks in Programming

Transcript

  1. “styled-components” is a Javascript library • that allows you to

    style React UIs • and utilises the CSS and JS you already know • while promoting maintainable, component-centric architecture What are Styled Components?
  2. // App.js const App = () => ( <div> <Title>Hello,

    World</Title> </div> ) What do they look like? // Title.js const Title = (props) => { return ( <h1 className="title"> {props.children} </h1> ) } // Title.css h1.title { font: bold 24px sans-serif; color: purple; } Without styled components
  3. What do they look like? // App.js const App =

    () => ( <div> <Title>Hello, World</Title> </div> ) // Title.js import styled from "styled-components" const Title = styled.h1` font: bold 24px sans-serif; color: purple; ` With styled components function argument(s)
  4. // in document <head> <style> .fyUoxx { font: bold 24px

    sans-serif; color: purple; } </style> Where’d the styles actually go? // App.js const App = () => ( <div> <Title>Hello, World</Title> </div> ) at runtime, transforms into // in document <body> <div> <h1 class="fyUoxx"> Hello, World </h1> </div>
  5. It’s just CSS! What’s so great about Styled Components? const

    EditionSetHeader = styled.div` display: flex; justify-content: space-between; border-bottom: solid 1px gray; margin-bottom: 15px; padding-bottom: 10px; ` const Description = styled.div` color: #999999; padding-top: 20px; display: none; @media (min-width: 768px) { display: block; } `
  6. But it’s not just CSS • Vendor prefixing, e.g. -webkit-text-orientation:

    sideways; • Nested and parent selectors … What’s so great about Styled Components? const ImageLink = styled.a` border: solid 1px gray; &:hover { border-color: purple } img { opacity: 0.5 } `
  7. const fonts = { sans: "'Avant Garde', sans-serif", serif: "Garamond,

    serif", } Also, it’s just Javascript! • Share named constants and chunks of CSS easily What’s so great about Styled Components? import { fonts } from "shared/stuff" const Name = styled.div` font-family: ${fonts.sans} `
  8. const Button = styled.button` background: ${ (props) => (props.primary ?

    "black" : "lightGray") }; color: ${ (props) => (props.primary ? "white" : "black") }; ` Also, it’s just Javascript! • Make your component adapt to its props What’s so great about Styled Components? const Tools = () => ( <div> <Button>Cancel</Button> <Button primary>Save</Button> </div> )
  9. const Artists = styled.div` font: ${fonts.sans}; margin: 1em 0; `

    const Title = styled.div` font: ${fonts.serif}; ` const Button = styled.button` ${(props) => (props.primary && ' background: black')} ` const Artwork = ({ artists, title, forSale }) => ( <div> <Artists> {artists.map(a => a.name).join(‘, ‘)} </Artists> <Title>{title || 'untitled'}</Title> {forSale && <Button primary>Buy</Button>} </div> ) Putting it together
  10. • We will refactor the styles in our JavaScriptures app

    • Visit https://github.com/artsy/javascriptures • Go into project #4’s README • Follow along on CodeSandbox.io Let’s code!
  11. • Build up your UI from small, declarative visual primitives

    • Separate presentation from structure at the component level • Leverage the CSS and JS you already know • Eliminate conflicts and cruft What we’ve seen
  12. • Style third-party libraries • Theming • Server-side rendering /

    streaming • React Native What else can Styled Components do?
  13. Official Website https://www.styled-components.com/ Tutorial https://hackernoon.com/styled-components-in-action-723852f2a93d About Tagged Template Literals https://mxstbr.blog/2016/11/styled-components-magic-explained/

    Future roadmap https://medium.com/styled-components/with-styled-components-into-the-future-d1d917e7c22c Early thoughts on CSS in JS http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html Further reading