If you are using any methodology to organise your CSS, it's probably BEM. SUIT CSS is a less known, yet more powerful methodology. How does BEM stand against SUIT CSS?

1. SUIT CSS
VS.
BEM
ADAM KUDRNA { FRONTENDISTI 12. 6. 2019 }

2. CSS METHODOLOGIES
◾ OOCSS
◾ SMACSS
◾ Atomic Design
◾ BEM
◾ SUIT CSS

3. .block__element--modifier
BEM

4. .block__element
BEM
__one-more__another
🙈

5. $(".js-block").addClass("block--state-active")
BEM
🙈

6. .Component-descendant—-modifier
SUIT CSS
.Component.is-active
.namespace-Component
.Component-descendantDescendant

7. SUIT CSS & BEM:
COMMON PROBLEMS

8. .block__element--modifier
.Component-descendant—-modifier
SUIT CSS/BEM

9. .block--modifier .block__element
.Component—-modifier .Component-
descendant

10. <div class="component another-component">
SUIT CSS/BEM

11. <div class="object component utility">

12. ITCSS

13. .component .another-component
SUIT CSS/BEM

14. .another-component--modifier
.component__place-for-another-component

15. OK, BEM…

16. .block__element--state-modifier
BEM

17. .c-block__element--state-modifier
BEMIT

18. SUIT CSS BEM×
+ .is/has-classes
+ .namespace-prefixes

19. SUIT CSS BEM
+ .is/has-classes
+ .namespace-prefixes

20. → https://frontend.garden

21. @FRONTENDGARDEN | @ADAMKUDRNA | ADAMKUDRNA.CZ
DÍKY!