Well-Designed Development: Sass for Engineers

Well-Designed Development: Sass for Engineers

Presented at HTML5 Dev Conf in San Francisco, October 2014

Fdb6cf3b7937066a7cb98b154a6a2717?s=128

Smith Schwartz

October 21, 2014
Tweet

Transcript

  1. 2.
  2. 6.
  3. 7.
  4. 8.
  5. 9.
  6. 13.
  7. 17.

    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)
  8. 18.

    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)
  9. 20.
  10. 21.
  11. 26.
  12. 27.
  13. 28.