Well-Designed Development: Sass for Engineers

Presented at HTML5 Dev Conf in San Francisco, October 2014

Transcript

1. Well-Designed Development Sass for Engineers
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
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
15. CSS IS AWESOME
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
22. Refactor as we go
23. Check CSS output (Sassmeister)
24. Why Sass is a slippery slope
25. Design and CSS workshops
29. Design + Engineering JAMBOREE
30. Good Sass can not exist separately from good design
31. saydaily.com/2014/09/css-at-say-media ! @smithschwartz