What are the best practices of CSS coding?

Best Practices of CSS Coding

  • Organize your code with proper comments.
  • Use the <link> tag to include all your style sheets in the <head> of the document.

Don’t use @import.

@import directive is much slower than the other way to include style-sheets into a html document.
This will fire an additional HTTP request and block page rendering until its completion.

Specificity of CSS

The ID is the most specific selector, since it can only match one element, and the class is a close second. Use those whenever possible rather than HTML tag names.

/* BAD */
button#back-button { … }
.popular ul li a { … }
.popular > ul > li > a { … }

/* GOOD */
.back-button { … }
.popular-link { … }
.unpopular-link { … }

When using vendor prefixed features, put the standardized rule at the end to ensure browsers optimize and use the standard if they recognize it.
Example:
.thing {
-webkit-transition: all 100ms;
transition: all 100ms;
}

Avoid !important

Avoid using the !important keyword. Treat it like the nuclear option, only to be used in the most extreme of cases. This fundamentally destroys the specificity feature and can even break accessibility for some users.

Developers in the future who are either trying to debug a styling issue, or trying to use normal specificity to override a style for a particular element only to find that they can’t.

Formatting of CSS

  • Use a new line for every selector and every declaration.
  • Use a single space before the opening brace in a set of rules.
  • Use lowercase for elements and shorthand hex values, e.g., #aaa.
  • Hyphenate class selector names; avoid underscores and camelCase
  • Use one level of indentation for each declaration.
  • Add a single space between the property and value.
    Example:
    prop: value; and not prop:value;
  • Always include a semi-colon at the end of the last declaration.
  • Naming convention should be followed.
  • Use shorthand. padding: 15px 0; and not padding: 15px 0px 15px 0px;
  • Avoid units on zero values.

CSS File Handling:

  • Use multiple style sheets, but be aware of them expanding beyond control.
  • Not include unused style rules.
  • Offer a clear place for new styling going forwards
  • Not be a drag in page loading performance
Continue Reading