A WIP guide on how to setup styles for a new block in an OOCSS / BEM / SMACSSish modular architecture.

gistfile1.scss

/* ==========================================================================
   Block Title
   ========================================================================== */


/**
 * Markdown Example (HAML)
 *
 * %div.block_modifiers
 *  %header.block--element_modifiers
 *    %a{:href => "#"} Some Link
 */


// If the block or any of it's elements can have modifiers, they 
//  should be initialized with a class attribute selector here.

[class*="block"] {}

[class*="block--element"] {}


// Non-modifiable elements, if any, should come next.

.block--element2 {}
.block--element3 {}


/* --------------------------------------------------------------------------
   Block Modifiers
   -------------------------------------------------------------------------- */

// Next define your modifiers using the exact class selector.

.block__modifer {}
.block__modifer2 {}

.block--element__modifer {}