Tweet
Tweet

Slide 1

Slide 1 text

CSS in a Component based world @LewisCowper ! FrontendNE @LewisCowper FrontendNE

Slide 2

Slide 2 text

@LewisCowper FrontendNE

Slide 3

Slide 3 text

MoneyMap - @MoneyMapDE @LewisCowper FrontendNE

Slide 4

Slide 4 text

MoneyMap - @MoneyMapDE @LewisCowper FrontendNE

Slide 5

Slide 5 text

MoneyMap - @MoneyMapDE @LewisCowper FrontendNE

Slide 6

Slide 6 text

Goals @LewisCowper FrontendNE

Slide 7

Slide 7 text

Goals → (React) styleguide compatible @LewisCowper FrontendNE

Slide 8

Slide 8 text

Goals → (React) styleguide compatible → Should lower the barrier to entry of our codebase @LewisCowper FrontendNE

Slide 9

Slide 9 text

Goals → (React) styleguide compatible → Should lower the barrier to entry of our codebase → Should be easy to extend existing components with new styles @LewisCowper FrontendNE

Slide 10

Slide 10 text

Mastering CSS is hard @LewisCowper FrontendNE

Slide 11

Slide 11 text

Managing the cascade is hard @LewisCowper FrontendNE

Slide 12

Slide 12 text

Managing components is easy @LewisCowper FrontendNE

Slide 13

Slide 13 text

Containers, Components and Composition @LewisCowper FrontendNE

Slide 14

Slide 14 text

BEM, SMACSS, ITCSS @LewisCowper FrontendNE

Slide 15

Slide 15 text

/* styles.css */ .className { color: tomato; } // index.js import 'styles.css' render(

Hello

) @LewisCowper FrontendNE

Slide 16

Slide 16 text

CSS Modules @LewisCowper FrontendNE

Slide 17

Slide 17 text

CSS Modules /* styles.css */ .className { color: tomato; } // index.js import { className } from 'styles.css' // import styles from 'styles.css' render(

Hello

) // render(

Hello

) @LewisCowper FrontendNE

Slide 18

Slide 18 text

CSS Modules - Composition /* styles.css */ .className { color: tomato; background-color: papayawhip; } .anotherClassName { composes: className; color: dodgerblue; } // index.js import { anotherClassName } from 'styles.css' render(

Hello

) @LewisCowper FrontendNE

Slide 19

Slide 19 text

CSS Modules - Composition /* styles.css */ .className { color: tomato; background-color: papayawhip; } .anotherClassName { composes: className; color: dodgerblue; } // index.js import { anotherClassName } from 'styles.css' render(

Hello

) @LewisCowper FrontendNE

Slide 20

Slide 20 text

Hello

@LewisCowper FrontendNE

Slide 21

Slide 21 text

Styled-Components @LewisCowper FrontendNE

Slide 22

Slide 22 text

Styled-Components import styled from 'styled-components' const Title = styled.h1` color: tomato; ` render(Hello) @LewisCowper FrontendNE

Slide 23

Slide 23 text

Styled-Components import styled from 'styled-components' const Title = styled.h1` color: ${props => ( props.primary ? 'tomato' : 'dodgerblue' )}; ` render(Hello) @LewisCowper FrontendNE

Slide 24

Slide 24 text

Hello

@LewisCowper FrontendNE

Slide 25

Slide 25 text

Conclusions → You might not need it @LewisCowper FrontendNE

Slide 26

Slide 26 text

Conclusions → You might not need it → Try out CSS Modules @LewisCowper FrontendNE

Slide 27

Slide 27 text

Conclusions → You might not need it → Try out CSS Modules → Once you realise your styles could use some JavaScript, check out styled-components @LewisCowper FrontendNE

Slide 28

Slide 28 text

Conclusions → You might not need it → Try out CSS Modules → Once you realise your styles could use some JavaScript, check out styled-components → Keep your eyes out for fun new stuff, you might like it. @LewisCowper FrontendNE

Slide 29

Slide 29 text

styled-components Extra credit (Feel free to ask questions throughout) @LewisCowper FrontendNE

Slide 30

Slide 30 text

→ References to other components? → What about external components? → Extending existing components? → Have lots of options for one CSS property? → Media Queries → Media Queries with helper → Styled theming → Existing tooling support? @LewisCowper FrontendNE

Slide 31

Slide 31 text

References to other components? @LewisCowper FrontendNE

Slide 32

Slide 32 text

const Link = styled.a` background: papayawhip; color: palevioletred; ` const Icon = styled.svg` transition: fill 0.25s; ${Link}:hover & { fill: rebeccapurple; } ` @LewisCowper FrontendNE

Slide 33

Slide 33 text

External components? @LewisCowper FrontendNE

Slide 34

Slide 34 text

import { Link } from 'react-router-dom' const StyledLink = styled(Link)` color: palevioletred; font-weight: bold; ` @LewisCowper FrontendNE

Slide 35

Slide 35 text

Extending existing components? @LewisCowper FrontendNE

Slide 36

Slide 36 text

const Button = styled.button` color: palevioletred; border: 2px solid palevioletred; border-radius: 3px; `; const TomatoButton = Button.extend` color: tomato; border-color: tomato; `; @LewisCowper FrontendNE

Slide 37

Slide 37 text

Want to change the same CSS property? @LewisCowper FrontendNE

Slide 38

Slide 38 text

const Button = styled.button` color: ${props => props.primary && 'orange' || props.warning && 'red' || props.info && 'blue' || 'white' }; border: 2px solid ${props => props.primary && 'orange' || props.warning && 'red' || props.info && 'blue' || 'white' }; font-size: ${props => props.large ? '2.5rem' : '1rem' }; ` @LewisCowper FrontendNE

Slide 39

Slide 39 text

const buttonColor = styledMap` primary: orange; warning: red; info: blue; default: white; ` const Button = styled.button` color: ${buttonColor}; border: 2px solid ${buttonColor}; font-size: ${styledMap` large: 2.5rem; small: 1rem; `}; ` Click me! @LewisCowper FrontendNE

Slide 40

Slide 40 text

Media Queries? @LewisCowper FrontendNE

Slide 41

Slide 41 text

const ColorChanger = styled.section` background: papayawhip; color: palevioletred; @media(min-width: 768px) { background: mediumseagreen; color: papayawhip; } ` @LewisCowper FrontendNE

Slide 42

Slide 42 text

Want to change how Media Queries look? @LewisCowper FrontendNE

Slide 43

Slide 43 text

{ large: '1170px', medium: '768px' } const Box = styled.div` background: black; ${media.lessThan('medium')` background: red; `} ${media.greaterThan('large')` background: blue; `} @LewisCowper FrontendNE

Slide 44

Slide 44 text

Styled-Theming @LewisCowper FrontendNE

Slide 45

Slide 45 text

Styled-Theming - ThemeProvider import { ThemeProvider } from 'styled-theming' @LewisCowper FrontendNE

Slide 46

Slide 46 text

Styled-Theming - Components import theme from 'styled-theming' const boxBackgroundColour = theme('mode', { light: '#fff', dark: '#000' }) const Box = styled.div` background-color: ${boxBackgroundColour} ` @LewisCowper FrontendNE

Slide 47

Slide 47 text

Styled-Theming - Variants const backgroundColor = theme.variants('variant', 'mode', { default: { light: 'gray', dark: 'darkgray' }, primary: { light: 'blue', dark: 'darkblue' }, success: { light: 'green', dark: 'darkgreen' }, warning: { light: 'orange', dark: 'darkorange' }, }) @LewisCowper FrontendNE

Slide 48

Slide 48 text

Helper tools → jest-styled-components @LewisCowper FrontendNE

Slide 49

Slide 49 text

Helper tools → jest-styled-components → stylelint-config-styled-components → stylelint-processor-styled-components @LewisCowper FrontendNE

Slide 50

Slide 50 text

Helper tools → jest-styled-components → stylelint-config-styled-components → stylelint-processor-styled-components → babel-plugin-styled-components @LewisCowper FrontendNE

Slide 51

Slide 51 text

Conclusions → The community is small, growing, and adding new platforms quickly. @LewisCowper FrontendNE

Slide 52

Slide 52 text

Conclusions → The community is small, growing, and adding new platforms quickly. → If you don't use React, the ideas and concepts should still be applicable. @LewisCowper FrontendNE

Slide 53

Slide 53 text

Conclusions → The community is small, growing, and adding new platforms quickly. → If you don't use React, the ideas and concepts should still be applicable. → Definitely try out new things, it's super fun, and can definitely help you. @LewisCowper FrontendNE

Slide 54

Slide 54 text

Thank you Tweet at me @LewisCowper @LewisCowper FrontendNE