Documentation
Sass Comments
Be intentional when you use //
(silent comments) versus /* */
(which are preserved in the CSS output). When in doubt, use //
.
KSS
Use KSS for documentation. More information on KSS can be found on the official site.
Example
// Button
//
// Various buttons on the site.
//
// Markup
// <a class="button ">
// <span class="button__text">Link</span
// </a>
//
// .button-modified - A button with a different style.
//
//
// Styleguide component.button
.button {
}
.button-modified {
}
Rationale
KSS is the most common CSS documentation method to date. While it’s not perfect, the generated documentation can be modified through templates.