Smacss and bem
-
Upload
joanna-franchetti -
Category
Technology
-
view
174 -
download
1
Transcript of Smacss and bem
smacss and bem
Design Patterns to Improve your CSS
why modular css?Working on a large project?
A complicated layout?
Working with multiple developers/designers?
base rules
module styleslayout stylesstate rules
theme rules
base rules
body, form { margin: 0; padding: 0;}
a { color: #039;}
a:hover { color: #03F; }
Applied to an element using an element selector along with any pseudo-classes.
No class or ID selectors.
Defines default styles for an element
IncludesReset stylesDefault link styles Default font stylesBody backgroundsNever use!important in a
Base style.
module stylesDiscrete components
Modules can be contained within other modules
They can be easily moved about the layout
● Navigation bar
● Carousel
● Dialog
● Widget
● Article
layout rules
‘Major’ components of the page
state rulesAugments and overrides all other styles
Applied to an element or module
● Active/inactive
● Collapsed/Expanded
● Success/Error
B.E.M.
Logical naming structure for your CSS
what is bem? .block {...}
.block__element {...}
.block__element--modifier{...}Block - Element - Modifier
.eventinfo {...}
.eventinfo__title {...}
.eventinfo__image {...}
.eventinfo__date {...}
.eventinfo__detail--location {...}
.eventinfo__detail--time {...}
.eventinfo {...}
.eventinfo__title {...}
.eventinfo__image {...}
.eventinfo__date {...}
.eventinfo__detail--location {...}
.eventinfo__detail--time {...}
give bem a try!
It can seem a bit of an ugly duckling at first, but when
used right, it can be incredibly powerful
@thisisjofrank