Coding Standards - Get Marketing Ideas

URLs

Please develop only on local machines. Do not create public (live) URLs other than the ones provided to you. This is important because many clients have strict regulations to adhere to, such as those outlined by LegitScript.

CSS

Formatting

Always leave a space between the selector and bracket

// Bad
#needs-space{
    rule;
}

// Good
#has-space {
    rule;
}

Separate selector, rules, and closing brace on new lines

// Bad
#needs-new-line { rule; }

// Good
#has-new-line {
    rule;
}

Avoid inefficient element selectors, unless it’s a single selector

// Bad. DO NOT use selectors like this. It's very inefficient and leads to styles being
// applied to elements that they shouldn't, requiring unnecessary overrides.

// Good
.li-class {
    rule;
}

Do not chain SCSS selectors for more than 3 selectors, use > selector for specificity

// Bad. Chaining many selectors leads to confusing, inefficient CSS.
.first {
    .first-child {
        .second-child {
            .third-child {

// Good, avoid chaining, only chain semantically grouped selectors if necessary
.first {
...
.first--child {

Naming

Use full words and name classes semantically

// Bad, this is vague and easily confused
.btn-1 {
    rule;
}

// Good
.primary-button {
    rule;
}

.secondary-button { rule;

Group classes into semantic structures

// Bad, this is vague and easily confused
.btn-1{
    rule;
}

// Good
.blurb {
    .blurb--icon {...
    .blurb--img {...
}

General Rules

Leave a space between comment markers

/* Like this */

Make sure rules are in alphabetical order

.like-this {
  background-color:
  color:
  padding:
}

Use SCSS to combine modifiers into the main class rules

Instead of this:

.rehab-information-and-resources:before

Do this:

.rehab-information-and-resources {
     // rules

    &:before {
        // more rules
    }
}