Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS in JS

CSS in JS

In this talk we will go through the main problems with CSS at scale and we will see some interesting JavaScript-based solutions, from Inline Styles to CSS Modules. Are you ready to enter the magical world of CSS in JS?

Michele Bertoli

April 28, 2016
Tweet

More Decks by Michele Bertoli

Other Decks in Programming

Transcript

  1. CSS in JS
    @MicheleBertoli

    View full-size slide

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

    View full-size slide

  3. MicheleBertoli/css-in-js

    View full-size slide

  4. - Give it five minutes
    - Unlearn everything
    - Components
    Mindset

    View full-size slide

  5. Cascading Style Sheets

    View full-size slide

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

    View full-size slide

  7. Inline Styles

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. Aphrodite
    Inline Styles that work.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. const sheet = cssx();
    sheet.add(<br/>.button {<br/>color: blue;<br/>}<br/>);

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. .JoFm3I_KMlvnoKpksAd60 {
    color: red;
    }
    Yo;

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. @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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. Any Questions?

    View full-size slide