The good, the bad and the ugly
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 💅
// 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};
`
✅
❌
.btn--submit-form ==> .btn--primary
.btn--read-more ==> .btn--secondary
.box--green ==> .box--prominent
.card ==> .credit-card-image
<div class="box
box--warning
box--small
box--previous
hide
formfield__input--error
mb">
Error-message
</div>
.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;
}
// bad news:
border-bottom: none;
padding: 0;
float: none;
margin-left: 0;
.site-nav > li:hover .dropdown {
position: absolute;
top: 37px;
left: 0;
}
🤮
// Unødvendig spesifikt
ul.nav {}
a.button {}
div.header {}
ul.nav li.active a {}
div.header a.logo img {}
.content ul.features a.button {}
eller hvorfor ikke bare kjøre css-i-css
Det er det egentlige problemet vi prøver å løse
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;
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
brew install yarn
CSS | Inline styles | CSS-Modules | S-C / Emotion | |
---|---|---|---|---|
Støtter alt i CSS | ✅ | ❌ | ✅ | ✅ |
Støtter global CSS | ✅ | ❌ | ✅ | ✅ |
Isolert | ❌ | ✅ | ✅ | ✅ |
Samlokalisert | ❌ | ✅ | 😐 | ✅ |
Enkel å overstyre | ✅ | ❌ | ✅ | ✅ |
Theming | 😐 | ❌ | ❌ | ✅ |
Kan rendres på server | ✅ | ✅ | ✅ | ✅ |
Enkelt å gi navn til ting | ❌ | ✅ | 😐 | 😐 |