Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Well-Designed Development: Sass for Engineers

Well-Designed Development: Sass for Engineers

Presented at HTML5 Dev Conf in San Francisco, October 2014

Smith Schwartz

October 21, 2014

More Decks by Smith Schwartz

Other Decks in Technology


  1. Layout ( .l-layoutname ) ! Layout classes should only define

    the structural presentation of container elements. Specify size and position apart from the site skin. (.l-full-width) ! Module ( .m-modulename ) ! Modules generally represent the core functionality of each element on the page. (.m-story) ! Module Component (.m-modulename--component ) ! This is used for the subelements inside a self contained module. (.m-story—copy)
  2. Sub-Module ( .m-modulename_submodule ) ! These are variants of a

    module that are different enough to require a submodule. Extension of the core module. (m-follow_twitter) ! *potential removal of this category ! Module Modifier ( .m-modulename.mm-modifiername ) ! This is used for small chainable changes to a module. Usually combined with module. (.mm-has-svg) ! State ( .is-statename ) ! State classes are used to represent different states of a module, not changes to the module. (.is-disabled)