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. Well-Designed Development Sass for Engineers

  2. None
  3. We style multiple sites with one codebase

  4. Tempest is a publishing platform and CMS for digital magazines

  5. Content focused design for publishers

  6. None
  7. None
  8. None
  9. None
  10. Continuous improvement for point of view publishing

  11. Size of our team

  12. Custom Sass variables and assets

  13. Libsass

  14. Writing good Sass is more than overriding CSS at the

    bottom of a file

  16. Naming conventions

  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)
  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)
  19. Order of properties

  20. None
  21. None
  22. Refactor as we go

  23. Check CSS output (Sassmeister)

  24. Why Sass is a slippery slope

  25. Design and CSS workshops

  26. None
  27. None
  28. None
  29. Design + Engineering JAMBOREE

  30. Good Sass can not exist separately from good design

  31. saydaily.com/2014/09/css-at-say-media ! @smithschwartz