9 CSS Best Practices You Need to Know

code

With just about everything, there are certain best practices that everyone should follow. With CSS, these are some rules that both beginners and experts need to consider, to style your website designs the right way.

So whether you're a beginner or an expert, these are some tips that everyone will find useful.

Structure and Content First, Then Presentation

The first thing that everyone should know when learning about web development is to separate content from presentation. This means that you should create your HTML first, with the structure and content, and then worry about the CSS later.

Why?

The structure of the HTML is the main foundation under the CSS. It should contain all of the information about the content and the underlying structure of the page. That is in contrast to CSS, which should only be used to describe how things should look.

This is important for users that can't see CSS. For example, non-CSS browsers (Dillo), text-based browsers, screen readers, search engine spiders, and much, much more.

Use an External Stylesheet

Using an external stylesheet is when you have all of your CSS in an external file, and have it included in your HTML. This is probably the best way to be sure to keep content and presentation separate.

Advantages to using an external stylesheet

  • It helps to separate content from presentation.
  • External stylesheets can be cached, allowing faster page loading times.
  • A single stylesheet can be applied to every page of a site, allowing quick style changes to a single file.
  • It makes organization much easier.

To use an external stylesheet

To use an external stylesheet, simply place the following code in between your head tags. Be sure to replace style.css with your CSS file.

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Avoid Using Inline Styles

By inline styles, I mean the style attribute in the HTML tags. You should avoid using it because it mixes up content and presentation, which can lead to more trouble.

Using inline styles is really almost as bad as using purely presentation HTML elements such as font. It leads to messy code where each HTML file will need to be updated in the event of a style change, instead of a global change in a single external stylesheet.

Bad:

<div style="background:red;">
Ipsum schmipsum
</div>

Good:

.infobox {
    background: red;
}
<div class="infobox">
Ipsum schmipsum
</div>

Organize Your CSS Files

If you spend a couple of extra minutes keeping your code organized now, I guarantee you'll save a lot more time later, when you have to edit your completely unreadable code.

It's not that hard either. A couple of quick steps to keep your selectors and properties organized will bring in tons of benefits.

Bad:

.test {background:#FFCCCC;border:3px dotted #7C2DFF;color:#FFF42D; }

Good:

.test {
    background: #FFCCCC;
    border: 3px dotted #7C2DFF;
    color: #FFF42D;
}

For more information about organizing CSS files, check out this post: Tips For Organizing Your CSS Files.

Use a Reset Stylesheet

For some reason, the developers of various web browsers just can't seem to agree on a standard way to render each element by default. How can web developers solve this problem? By use a reset stylesheet!

A reset stylesheet is basically just added to the top of your CSS, to start out by setting every element to have certain styles. And then you just set your own styles individually as you go through the rest of your CSS.

There are many different pre-made CSS reset stylesheets ready for you to use. I prefer the Eric Meyer Reset.

Compress When You're Finished

Once you're finished writing your CSS code, and everything works perfectly, then you need to minify your CSS by removing all the extra whitespace, such as tabs, spaces and newlines. This can greatly reduce your CSS file size, helping to speed up page loading times.

During this process, you should also merge all of your CSS files into a single stylesheet file. This helps to speed up page loading time by reducing the number of HTTP requests needed to load a page.

There are also some tools, such as the CSS Drive CSS Compressor, which can help to strip out the unnecessary whitespace for you. It also has several options to determine how much whitespace to remove, whether to remove comments, etc.

Use Shorthand CSS

Imagine having to write the following code, if you want to have a different margin for each side of a div.

margin-top: 10px;
margin-right: 24px;
margin-bottom: 12px;
margin-left: 0;

That would take a lot of time every time you want to have something like that applied to a box, right? Thanks to the magic of shorthand CSS, that code can be condensed into a single line.

margin: 10px 24px 12px 0;

Now, that's much quicker to right! Just remember: The order of the sides goes clockwise, from the top. So it's top, right, bottom, left.

For more on using shorthand CSS, check out this awesome article at Webtint.

Keep a Colour Reference

I bet this has happened to you many times, when you're working on a website design and you can't exactly remember the hexadecimal colour code for each element of the design.

A way to fix that is to include a colour reference at the top of your CSS file. That way, if you forget the code for a specific colour, you can simply check the top of the file, then simply copy and paste it into another section of your file.

/* Colour reference
 
background: #FFCCCC
normal text: #FFF46D
links: #38FF0E
headings: #77F6FF
main content bg: #DCAFFF
 
Note: Do not use this colour scheme in a real design. It will look horrible.
*/

Become Familiar With Every Property

While you don't need to use every property that exists in CSS, it is a good idea to at least know what most of them do. For this, you can take a look at the CSS property reference, from HTML Dog.

What other CSS best practices would you recommend using? Be sure to leave a comment with your response.

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

25 Comments

  1. February 3, 2010

    Good artice dud.

  2. February 3, 2010

    Useful tips, thanks for sharing. With regards to organizing the css, having your selectors on one line may not be that bad though, if you keep some spaces between them.

    • February 3, 2010

      That's a good point. I just put everything on its own line, just because that's the way I like to do it.

  3. February 4, 2010

    Yeah some useful tips for CSS. This helps for future work in time saving and other coders will understand the code easily.

  4. February 4, 2010

    yes. these are the basic rules that every CSS developer must follow.

  5. February 4, 2010

    Good article but I disagree with the organization tip. To me, putting everything on one line is more organized, cleaner and saves space. I can also find what I'm looking for much faster as I don't have to scroll through an endless page with one rule on each line. It also makes the file size smaller. I think it's more of a personal prefer, as doing one rule per line instead of doing it all on one line would def slow down my workflow exponitially.

    • February 4, 2010

      That's interesting. I just prefer each rule to have its own line, because that's just what I'm used to, and it works perfectly fine for me. It really is just a matter of personal taste.

    • February 6, 2010

      I agree, this one is personal choice!

      • February 7, 2010

        For me, the best reason to put each rule on it's own line is simple - version control! Some merge tools find it hard to work with text changes on a single line, so you'd have more potential for issues keeping the rules together.

    • September 16, 2011

      yes i am agree with you .because we have to see or trace div classes first( like #container .post) not their attributes....

  6. February 5, 2010

    Avoid using inline styles? I agree with the sentiment - you ABSOLUTELY should avoid inline styles - but what you've replaced it with is almost as bad.

    You've created a class called .redbox - but this a totally non-semantic name, and doesn't give any indication of what it represents. What happens if you decide that every red box should now be blue?

    Do you change the .redbox class to have a blue background, do you create a new .bluebox class and do search/replace throughout all your HTML?

    Or do you just call .redbox something like .infobox that represents it's purpose rather than it's colour.

    • February 5, 2010

      That's actually a very good point. When I was writing this article, I just picked the first example that came to my head. I'll update the post with a better example.

      Thanks for reminding me!

    • May 4, 2011

      Actually .infobox is bad too!

      It describes nothing semantic. Just that it's info, and that it's a box, and the word 'box' insinuates how it should be styled. What if you wanted it to appear inline when you redesigned? And when you look at your stylesheets, you won't know what the hell 'info' is supposed to be.

      .street_address and .contact_details are better, for example, because it actually describes the content, and has NOTHING to do with how it is presented.

      Another technique is to use objective css so you're getting a descriptive chain of elements that describe content... like

      .business_owner .contact_details .street_address {}

  7. February 5, 2010

    I agree with Alex, I personally prefer my selectors to be in one line. Less scrolling through all the lines to make changes or add something. I use to do it the way you prefer. I guess it is up to personal preference. In one line it can sometimes be hard to read.
    I have actually never thought to have a colour reference in the top of the CSS file. I still go back and forth to Photoshop. Will definitely use that tip from now on. Thanks.

  8. February 8, 2010

    Excellent tips. Thanks

  9. August 16, 2010

    great post, css is simple and happy with your tutorial. thanks

  10. Hasan Imam Mukut
    September 7, 2010

    Helpfull tips, and comments. Now, I am confused and page Layout, using % is the best or px? if I consider mobile?, and as Tabular, using div is better which way? float? or position? Thanks in advance, whether some buddies come out with some Helpfull tips..

  11. Really great blog posting, I really enjoyed it. It gives me a bit of motivation.

  12. November 23, 2010

    Thanks for this, I've picked up a few tips I'll be adding to my default CSS - including the color reference as I am always forgetting my hex codes :)

  13. November 29, 2010

    I also recommend making chapters and start each with a comment line. Exmple: start with main building blocks such as body, wrapper, header, then the header details, content details, footer details, etc. that makes for easier searching.

  14. DCrews
    December 22, 2010

    I know I'm a few months behind the conversation, but I have to chime in.

    I'm going to have to disagree with some of the comments. Choosing CSS Blocks (one rule per line) vs a single line should not be a matter of personal choice / preference. It should be considered standard for the following reasons:

    1. CSS blocks are fully readable where single lines aren't. This is especially the case when that particular element has a lot of rules. I can't count the number of times I've pulled up style-sheets of people who preferred the 'single-line' paradigm and the style-sheet had duplicate rules in the same line overriding each other because they didn't realize they already had it on the line.

    2. Version control (thanks Stephen). Whether you're using actual revision control system (SVN, Mercurial, etc) or you're just using an editor that keeps track of your file history and you need to run a diff because you broke something, it's infinitely easier to work with if you have each rule on its own line.

    3. Validation. If you use any kind of CSS Validation (you should), you'll see that they respond with something like "Error Line 5". If that line 5 contains 10 rules, it'll take you a lot more time to Validate.

    4. Scrolling. Unless you're on a Mac, you don't have an easy way to scroll sideways (I believe it's Ctrl+Wheel on OS X) other than going and grabbing the scroll bar. When you're putting a lot of rules on a line, you're going to have to scroll side-ways. In the internet world, horizontal scrollbars are a no-no, and I think that should go for editing, too, as much as is possible.

    5. Code maintenance. If you're ever going to do anything with CSS for a living in an arena where you'll be working with other people, you're not the only one who's working on it. If you're doing something in a one-line method, you may know where everything is, and you may know the order you put stuff, but it's pretty likely that the person who has to maintain your code doesn't.

    I personally even take the readability issue to the next level with the CSS Indentation Method. For example, if I was styling a table, the CSS block for the td will be further indented than the block for tr, which in turn is further indented than the table.

    You don't have to be concerned about filesize if you're using extra whitespace for readability. Just run your CSS through a compressor (or do it yourself, if you're using a programming language for the delivery).

  15. February 4, 2011

    About the Reset Stylesheet, there are different opinions. But more often written here is true.

  16. January 19, 2012

    I like to keep id's and classes in the order they are applied according to the document flow and use comments to denote sections.

    Just as a note, isn't it sort of funny that css is presentation based...how something looks..html is semantic..what is the information, a heading/paragraph etc.. yet somewhere classes were defined to describe the content semantically... instead of how it will appear?

Trackbacks/Pingbacks