BEM - A simple CSS methodology

A short introduction to the BEM methodology for writing CSS.

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