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

CSS Modules & React

CSS Modules & React

CSS improved a lot in the last years but for many, it's still one of the hardest parts to handle while developing big web applications. Pre-processed languages like Sass and Less added many new features but we still have to rely on methodologies such as BEM and OOCSS to avoid name collisions.

In ReactJS many people tried to solve these issues using the style attribute or by developing libraries like Radium. Although these approaches fix some of the problems they bring new challenges on their own.

CSS Modules give you the best of both words. Write CSS code using all the tools you love and forget about name collisions.

In this talk, I will explain what CSS Modules are, why they are so good and how you can use them in your project.

Giorgio Polvara

July 24, 2016
Tweet

More Decks by Giorgio Polvara

Other Decks in Programming

Transcript

  1. CSS Modules
    ReactJS
    &

    View full-size slide

  2. GIORGIO POLVARA
    @GPX
    WEB DEVELOPER

    View full-size slide

  3. HTML
    1993 1996

    View full-size slide

  4. HTML CSS
    1993 1996

    View full-size slide

  5. CSS
    TINY
    LANGUAGE

    View full-size slide

  6. IT HAS
    FLAWS
    CSS

    View full-size slide

  7. NO VARIABLES

    View full-size slide

  8. :root {
    --bg-cl: blue;
    }
    .one {
    background-color: var(--bg-cl);
    }
    NO VARIABLES

    View full-size slide

  9. $bg-cl: blue;
    .one {
    background-color: $bg-cl;
    }
    :root {
    --bg-cl: blue;
    }
    .one {
    background-color: var(--bg-cl);
    }
    NO VARIABLES

    View full-size slide

  10. NO VARIABLES
    NO FUNCTIONS

    View full-size slide

  11. button:active {
    color: invert($btn-cl);
    }
    button {
    @include button();
    }
    NO VARIABLES
    NO FUNCTIONS

    View full-size slide

  12. button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    }
    NO VARIABLES
    NO FUNCTIONS
    VENDOR PREFIXES

    View full-size slide

  13. NO VARIABLES
    NO FUNCTIONS
    VENDOR PREFIXES

    View full-size slide

  14. NO VARIABLES
    NO FUNCTIONS
    VENDOR PREFIXES

    View full-size slide

  15. NO VARIABLES
    NO FUNCTIONS
    VENDOR PREFIXES
    SOLVED*
    }

    View full-size slide

  16. BIG
    ONE
    PROBLEM

    View full-size slide

  17. .label {
    font-size: 1.5rem;
    }
    .label {
    background: red;
    }

    View full-size slide

  18. .label {
    font-size: 1.5rem;
    }
    .label {
    background: red;
    }

    View full-size slide

  19. label
    .menu__

    View full-size slide

  20. label
    .menu__ --on

    View full-size slide

  21. label
    .menu__ --on
    label
    .form__

    View full-size slide

  22. label
    .menu__ --on
    label
    .form__
    label
    .hero__ --hover

    View full-size slide

  23. label
    .menu__ --on
    label
    .form__
    label
    .hero__ --hover

    View full-size slide

  24. INLINE STYLE
    THE
    METHOD

    View full-size slide

  25. Christopher

    Chedeau

    @vjeux

    View full-size slide

  26. .label {
    font-size: 1.5rem;
    }

    View full-size slide

  27. var styles = {
    label: {
    fontSize: '1.5rem'
    }
    }
    .label {
    font-size: 1.5rem;
    }

    View full-size slide

  28. var styles = {
    label: {
    fontSize: '1.5rem'
    }
    }

    View full-size slide

  29. var styles = {
    label: {
    fontSize: '1.5rem'
    }
    }
    render () {
    return (

    )
    }

    View full-size slide

  30. var styles = {
    label: {
    fontSize: '1.5rem'
    }
    }
    render () {
    return (

    )
    }

    View full-size slide

  31. var styles = {
    label: {
    fontSize: '1.5rem',
    ':hover': {
    backgroundColor: 'blue'
    }
    }
    }

    View full-size slide

  32. CSS-JS IS WEIRD

    View full-size slide

  33. CSS-JS IS WEIRD
    NO CSS TOOLS

    View full-size slide

  34. CSS-JS IS WEIRD
    NO CSS TOOLS
    PERFORMANCE

    View full-size slide

  35. PERFORMANCE
    Click Me

    View full-size slide

  36. PERFORMANCE
    Click Me

    View full-size slide

  37. PERFORMANCE
    Click Me

    View full-size slide

  38. PERFORMANCE
    onMouseOver
    Click Me

    View full-size slide

  39. PERFORMANCE
    onMouseOver
    updateStyles()
    Click Me

    View full-size slide

  40. PERFORMANCE
    onMouseOver
    updateStyles()
    Virtual DOM
    Click Me

    View full-size slide

  41. PERFORMANCE
    onMouseOver
    updateStyles()
    Virtual DOM
    DOM Changes
    Click Me

    View full-size slide

  42. PERFORMANCE
    onMouseOver
    updateStyles()
    Virtual DOM
    DOM Changes
    onMouseOut
    updateStyles()
    Virtual DOM
    DOM Changes

    View full-size slide

  43. PERFORMANCE
    Click Me

    View full-size slide

  44. PERFORMANCE
    Click Me
    Click Me
    Click Me
    Click Me
    Click Me
    Click Me
    Click Me
    Click Me
    Click Me

    View full-size slide

  45. CSS-JS IS WEIRD
    NO CSS TOOLS
    PERFORMANCE

    View full-size slide

  46. .label {
    font-size: 1.5rem;
    }

    View full-size slide

  47. .label {
    font-size: 1.5rem;
    }
    menu.css

    View full-size slide

  48. .label {
    font-size: 1.5rem;
    }
    render () {
    return (

    )
    }
    menu.css
    menu.js

    View full-size slide

  49. .label {
    font-size: 1.5rem;
    }
    import styles from './menu.css';
    render () {
    return (

    )
    }
    menu.css
    menu.js

    View full-size slide

  50. .label {
    font-size: 1.5rem;
    }
    import styles from './menu.css';
    render () {
    return (

    )
    }
    menu.css
    menu.js

    View full-size slide

  51. import styles from './menu.css';
    render () {
    return (

    )
    }

    View full-size slide

  52. import styles from './menu.css';
    render () {
    return (

    )
    }

    View full-size slide

  53. .label {
    font-size: 1.5rem;
    }
    .label {
    color: #bada55;
    }
    .label {
    font-weight: bold;
    }

    View full-size slide

  54. .label {
    font-size: 1.5rem;
    }
    menu.css
    .label {
    color: #bada55;
    }
    hero.css
    .label {
    font-weight: bold;
    }
    form.css

    View full-size slide

  55. .label {
    font-size: 1.5rem;
    }
    menu.css
    .label {
    color: #bada55;
    }
    hero.css
    .label {
    font-weight: bold;
    }
    form.css
    .hero_label_123ab {
    color: #bada55;
    }
    .menu_label_456cd {
    font-size: 1.5rem;
    }
    .form_label_789ef {
    font-weight: bold;
    }
    bundle.css

    View full-size slide

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

    View full-size slide

  57. .className {
    color: green;
    background: red;
    }
    .otherClassName {
    composes: className;
    color: yellow;
    }
    .otherClassName {
    composes: className from "./style.css";
    color: yellow;
    }

    View full-size slide

  58. :global(.my-class) > .localClass {
    color: red;
    }
    :global {
    @keyframes globalAnimation {
    to { color: blue; }
    }
    }

    View full-size slide

  59. .label {
    font-size: 1.5rem;
    }

    View full-size slide

  60. .label {
    font-size: 1.5rem;
    }
    .label:hover {
    color: red;
    }

    View full-size slide

  61. .label {
    font-size: 1.5rem;
    }
    .label:hover {
    color: red;
    }
    .pointer + .label {
    cursor: pointer;
    }

    View full-size slide

  62. .label {
    font-size: 1.5rem;
    }
    .label:hover {
    color: red;
    }
    .pointer + .label {
    cursor: pointer;
    }
    .item {
    color: $brand;
    &:hover {
    color: invert($brand);
    }
    }

    View full-size slide

  63. .label {
    font-size: 1.5rem;
    }
    .label:hover {
    color: red;
    }
    .pointer + .label {
    cursor: pointer;
    }
    .item {
    color: $brand;
    &:hover {
    color: invert($brand);
    }
    }
    .pane {
    display: flex;
    }

    View full-size slide

  64. CSS-JS IS WEIRD
    NO CSS TOOLS
    PERFORMANCE

    View full-size slide

  65. CSS-JS IS WEIRD
    NO CSS TOOLS
    PERFORMANCE

    View full-size slide

  66. CSS-JS IS WEIRD
    NO CSS TOOLS
    PERFORMANCE

    View full-size slide

  67. CSS-JS IS WEIRD
    NO CSS TOOLS
    PERFORMANCE

    View full-size slide

  68. Jack

    Franklin

    JavaScript Playground

    bit.ly/2anU8fF

    View full-size slide