Tweet
Tweet

Slide 1

Slide 1 text

CSS in JS @MicheleBertoli

Slide 2

Slide 2 text

Michele (Mee-keh-leh) Front End Developer at YPlan Member of WEBdeBS Follow me @MicheleBertoli I’ve got the CSSinJS skill on LinkedIn

Slide 3

Slide 3 text

MicheleBertoli/css-in-js

Slide 4

Slide 4 text

- Give it five minutes - Unlearn everything - Components Mindset

Slide 5

Slide 5 text

Cascading Style Sheets

Slide 6

Slide 6 text

Problems with CSS at scale (vjeux) - Global Namespace - Dependencies - Dead Code Elimination - Minification - Sharing Constants - Non-deterministic Resolution - Isolation

Slide 7

Slide 7 text

Inline Styles

Slide 8

Slide 8 text

const divStyle = { color: 'white', backgroundImage: `url(${imgUrl})`, WebkitTransition: 'all', msTransition: 'all', }; ReactDOM.render(
Hello World!
, mountNode );

Slide 9

Slide 9 text

Pros - Recompute styles - Object literals - Application state - Testing

Slide 10

Slide 10 text

Cons - Pseudo classes/elements - Media queries - Style fallbacks - Animations - !important - Separation of concerns - Performance (?)

Slide 11

Slide 11 text

Debugging

Slide 12

Slide 12 text

Aphrodite

Slide 13

Slide 13 text

import { StyleSheet, css } from 'aphrodite'; const styles = StyleSheet.create({ btn: { color: 'red' } }); el.innerHTML = `Yo`;

Slide 14

Slide 14 text

const styles = StyleSheet.create({ hover: { ':hover': { color: 'red' } }, small: { '@media (max-width: 600px)': { color: 'red' } }, });

Slide 15

Slide 15 text

Aphrodite Inline Styles that work.

Slide 16

Slide 16 text

Features - Pseudo selectors - Media queries - Smart style injection - Autoprefixer included

Slide 17

Slide 17 text

CSSX

Slide 18

Slide 18 text

const sheet = cssx(); const button = sheet.add('.button', { color: 'red', }); button.update({ color: 'green', });

Slide 19

Slide 19 text

const sheet = cssx(); sheet.add( .button { color: blue; } );

Slide 20

Slide 20 text

CSSX CSSX is a set of tools that will help you write vanilla CSS in JavaScript.

Slide 21

Slide 21 text

Benefits - Avoid additional “state” classes - No interaction with the DOM - Real dynamic CSS

Slide 22

Slide 22 text

CSS Modules

Slide 23

Slide 23 text

// button.css .common { color: red; } // button.js import styles from "./button.css"; el.innerHTML = `Yo`;

Slide 24

Slide 24 text

.JoFm3I_KMlvnoKpksAd60 { color: red; } Yo;

Slide 25

Slide 25 text

CSS Modules A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.

Slide 26

Slide 26 text

Composition .className { color: green; background: red; } .otherClassName { composes: className; color: yellow; }

Slide 27

Slide 27 text

Webpack module.exports = { module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' } ] } };

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Bonus

Slide 30

Slide 30 text

@media screen and (min-width: 48em) { .f3-ns { font-size: 1.5rem; } } .f4 { font-size: 1.25rem; } .mb0 { margin-bottom: 0; } .fw6 { font-weight: 600; }

Responsive

Slide 31

Slide 31 text

Atomic CSS The bad parts: - Too many classes - Similar to inline styles - Hard to maintain The good parts: - Quick prototyping - CSS file size

Slide 32

Slide 32 text

Atomic CSS Modules .title { composes: fw6 f4 f3-ns from './fonts.css'; composes: mb0 from './margins.css'; }

Responsive

Slide 33

Slide 33 text

The End

Slide 34

Slide 34 text

Recap - Use the right tool, no matter if it breaks the rules - Inline styles vs local scope - Appearance vs state - Have fun :)

Slide 35

Slide 35 text

Any Questions?