Organising Stylesheets and the BEM methodology

Transcript

1. Organising stylesheets
   and the BEM methodology
   Benoît Burgener @LeBenLeBen WebMardi 4 nov. 2014 Liip LS
   

   View Slide

2. Front-end environments
   becomes bigger every day
   

   View Slide

3. There’s hundreds of devices using various browsers
   Image source: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
   

   View Slide

4. We have to think and plan

   before coding
   

   View Slide

5. Split into modules
   Review the designs to find patterns
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. Challenge the design
    Does it really worth it?
    Image source: http://brushfirecreative.com/from-designer-to-developer/
    

    View Slide

13. Not the content
    Describe the styling purpose
    

    View Slide

14. 
    
    John
    Doe
    
    John Doe
    

    View Slide

15. 
    
    John
    Doe
    
    John Doe
    

    View Slide

16. Image source: http://www.stubbornella.org/content/2010/06/21/css-granularity-architecture/
    

    View Slide

17. Reduce specificity
    Simplify selectors
    

    View Slide

18. • CSS declarations precedence is a nightmare
    • Never style using IDs
    • If you really have to, use
    • Do not include in your declarations
    • Use classes!
    • And don’t nest them for god sake
    [id="#shame"]
    

    View Slide

19. Name smartly
    Think reusable
    

    View Slide

20. Too precise or too vague
    .button-red
    .box-bordered
    .strong
    .small
    .span-240px
    

    View Slide

21. Good, reusable naming
    .button-primary
    .box-alt
    .button-strong
    .text-small
    .span-3
    

    View Slide

22. Split the code
    The power of preprocessors
    

    View Slide

23. • Settings variables
    • Tools mixins, functions
    • Generic reset, normalize
    • Base body, h1, p, …
    • Objects .media, .tabs, .list, …
    • Status .is-active, .is-hidden, …
    

    View Slide

24. Recap
    • Stop thinking about pages, think modules
    • Solve problems, challenge the design if you need to
    • Describe the styling purpose, not the content
    • Reduce specificity of your selectors
    • Name elements insightfully
    • Split the code into multiple files easily findable
    

    View Slide

25. B.E.M.
    

    View Slide

26. Yandex
    « BEM is a methodology of web projects
    development, that allows you to divide an interface
    into logically independent blocks. »
    

    View Slide

27. Block
    Element
    Modifier
    
    
    
    

    View Slide

28. View Slide

29. Click me
    

    View Slide

30. 
    
    
    
    
    Hello there
    
    
    

    View Slide

31. The problems
    • Difficult to use with some CMS
    • Weird to couple with a framework like Bootstrap
    • Short list of resources
    

    View Slide

32. Harry Roberts
    csswizardry.com
    @csswizardry
    

    View Slide

33. « Inuit.css is a Sass based, Object Oriented
    framework built on a BEM-style naming
    convention. »
    

    View Slide

34. block
    buttons
    flag
    images
    list-bare
    list-block
    list-inline
    list-ui
    media
    normalize
    pack
    print
    responsive
    spacing
    spacing-responsive
    tables
    tabs
    widths
    

    View Slide

35. Questions?
    Or any experience you want to share?
    

    View Slide

36. Thanks!
    @LeBenLeBen
    

    View Slide