CSS/SCSS Style Guide

I think it would be a good idea to provide a style guide, even if it's not strictly enforced, for maintainability sake. There's an issue open for a JavaScript Style Guide (#13224 (closed)), and we have style guides for Rails, the documentation, etc.

There are quite a few common rules between the official style guides of Google, Airbnb, and Thoughtbot:

  • Always use 0 over 0px where possible.
  • Avoid !important like the plague.
  • Use 3 character hexadecimal notation where possible, e.g. #fff vs. #ffffff.
  • Use lower-case alphabetical characters and uppercase, it's easier to tell the difference between characters in #33e33e than #33E33E.
  • Style with classes, reserve IDs for JavaScript hooks.
  • Use hyphenated-names for classes instead of snake_case or CamelCase. This is so you can avoid case sensitivity issues, plus it's easier to type a hyphen than an underscore.

As for tracking consistency in the codebase, I've found the scss_lint gem to be pretty good. Unfortunately, it doesn't support an autocorrect mode due to the Ruby SCSS parser.

/cc @rspeicher @jschatz1