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

<💅>
styled-components
Max Stoiber
@mxstbr
CTO, Space Program

1. Small, focussed components
2. Use container components
Best Practices: Components

<Button className="btn"></Button>
<Button className="btn btn--primary"></Button>
Implementation detail!
Implementation detail!

Split containers and components

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>
)
}
}

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>
)
}
}

Containers = How things work
Components = How things look

1. Single-use classes
2. Components as a styling
construct
Best Practices: Styling

If you’re writing React, you have
access to a more powerful styling
construct than CSS class names.
You have components.”
– Michael Chan, @chantastic
“

Remove the mapping between
styles and components

import styled from 'styled-components';
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
const Wrapper = styled.section`
padding: 4em;
width: 100%;
height: 100%;
background: papayawhip;
`;

const Title = styled.h1`
font-size: 1.5em;
text-align: center;
`;
const Wrapper = styled.section`
padding: 4em;
width: 100%;
height: 100%;
`;
styled.h1

const App = () => (
<Wrapper>
<Title>
Hello World, this is my ﬁrst styled component!
</Title>
</Wrapper>
);
ReactDOM.render(
<App />,
document.getElementById(‘#app')
);

const ColorChanger = styled.section`
> h2 {
}
@media (min-width: 875px) {
background: mediumseagreen;
> h2 {
color: papayawhip;
}
}
`;

<Button>Normal</Button>
<Button primary>Primary</Button>

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;

import { ThemeProvider } from 'styled-components';
const theme = {
primary: 'palevioletred',
};
const App = () => (
<ThemeProvider theme={theme}>
<Root />
</ThemeProvider>
);

const Button = styled.button`
/* Adjust background based on the theme */
background: ${props => props.theme.primary};
color: white;
`;

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>

<div>
<Button>I'm still red!</Button>
</div>
</ThemeProvider>

import styled from 'styled-components/native';
const Wrapper = styled.View`
background-color: papayawhip;
ﬂex: 1;
justify-content: center;
align-items: center;
`;
const Title = styled.Text`
font-size: 20;
text-align: center;
margin: 10;
font-weight: bold;
`;

class StyledComponentsNative extends Component {
render() {
return (
<Wrapper>
<Title>
Hello World, this is my ﬁrst native styled component!
</Title>
</Wrapper>
);
}
}

$ yarn add styled-components
github.com/ styled-components/styled-components
$ npm install styled-components

@mixin tone($property, $color, $lighten, $desaturate: $lighten) {
#{$property}: desaturate(lighten($color, $lighten), $desaturate);
}
?????

}

}
Function?

function tone(property, color, lighten, desaturate = lighten) {
#{$property}: desaturate(lighten(color, lighten), desaturate);
}

#{$property}: desaturate(lighten(color, lighten), desaturate);
} return?

return `${property}: ${
desaturate(lighten(color, lighten), desaturate)
}`;
}

desaturate(lighten(color, lighten), desaturate)
}`;
}
??????

A lightweight toolset for writing styles in JavaScript
polished.js.org
by @nikgraf, @bhough and @mxstbr

desaturate(desaturate, lighten(lighten, color))
}`;
}

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

$ yarn add polished
github.com/ styled-components/polished
Come get some 💅 styled-components stickers!

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

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

Ähnlich wie The road to <> styled-components: CSS in component-based systems by Max Stoiber (20)

Mehr von React London 2017

Mehr von React London 2017 (9)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)