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
Tweet

More Decks by Smith Schwartz

Other Decks in Technology

Transcript

  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)