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

Local styling with CSS Modules

Local styling with CSS Modules

CSS is well known for being aggressively global. This very behaviour makes it difficult to scale. Style isolation and dead code elimination are only two of the many problems encountered when working with CSS on large and long-lasting codebases.

That’s why a lot of clever people came up with a lot of clever ideas to make it easier to write locally-scoped, easy-to-test, composable and scalable CSS. Among these ideas, one seems to have gained a lot of traction lately: CSS Modules.

In this talk, we will see what are CSS Modules, what they intend to solve, and how to use them. I think you’ll be surprised how little difference there is between authoring CSS Modules, and preprocessor-powered stylesheets.

Kitty Giraudel

May 20, 2016
Tweet

More Decks by Kitty Giraudel

Other Decks in Technology

Transcript

  1. berlin amsterdam los angeles san francisco singapore
    edenspiekermann_
    Local styling
    with CSS Modules
    @HugoGiraudel
    20 May 2016

    View full-size slide

  2. @HugoGiraudel
    Front-end developer
    Edenspiekermann
    Berlin, Germany

    View full-size slide

  3. Another CSS
    in JS thing?

    View full-size slide

  4. Not about
    making CSS
    dependant on JS
    in the browser

    View full-size slide

  5. About crafting
    a CSS pipeline
    (in JavaScript)

    View full-size slide

  6. “CSS in JS”
    could as well be
    “CSS in Ruby”

    View full-size slide

  7. We had CSS in
    Ruby for years
    with Sass

    View full-size slide

  8. “CSS in JS”
    is reasonable

    View full-size slide

  9. CSS from JS
    in the browser
    would suck

    View full-size slide

  10. Glen Maddern
    Mark Dalgleish
    Tobias Koppers

    View full-size slide

  11. JS-powered
    CSS pipeline

    View full-size slide

  12. Webpack
    Browserify
    JSPM
    & moar…!

    View full-size slide

  13. Fixing (most)
    CSS flaws

    View full-size slide

  14. “CSS isn’t broken”

    View full-size slide

  15. Hahaha.
    Haha.
    Ha.

    View full-size slide

  16. Global
    namespace

    View full-size slide

  17. Dependency
    management

    View full-size slide

  18. Dead code
    elimination

    View full-size slide

  19. Configuration
    sharing

    View full-size slide

  20. Well specified
    but incomplete

    View full-size slide

  21. Fine!
    What is it?

    View full-size slide

  22. A system where
    everything is
    local

    View full-size slide

  23. No more
    global
    namespace

    View full-size slide

  24. Not about
    syntax

    View full-size slide

  25. Consider a
    title

    View full-size slide

  26. No filename
    repetition

    View full-size slide

  27. Not inline
    styles

    View full-size slide

  28. Still classes

    View full-size slide

  29. Configurable
    output

    View full-size slide

  30. css-loader
    ?modules
    &localIdentName=

    [name]__[local]

    View full-size slide

  31. Good ol’
    button

    View full-size slide

  32. Okay, Sass
    first

    View full-size slide

  33. Now, CSS
    Modules

    View full-size slide

  34. Not like
    @extend

    View full-size slide

  35. No selector
    merge

    View full-size slide

  36. Not like
    @mixin

    View full-size slide

  37. No style
    duplication

    View full-size slide

  38. Just class
    composition

    View full-size slide

  39. Dependency
    management

    View full-size slide

  40. Again,
    composes

    View full-size slide

  41. Explicit
    dependencies

    View full-size slide

  42. Sharing
    styles

    View full-size slide

  43. COMPOSE ALL
    THE THINGS!

    View full-size slide

  44. Global
    classes?

    View full-size slide

  45. Shared
    values?

    View full-size slide

  46. Basically
    (local)
    variables

    View full-size slide

  47. Explicit
    dependencies

    View full-size slide

  48. Can be
    renamed

    View full-size slide

  49. But, but, but…

    BEM?

    View full-size slide

  50. Helps with
    global
    namespace

    View full-size slide

  51. Brain power,
    consistency,
    strictness…

    View full-size slide

  52. Not needed
    anymore!

    View full-size slide

  53. But, but, but…

    Webpack?

    View full-size slide

  54. postcss-
    modules

    View full-size slide

  55. Statically
    compiled

    View full-size slide

  56. But, but, but…

    atomic CSS?

    View full-size slide

  57. Perfect
    candidate

    View full-size slide

  58. Compose from
    the stylesheet

    View full-size slide

  59. Have markup
    updated

    View full-size slide

  60. But, but, but…

    Sass?

    View full-size slide

  61. Not mutually
    exclusive

    View full-size slide

  62. Sass makes
    CSS easier to
    write

    View full-size slide

  63. CSS Modules
    make CSS easier
    to maintain

    View full-size slide

  64. Why not both?

    View full-size slide

  65. Let’s sum up

    View full-size slide

  66. JS-powered
    CSS pipeline

    View full-size slide

  67. Everything

    is local

    View full-size slide

  68. Global
    namespace no
    more

    View full-size slide

  69. Pluggable in
    any pipeline

    View full-size slide

  70. berlin amsterdam los angeles san francisco singapore
    edenspiekermann_
    Thank you!
    @HugoGiraudel
    20 May 2016

    View full-size slide