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
over0px
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 ofsnake_case
orCamelCase
. 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