Skip to content

Instantly share code, notes, and snippets.

@KarllosSouza
Last active March 28, 2023 18:49
Show Gist options
  • Save KarllosSouza/af9c45739ff00bd731b06410a2c808e2 to your computer and use it in GitHub Desktop.
Save KarllosSouza/af9c45739ff00bd731b06410a2c808e2 to your computer and use it in GitHub Desktop.
CSS Styleguide

CSS Styleguide

Contents

  1. General
  2. Formatting
  3. Comments
  4. JavaScript hooks
  5. Performance
  1. References

1. General

  • a. Use soft-tabs with a 2 spaces for indentation.
  • b. Trim trailing white space on save.
  • c. Set encoding file to UTF-8.
  • d. Add new line at end of files.
  • e. Declaration Order: alphabetical.
  • f. Use lowercase and dashes in classes names, not underscores or camelCase.
  • g. Do not use ID selectors.
  • h. Use a semicolon after every declaration, including the last item.
  • i. When using multiple selectors in a rule declaration, give each selector its own line.
  • j. Put a space before the opening brace { in rule declarations.
  • k. In properties, put a space after, but not before, the : character.
  • l. Put closing braces } of rule declarations on a new line.
  • m. Separate rules by new lines.
  • n. Use single quotation marks for attribute selectors and property values. - ???

Bad

#my_selector{
    height:120px;
    display : block;
    padding: 10px 15px
}
div, p
{
    font-family: "open sans", sans-serif;
    text-align: center }

Good

.my-selector {
  display: block;
  height: 120px;
  padding: 10px 15px;
}

div,
p {
  font-family: 'open sans', sans-serif;
  text-align: center;
}

2. Formatting

  • a. Prefer hex color codes.
  • b. Use shorthand hex values where available.
  • c. Uppercase all hex values.
  • d. Avoid using shorthand properties for only one value.
  • e. Use a leading zero in decimal numbers.
  • f. Use 0 instead none.
  • g. Avoid specifying units for 0 values.
  • h. Use shorthand when appropriate.
  • i. Avoid unnecessary shorthand declarations.

Bad

.selector {
  background: #ff9933;
  color: rgb(90,90,90);
  margin-bottom: 10px;
  margin-left: 20px;
  margin-right: 10px;
  opacity: .5;
  padding: 0px 0px 15px;
}

Good

.selector {
  background-color: #F93;
  color: #5A5A5A;
  margin: 0 20px 10px 10px;
  opacity: 0.5;
  padding-bottom: 15px;
}

3. Comments

Don't write comments. Ever.


4. JavaScript hooks

Prefixed with .js-:

<button class='my-selector js-request-lessons-list'>Lessons List</button>

5. Performance

5.1 Specificity

Although in the name (cascading style sheets) cascading can introduce unnecessary performance overhead for applying styles. For example:

ul.user-list li span a:hover {
  color: red;
}

Styles are resolved during the renderer's layout pass. The selectors are resolved right to left, exiting when it has been detected the selector does not match.

If we want to give all a elements inside the .user-list red on hover, we can simplify this style to:

.user-list > a:hover {
  color: red;
}

And if we want to only style specific a elements inside .user-list, we can give them a specific class:

.user-list > .user-link:hover {
  color: red;
}

6. References

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment