ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo
SUIT CSS
VS.
BEM
ADAM KUDRNA { FRONTENDISTI 12. 6. 2019 }
CSS METHODOLOGIES
? OOCSS
? SMACSS
? Atomic Design?
? BEM
? SUIT CSS
.block__element--modifier
BEM
.block__element
BEM
__one-more__another
?
$(".js-block").addClass("block--state-active")
BEM
?
.Component-descendant¡ª-modifier
SUIT CSS
.Component.is-active
.namespace-Component
.Component-descendantDescendant
SUIT CSS & BEM:
COMMON PROBLEMS
.block__element--modifier
.Component-descendant¡ª-modifier
SUIT CSS/BEM
.block--modifier .block__element
.Component¡ª-modifier .Component-
descendant
<div class="component another-component">
SUIT CSS/BEM
<div class="object component utility">
ITCSS
.component .another-component
SUIT CSS/BEM
.another-component--modifier
.component__place-for-another-component
OK, BEM¡­
.block__element--state-modifier
BEM
.c-block__element--state-modifier
BEMIT
SUIT CSS BEM¡Á
+ .is/has-classes
+ .namespace-prefixes
SUIT CSS BEM
+ .is/has-classes
+ .namespace-prefixes
¡ú https://frontend.garden
@FRONTENDGARDEN | @ADAMKUDRNA | ADAMKUDRNA.CZ
D?KY!

More Related Content