Draft/css coding styleguide

[msecret]

v0.1.0

Google doc for commenting: https://docs.google.com/a/gsa.gov/document/d/1t6Rjslq9I20reFF3xfW3FVeV2NWFaDKauDj_LQJC5mc/edit?usp=sharing

[shawnbot]

Missing a space after +:

margin-top: $amount + 10em;

[shawnbot]

Also, should this be wrapped in parentheses?

[shawnbot]

One other thing re: expressions. I think we should state clearly in the style guide that spaces should separate values and operators in Sass expressions. For instance:

// good
foo {
  font-size: ($font-size + 2em);
}

// bad
foo {
  font-size: ($font-size+2em);
  font-size: ($font-size +2em);
}

I suppose that this is also an important way to disambiguate negative values from the minus operator, although I can't think of a good example.

[maya]

We don't want a new line if you're nesting a selector (@extend or @include) directly after the first selector, right? That is, with no properties between them. If so, can we make this explicit?

// Good
.module {
  .module__ele {
    color: #fff932;
  }
}

// Bad
.module {

  .module__ele {
    color: #fff932;
  }
}

[shawnbot]

I move to merge this and make changes via issues. @msecret, @meiqimichelle?

[meiqimichelle]

Suggest we wait for @msecret to weigh in -- he tries to keep this github version in line with the google doc, where most of the commenting happens, but I'm not sure if this github version represents the latest work.

In general, I agree that we need to get the latest here, deprecate the google doc (now that we have a relatively stable version), and move to a changes-via-issues model.

[msecret]

@shawnbot I included a rule for correct spacing in expressions: e426616#diff-03e8e7d4493dc9cdf873d08611a76b50R91

I've already deprecated the doc and am ready to publish.