-
Notifications
You must be signed in to change notification settings - Fork 3
SassConf talk proposal: Living Styleguide
The purpose of this talk is to define what a living styleguide is, explain the rationale behind living styleguides, then compare two different approaches how they can be implemented in different team settings, and finally highlight what makes creating Sass styleguide development special.
For me a living styleguide is an exemplary presentation & documentation of all the modules & components of a web application using its production CSS code.
The benefits of a living styleguide are quickly explained. These are the 3 major points I want to touch upon:
- it promotes code reuse, which is good for consistency, code complexity/maintainability and also CSS performance
- it improves communication between roles (e.g. designers & developers or frontend & backend developers), which has positive effect on team morale and development speed
- it can act as a sort of "test suite" to increase confidence in the codebase, support refactorings, and to improve x-browser compatibility
As with any kind of documentation the problems are: Who creates it? Who keeps it up to date? For that I want to compare two different approaches 1.) Declarative documentation => Example markup are is created for all modules (KSS, StyleDocco). This is relatively simple in the beginning, but also quite verbose with lot's of duplications, which makes it hard to maintain in the long run. 2.) Automatic extraction based on conventions => Styleguide information is conveniently derived from the codebase (Smurfville, perseus. Unfortunately this works only for narrow use cases and is quite difficult to develop.
The two differnt approaches work for different settings. The declartive approach works best in teams with a dedicated frontend prototyper role, but tends to be a little waterfallish, while extraction can work better in a agile, distributed team of full-stack developers.
Finally, I want to highlight some areas where a living styleguide based on Sass is different based on my experience developing the styleguide functionality that is part of the Smurfville gem, which I want to extract into a more focused sass_color_styleguide gem.