CSS in 2016
af Kevin Mees
![Mind Map: CSS in 2016](https://www.mindmeister.com/image/xlarge/711602791/mind-map-css-in-2016.png)
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