How to Organize CSS with BEM?

Question

I just learned about BEM, and I want to organize my CSS with it. How do I organize my CSS with BEM? The BEM website doesn't tell you how to organize your CSS with BEM; the website just tells you how to name your BLOCKS, ELEMENTS, and MODIFIERS.

Also, should I use a different style sheet per web page, or should I use SASS and merge all my scss.files into one CSS file?

/********************************
BLOCKS 
********************************/



/********************************
ELEMENTS
********************************/


/********************************
MODIFIERS
********************************/


or

/********************************
HEADER
********************************/


/********************************
MAIN SECTION 
********************************/


/********************************
FOOTER
********************************/



/********************************
MEDIA QUERIES
********************************/

Answer 1

Try different approaches, and use whatever works best for you. Don't be afraid to experiment. If you're already comfortable with SASS, and want some inspiration, here's my usual strategy:

/* file: _block-name.scss */

.block { // selector for the block

  font-size: 12px; // example property

  &__element { // nested selector, equivalent to: 'block__element'

    background-color: white; // example property

    &--modifier { // nested selector, equivalent to: 'block__element--modifier'

      border: 2px solid red; // example property

    }

  }

}

Every block level element has its own file as an .scss partial. Nested selectors (provided by SASS) are used to target all elements and modifiers of that block.

This approach lends itself well to component-based frameworks like React (where each component is assigned its own BEM block-level selector), but it also works standalone.

If you look up BEM SASS in your search engine of choice you can find lots of other (perfectly valid) approaches to organizing your CSS with BEM. :)