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