Coding Standards - Get Marketing Ideas

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
    }
}

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
    }
}

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
    }
}

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
    }
}

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
    }
}

General Rules

Use SCSS to combine modifiers into the main class rules

Group classes into semantic structures

General Rules

Use SCSS to combine modifiers into the main class rules

Naming

Use full words and name classes semantically

Group classes into semantic structures

General Rules

Use SCSS to combine modifiers into the main class rules

CSS

Formatting

Always leave a space between the selector and bracket

Separate selector, rules, and closing brace on new lines

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

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

Naming

Use full words and name classes semantically

Group classes into semantic structures

General Rules

Use SCSS to combine modifiers into the main class rules

URLs

CSS

Formatting

Always leave a space between the selector and bracket

Separate selector, rules, and closing brace on new lines

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

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

Naming

Use full words and name classes semantically

Group classes into semantic structures

General Rules

Use SCSS to combine modifiers into the main class rules

Company

Services

Tools

Tips to improve your site