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

BEM - A simple CSS methodology

BEM - A simple CSS methodology

A short introduction to the BEM methodology for writing CSS.

Matheus Richard

March 19, 2020
Tweet

More Decks by Matheus Richard

Other Decks in Programming

Transcript

  1. BEM
    Easy. Modular. Flexible.

    View Slide

  2. What comes to your mind
    when you think of CSS?

    View Slide

  3. View Slide

  4. And CSS in a big project?

    View Slide

  5. View Slide

  6. Why?

    View Slide

  7. Why do we have a low bar
    in terms of CSS code
    quality?

    View Slide

  8. Web History
    ● Everything was designed to share
    documents
    ● CSS had a different intention
    ● Web apps became a thing

    View Slide

  9. Several problems

    View Slide

  10. Inline CSS
    Code duplication
    Browser incompatibility

    View Slide

  11. View Slide

  12. Goals
    ● Reuse code
    ● Organization
    ● Standardization
    ● Modularization
    ● Simplicity

    View Slide

  13. BEM
    Block__Element--Modifier

    View Slide

  14. Block
    Standalone entity that
    is meaningful on its
    own.

    View Slide

  15. Block Naming
    Block names may
    consist of Latin letters,
    digits, and dashes

    View Slide

  16. Element
    A part of a block that
    has no standalone
    meaning and is
    semantically tied to its
    block

    View Slide

  17. Element
    An element CSS class
    is formed as block
    name plus two
    underscores plus
    element name

    View Slide

  18. View Slide

  19. Element
    An element CSS class
    is formed as block
    name plus two
    underscores plus
    element name

    View Slide

  20. Element
    An element CSS class
    is formed as block
    name plus two
    underscores plus
    element name

    View Slide

  21. Modifier
    A flag on a block or
    element. Use them to
    change appearance or
    behavior.

    View Slide

  22. Modifier Naming
    A modifier CSS class
    is formed as block’s or
    element’s name plus
    two dashes

    View Slide

  23. Modifier HTML
    Remember that
    modifiers only carry
    modifications!

    View Slide

  24. Rule of thumb
    Use meaningful
    names

    View Slide

  25. View Slide

  26. Benefits

    View Slide

  27. Modularity
    ● Block styles are independent. No
    cascading problems.
    ● You also get the ability to transfer
    blocks from your finished projects to
    new ones.

    View Slide

  28. Reusability
    ● Composing independent blocks in
    different ways, and reusing them
    intelligently, reduces the amount of CSS
    code that you will have to maintain.
    ● You can build a library of blocks.

    View Slide

  29. Structure
    ● BEM methodology gives your CSS
    code a solid structure that remains
    simple and easy to understand.

    View Slide

  30. Easy
    ● Only three core elements
    ● No 3rd-party library needed
    ● You can start applying it now

    View Slide

  31. That’s it
    Feel free to ask any question

    View Slide

  32. That was just the basics...
    ● https://en.bem.info/methodology/quick
    -start/
    ● http://getbem.com/introduction/

    View Slide