Kundeklienter PM - SpareBank 1 Forsikring

BEKK Consulting

CSS-in-JS

Historie

Hvorfor CSS suger

Den hellige 3-enighet

Hva er CSS-in-JS

Eksempler

Historietime

<font color="red" />

all-styles.css

BEM

BEM

CSS suger

💰scope

💀 code

🚑 CSS

⏩ Optimalisering?

🕸 web

🎅👶👻

Den hellige treenighet

Struktur
Oppførsel
Utsende

Deling i gamledager

jQuery plugins

HTML + JS

Angular directives

HTML + JS

React Components
HTML (JSX) + JS

Men hva med...

HTML + JS + CSS?

CSS-in-JS

The power of JS

Inline styles

Klasser!

🙌

$scope

💀 code

🚑 CSS

✅ optimalisert

🕸 ++

💅

import styled from 'styled-components';

const Button = styled.button`
    background: transparent;
    box-sizing: border-box;
    color: #333;
    border: 1px solid currentColor;
    border-radius: 3px;
    display: inline-block;
    padding: 0.5em 1.em;
`;

export default Button;

Eksempel

import styled from 'styled-components';

const Button = styled.button`
    background: transparent;
    box-sizing: border-box;
    color: #333;
    border: 1px solid #333;
    border-radius: 3px;
    display: inline-block;
    padding: 0.5em 1.em;
    transition: translate .1s ease-out;

    &:focus, &:hover {
        translate: scale(1.05);
    }
`;

export default Button;

Nesting!

import styled from 'styled-components';
import Button from './Button';

const PrimaryButton = Button.extend`
    background-color: #0f0;
    color: #fff
`;

export default PrimaryButton;

Utvid

import styled from 'styled-components';
import Button from './Button';

// constants/colors.js
const colors = {
    primary: '#0f0',
    primaryOpposite: '#eee',
};

const PrimaryButton = Button.extend`
    background-color: ${colors.primary};
    color: ${colors.primaryOpposite};
`;

export default PrimaryButton;

Variabler

import styled from 'styled-components';

const breakpoints = {
    mediumUp: '@media all and (min-width: 800px)',
    largeUp: '@media all and (min-width: 1000px)',
};

const Button = styled.button`
    background: transparent;
    box-sizing: border-box;
    color: #333;
    border: 1px solid currentColor;
    border-radius: 3px;
    display: inline-block;
    padding: 0.5em 1.em;
    width: 100%;

    ${breakpoints.mediumUp} {
        width: auto;
    }
`;

export default Button;

Breakpoints

import styled from 'styled-components';

const Button = styled.button`
    // ... button styles
    ${props => props.large && `
        font-size: 1.25em;
    `}
`;

export default Button;

👋 props

import styled from 'styled-components';
import { Link } from 'react-router-dom';
import Button from './Button';

const LinkButton = Button.withComponent(Link);

export default LinkButton;

Bytt element

import styledNormalize from 'styled-normalize';
import { injectGlobal } from 'styled-components';

const globalStyles = `
    ${styledNormalize()}

    @import url(
        'https://fonts.googleapis.com/css?family=Open+Sans'
    );

    body { 
        box-sizing: border-box; 
        font-family: 'Open Sans', sans-serif;
    }

    *, *::before, *::after {
        box-sizing: border-box;
    }
`;

injectGlobal(globalStyles);

Go global 🌏

Så... joda

Prøv det.
Elsk det.
Gjør det.