CSS in 2016

Get Started. It's Free
or sign up with your email address
Rocket clouds
CSS in 2016 by Mind Map: 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. CSS in JS

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

3.2. CSS Definition als JS Objekt

3.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'  } };

3.3. Rendern als Inline styles

3.3.1. Media Query

3.3.2. Pseudo Selectors

3.3.2.1. :hover

3.3.2.2. :before

3.3.2.3. ...

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

3.4.1. Inline Styles + Fixes

3.4.2. Convert to CSS

3.4.2.1. Extrahieren

3.4.2.2. <style />

3.4.3. Mix

4. CSS Modules

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

4.2. Alles lokal by default

4.3. Mapping von lokal -> global

4.4. Komposition

4.5. Funktioniert mit Precompilern

5. Probleme

5.1. Globaler Namespace

5.2. Variablen / Konstanten

5.3. Abhaengigkeiten

5.4. Isolation

5.5. Nicht-deterministisch

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