1 of 7

BEM, SMACSS, Aesthetic SASS

SASS/SCSS/CSS Conventions

2 of 7

BEM… (Block, Element, Modifier)

.article { (block)� Padding: .5rem;� &__title {� Text-transform: uppercase;� Border: 2px solid green;� &--featured {� Font-size: 4rem;� }� }� &__description {� Border: 2px solid blue;� }� &__read-more {� Background-color: green;� Border: 2px solid lightblue; � }�}

ARTICLE TITLE

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec velit neque,

Read More

3 of 7

BEM - Pros and Cons

PROS

  • Highly Scalable
  • Very modular
  • Easily Maintainable
  • Decreases Specificity

CONS

  • Different Mental Model
  • Can cause LONG class names
  • Can cause Multiple LONG class names

4 of 7

SMACSS

Base� - Base elements (html, a, img, input, etc.)

Layout� - Layout elements (header, footer, article)

Module� - Module elements (most of your styles)

State� - State elements (is-active, is-hidden, :hover, :focus etc.)

Theme� - Theme specific elements (colors, typography, etc.)

​

5 of 7

SMACSS - Pros and Cons

PROS

  • Ease of reading
  • Great for Newcomers to SCSS conventions
  • Also Highly Scalable

CONS

  • Can cause specificity problems
  • Deep level CSS
  • Where do things live?

​

6 of 7

Aesthetic SASS

  • base/ - contains global styles, such as resets, typography, colors, etc.
  • components/ - contains each self-contained component in its own .scss partial
  • layout/ - contains styling for larger layout components; e.g. nav, header, footer, etc.
  • pages/ - contains page-specific styling, if necessary
  • themes/ - contains styling for different themes
  • utils/ - contains global mixins, functions, helper selectors, etc.
  • vendors/ - contains 3rd-party styles, mixins, etc.
  • main.scss || style.scss - output file that brings together all of the above parts

7 of 7

Crayola Naming Convention

Name colors uniquely.

That is all.

http://chir.ag/projects/name-that-color/