Best Practices for CSS

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

You may also like

13 Comments

  1. Thank you, I’ve recently been looking for information about this topic for a while and yours is the best I’ve found out so far. But, what in regards to the conclusion? Are you certain about the supply?

    1. Hi, Thanks for your feedback. Just I have summarize the CSS best practices. So when we do the development we can follow these points.

  2. This design is spectacular! You obviously know how to keep a reader entertained. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Fantastic job. I really enjoyed what you had to say, and more than that, how you presented it. Too cool!

  3. Woah! I’m really loving the template/theme of this blog. It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between superb usability and appearance. I must say you have done a amazing job with this. In addition, the blog loads extremely quick for me on Chrome. Superb Blog!

  4. Howdy! Someone in my Myspace group shared this website with us so I came to look it over. I’m definitely loving the information. I’m book-marking and will be tweeting this to my followers! Exceptional blog and excellent design and style.

  5. Hiya! Quick question that’s entirely off topic. Do you know how to make your site mobile friendly? My site looks weird when viewing from my iphone. I’m trying to find a theme or plugin that might be able to correct this issue. If you have any recommendations, please share. Many thanks!

    1. Hi, We can develop responsive pages simply by using media queries. Or We can go for some responsive frameworks like bootstrap or foundation.
      Please check the below link to get basic knowledge about responsive page development.
      http://frontenddevelopmenttutorial.com/how-can-create-a-responsive-web-design/

      If you want to get more assistance for your website, please share your website detail to info.fedtutorial@gmail.com. I will give more details.
      Thank You.

  6. This is very interesting, You are a very skilled blogger. I’ve joined your rss feed and look forward to seeking more of your magnificent post. Also, I’ve shared your web site in my social networks!

Leave a Reply

Your email address will not be published. Required fields are marked *