Optimizing and organizing your CSS code

As how we semantically approach our HTML code for a better structured mark-up, that’s how we need to approach CSS as well.

Setting global and local styles.
You probably haven’t heard of ‘local styles’ because I pretty much named them now and I like to think of ‘local styles’ as those we set for certain regions in our HTML document, like a box model which we can reuse throughout our document, while thinking of ‘global styles’ as those we set for the entire document, like links, heading tags and so on.

Often we meet stylesheets that contain overly used CSS syntaxes within an HTML section, take the following example:

Above we have two simple and almost identical box models, what’s to notice is that the HTML elements from the second box are styled and aligned individually, thus recquiring extra styling and that’s just poor coding. Have you noticed the obvious difference? If within a container we need spacing between the border and the content, then adding padding to the container will result your content being automatically aligned, as shown in the first box model.

Styling a full HTML test page

Throughout the development of a website, it’s inevitable not to come across new html elements where we need to go back to our stylesheet to style them. Wouldn’t it help if the majorly used elements are already pre-styled in a way to match your current website’s design? It takes a little more effort at the beginning to style elements that you may not even use, or at least, might use later on.

I found this great strict xHTML test page at snipplr.com, here’s what it’s all about:

This stylesheet is going to help so freaking much.

-Blockquote

It’s all just HTML, styling it would give you a better overall view of your page’s design elements, helping you rapidly implement new content without worrying about the browser’s terrible default styling 😛 a fantastic time saver technique, I must say!

I’ve added some basic styles to give you an idea how I prefer starting the design of a web page:

Bear in mind that in the above example I haven’t used the reset stylesheet to ensure browser compatibility, if you haven’t heard of it or do not know how to implement one, I’ve written an article about it a while back: Using the Reset Stylesheet

Organizing your CSS

When building more complex designs, you end up with a lot of heavy CSS blocks, and going back through your own code can be difficult at times, so how do you organize your code?
For starters, I sort all of my CSS syntaxes within a block aphabetically, because it may take a good few seconds to find every line of code if the code lines are all mixed and scrumbled, take the following css code block:

and the following alphabetically arranged css code block:

I think it’s pretty easy to realize which is better to get accustomed to, but then again, everyone has their own preferences.

What about the entire stylesheet organization? I personally keep it simple, I section my main stylesheet as the following:

If you feel I’ve missed some vital tips, go ahead and post them as comments!

Catalin

My name is Cătălin Berța and I'm a front-end web developer. I was born in Focsani, Romania and currently living in Bucharest. Started playing with some good old html tables ever since 2004 as a hobby, turned out to be a full-time career! :) I've had the chances to experience and witness web development's rapid growth over the years where I've mainly focused on front-end web technologies.

15 thoughts on “Optimizing and organizing your CSS code

  1. You can simply use HTTP compression on your CSS at the server (apache) or file level (php’s gzip, for example). This greatly reduces the file size and has been found to be a functional solution.

  2. Same with Virtual Server, I am still a beginner in CSS but I have extensive knowledge in HTML. I usually separate the CSS and HTML just like you did and I create my own indenting styles. But with this article it opened my mind to the idea of compression and how greatly it will affect performance. thanks

  3. Good post, I agree with your points. I usually work on the rule that if an external style sheet is larger than 15-20kb then it probably need to be looked at.

    Ive used style resets before and they do work well but unless I’m totally stuck I tend not to use them as a rule. I guess it depends what sort of page your styling.

    Tom

    1. The CSS file differs from project to project, pretty much about its design complexity, as for the RESET stylesheet, you can either use it or just implement it manually when you come across browser design incompatibilities. I personally use it all the time.

  4. I usually separate the CSS and HTML just like you did and I create my own indenting styles. But with this article it opened my mind to the idea of compression and how greatly it will affect performance. Thanks for the details stopping by!

  5. Honestly I just got my eyes widened by all those codes up there as If I am decoding all the symbols LOL I am just a baby on this net world and it seems most of this are unfamiliar with me . Hope one of this days I can know things like this.

  6. I am still a beginner in CSS but I have extensive knowledge in HTML. I usually separate the CSS and HTML just like you did and I create my own indenting styles. But with this article it opened my mind to the idea of compression. | 😛

  7. I find it funny how @darknight0506 (comment 13) simply combined other peoples comments into his own.

    “I am still a beginner in CSS but I have extensive knowledge in HTML.” from after the comma 1st sentence of comment 4

    And.

    “I usually separate the CSS and HTML just like you did and I create my own indenting styles. But with this article it opened my mind to the idea of compression.” from comment 9 – 1st two sentences…

    …haha just thought I’d point that out.

    Am I weird for noticing that?

  8. @Tom Garmin
    wow, what a catch :) I did feel a deja vu when reading his comment but I didn’t really figure out out why haha

    Let’s just call it a coincidence

    Thanks for the outstanding observation!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">