unified-styling-language

发表于   |   分类于   |   阅读次数

some description of css-in-js

original

Scoped styles

  • automatically generate className
  • no selectors clashing
  • generating real css, not inline styles
  • describe our styles as component(like styled components

Critical CSS

  • providing only those styles required to render the current page

is now baked in, not opt-in？

Smarter optimisations

  • function-like classes to keep bundle lean(Atomic css
1
2
3
<div class="Bgc(#0280ae.5) C(#fff) P(20px)">
  Atomic CSS
</div>
  • devide styles into different classes and combine them(styletron
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
styletron.injectDeclaration({
  prop: 'color',
  val: 'red',
  media: '(min-width: 800px)'
});
// → 'a'
injectStyle(styletron, {
  color: 'red',
  display: 'inline-block'
});
// → 'a d'
injectStyle(styletron, {
  color: 'red',
  fontSize: '1.6em'
});
// → 'a e'

Package management

  • css dpepending
  • make css as a library (polished
1
2
3
4
5
6
7
8
import { clearFix, animation } from 'polished'
const styles = {
  ...clearFix,
  ...animation,
  fontFamily: 'Comic Sans MS',
  color: 'blue'
}

Non-browser styling

  • not only for react-dom

Conclusion

We may not be using CSS-in-JS today, but it’s quite possible that a compelling reason to switch could arise sooner than we think