CSS-In-JS
The good, the bad and the ugly
Marius Hauken
Robin Sandborg
&
2001
2018
Tabelldesign og spacer.gif 😭
2001
2018
Eksterne stylesheets 😮
2001
2018
Flash 💥
2001
2018
La oss bare jobbe med print 📖
2001
2018
HTML5 + CSS3 + Responsivt 👌
2001
2018
BEM 👷
2001
2018
OOCSS / Inuit.css 🏃♀️
2001
2018
Skalering? ☠️
2001
2018
CSS-in-JS 💅
12
enkle tips
for bedre CSS
1.
Hold spesifisiteten lav
2.
Bruk variabler
eller theming
// SCSS:
$color-primary: #00a190;
$color-white: #fff;
.button {
background-color: $color-primary;
color: $color-white;
}
// Styled-components
const theme = {
color: {
white: "#fff",
primary: "#00a190",
}
}
const Button = styled.button`
background-color: ${p => p.theme.color.primary};
color: ${p => p.theme.color.white};
`
3.
Klassenavn brukes
kun i én kontekst
4.
Tenk i
komponenter
✅
❌
5.
Tenk nøye
på navngiving
.btn--submit-form ==> .btn--primary
.btn--read-more ==> .btn--secondary
.box--green ==> .box--prominent
.card ==> .credit-card-image
6.
Ikke vær for overivrig med hjelpeklasser
<div class="box
box--warning
box--small
box--previous
hide
formfield__input--error
mb">
Error-message
</div>
7.
Ikke vær overivrig med shorthand-syntax
.btn {
background: red;
}
// Leses av browseren som:
.btn {
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: red;
}
// Gjør heller dette om det er det du mener:
.btn {
background-color: red;
}
8.
Unngå resetting
av stiler
// bad news:
border-bottom: none;
padding: 0;
float: none;
margin-left: 0;
9.
Unngå magic numbers
.site-nav > li:hover .dropdown {
position: absolute;
top: 37px;
left: 0;
}
🤮
10.
Unngå qualified selectors
// Unødvendig spesifikt
ul.nav {}
a.button {}
div.header {}
ul.nav li.active a {}
div.header a.logo img {}
.content ul.features a.button {}
11.
ALDRI bruk
#ID i CSS!
12.
Bli enige i teamet
CSS-i-JS
eller hvorfor ikke bare kjøre css-i-css
CSS var aldri ment til å lage komponentbaserte systemer
Det er det egentlige problemet vi prøver å løse
Når du først jobber i React/Whathaveyou, har du tilgang på mer enn bare klassenavn for å stilsette, hvorfor ikke bruke det?
Isolering av regler
Deling av variabler fra
JS til CSS
import React from 'react';
import CommentItem from './CommentItem';
const Colors = ['#FDD161', '#E8A13D', '#29A4AC', '#445561', '#AFD5D9'];
const Comments = ({comments}) => (
<ul>
{comments.map((comment, index) => (
<CommentItem color={Colors[index % Colors.length]} comment={comment}/>)
)
}
</ul>
);
export default CommentList;
…men med det sagt kan det finnes mange gode grunner for å kjøre vanlig (s)css.
Rockey
https://github.com/tuchk4/awesome-css-in-js
Emotion
styled-components
Aphrodite
styled-jsx
csx
glamor
R Radium
Aesthetic
j2c
git clone https://github.com/staccx/bitshift-css-in-js.git
Kjører ikke yarn?
://brew.sh
brew install yarn
Glamor
En god løsing for CSS:
CSS/ BEM | Inline styles | CSS-Modules | Styled-components | |
---|---|---|---|---|
Støtter alt i CSS | ✅ | ❌ | ✅ | ✅ |
Støtter global CSS | ✅ | ❌ | ✅ | ✅ |
Isolert | ❌ | ✅ | ✅ | ✅ |
Samlokalisert | ❌ | ✅ | 😐 | ✅ |
Enkel å overstyre | ✅ | ❌ | ✅ | ✅ |
Theming | 😐 | ❌ | ❌ | ✅ |
Kan rendres på server | ✅ | ✅ | ✅ | ✅ |
Enkelt å gi navn til ting | ❌ | ✅ | 😐 | 😐 |
CSS-In-JS
By Marius Hauken
CSS-In-JS
- 112