John Albin says that you start with SMACSS and realize that something is missing. That's where BEM comes in handy.
SMACSS:
1 Base
2 Layout
3 Components
BEM (these all fit under the SMACSS Components category)
3.1 Component
.flower
3.2 Element (different sub thing)
.flower__petals
3.3 modifier (slightly different thing)
.flower--rose
3.4 state
.flower:hover
.flower:is-moving
@media (min-width: 48em) {.flower}
3.5 skin
This is when you want to change a whole look with just a selector - like change the colors on the whole theme
Examples:
.the-component--modifer
.the-component__an-element
.the-component.is-state
.the-component:hover
@media all {.the-component {}}
.the-skin .the-component
File Organization
> sass
_init
_mixins
> base
_normalize
> components
> layouts
styles-ie8.scss
styles.scss
Most everything will live in the components directory.
File names are the names of the class selectors.
Misc:
Don't worry about the names you give, they don't have to be perfect; don't spend much time trying to get names just right.