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
0over0pxwhere possible. - Avoid
!importantlike the plague. - Use 3 character hexadecimal notation where possible, e.g.
#fffvs.#ffffff. - Use lower-case alphabetical characters and uppercase, it's easier to tell the difference between characters in
#33e33ethan#33E33E. - Style with classes, reserve IDs for JavaScript hooks.
- Use
hyphenated-namesfor classes instead ofsnake_caseorCamelCase. 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