<h1>cheat sheet for smacss with sass and bem</h1>based on [this article](https://medium.com/objects-in-space/f6f404727) by [Andrew Colclough](https://twitter.com/wtc) (which refers to [these other sources](#sources)) <h2>pattern</h2> ```html <div class="vehicle--car"> <div class="vehicle--car__engine"> <div class="engine">...</div> <div class="engine is-active">...</div> <div class="engine--is-last">...</div> </div> </div> ``` * a module name contains its base module's name * a module is defined in its base module's css/sass file * modules define their style and the positioning of nested modules * global states are defined globally * module specific states are defined inside the module <h2>directory structure</h2> <pre> css/ |-- base/ | |-- base.scss | |-- _fonts.scss | |-- _colors.scss | |-- _mixins.scss |-- states/ | |-- states.scss |-- modules/ | |-- vehicle.scss | |-- engine.scss </pre> <h2 id="states.scss">states.scss</h2> ```css .is-active { ... } /*global state*/ ``` <h2 id="vehicle.scss">vehicle.scss</h2> ```css .vehicle { ... } /*style of a module*/ .vehicle--car { @extend .vehicle; ... } /*style of a specific module*/ .vehicle--car__engine { ... } /*positioning of a nested module*/ ``` <h2 id="engine.scss">engine.scss</h2> ```css .engine { ... } /*style of another module*/ .engine--is-last { ... } /*module specific state*/ ``` <h2 id="sources">sources</h2> * http://smacss.com/ * http://bem.info/ * http://webuild.envato.com/blog/how-to-scale-and-maintain-legacy-css-with-sass-and-smacss/ * https://medium.com/objects-in-space/f6f404727