UX designers can be difficult

BEM -- Block Element Modifier

Block:

Encapsulates a standalone entity. This entity is meaningful on its own.

.container .menu .checkbox .menu .list...

Element:

Parts of a block. Have NO standalone meaning. Any element is semantically tied to its block.
Block name plus two underscores plus element name.

.block__elem .list__item header__title

Modifier:

Flags on blocks or elements. Use them to change appearance, behavior or state.
Block’s or element’s name plus two dashes.

.block--mod or .block__elem--mod

Setup for Ruby on Rails

• Delete all the magic sprocket links from application.scss -actually delete everything in that file-, and import the files one by one with sass imports. This way you have total control about the order it's imported.

//  generic
@import 'generic/reset';

//  elements -general stuff, general font, color, etc...
@import 'elements/page';

//  objects -containers and wrappers-
@import 'objects/container';

//  components -like forms, inputs and all that-
@import 'components/form';
@import 'components/input';
@import 'components/button';

• Create a generic/reset.rb file with a reset.
• Create an elements/page.rb file with the broad general styles -font-size, body and all that-
• You can do this in the main container -in the main layout- to apply different classes to it.

<div class="<%= ['o-container', *yield(:container_classes)].join(' ') %>">

And then, in the different views:

<% content_for :container_classes, 'o-container--narrow' %>