CSS in 2016

1. Precompiler

1.1. LESS

1.2. SASS

1.3. Stylus

1.4. ...

2. Vanilla

2.1. CSS 3.0

2.2. IE

3. Probleme

3.1. Globaler Namespace

3.2. Variablen / Konstanten

3.3. Abhaengigkeiten

3.4. Isolation

3.5. Nicht-deterministisch

4. https://www.mindmeister.com/711602791

5. CSS in JS

5.1. Blogpost von @jveux https://speakerdeck.com/vjeux/react-css-in-js

5.2. CSS Definition als JS Objekt

5.2.1. var styles = {  base: {    color: '#fff',    background: cssVars.primaryBackground,    ':hover': {      background: color('cssVars.primaryBackground').lighten(0.2).hexString()    }  },  primary: {    background: cssVars.primaryBackground  },  warning: {    background: '#FF4136'  } };

5.3. Rendern als Inline styles

5.3.1. Media Query

5.3.2. Pseudo Selectors

5.3.2.1. :hover

5.3.2.2. :before

5.3.2.3. ...

5.4. Frameworks https://github.com/FormidableLabs/radium/tree/master/docs/comparison https://github.com/MicheleBertoli/css-in-js

5.4.1. Inline Styles + Fixes

5.4.2. Convert to CSS

5.4.2.1. Extrahieren

5.4.2.2. <style />

5.4.3. Mix

6. CSS Modules

6.1. Dokumentation https://github.com/css-modules/css-modules

6.2. Alles lokal by default

6.3. Mapping von lokal -> global

6.4. Komposition

6.5. Funktioniert mit Precompilern