Don’t Worry, You’re In The Right Place
A lot of these posts were originally on SureFireWebServices.com. So if you found them through search engines or clicking around, this is their new home :). Enjoy!
0

Future Proof your CSS – Clean it up and optimize

I’m going to share a few tips on how to clean up your CSS.

Tip 1 – Organize Your Style Sheet

There needs to be some type of organization on your style sheet.  Don’t just randomly start naming classes and ID’s. Organize it.  Start with the most common things first.  

Smaller Sites

Generally I’ll start with the universal classes and ID’s.  This includes a reset, but not the one that is found all over the Internet.  I made my own because it reflects how I build my websites (Code is below).  I’ll include a total reset along with styles for block-quotes, ul li, p, and a few other things.

After that I’ll start to order my layout elements.  I’ll start with the header of the site, then the navigation, body content comes after, then footer.

Once all my layout code is in place, I’ll start to add classes.

I only create classes for styles that I would like repeated on a page.  It’s usually a mixture of buttons and/or text.

Larger Sites

I create a main style sheet that includes other style sheets.

[code language=”css”]

@import "universal.css";
@import "layout.css" ;
@import "classes.css" ;
@import "fancy.css" ;

[/code]

I organize it in a fashion where if I have to change anything in the future, I know exactly where to go.  Then I follow the steps above to organize each style sheet.

Tip 2 – Use Single Lines

This is something I picked up a while ago.  It cuts down on the file size and makes the overall style sheet cleaner.

It works a little like this:

Old Style

[code language=”css”]

style {
margin:0;
padding:0;
}

[/code]

New Style

[code language=”css”]

style { margin:0; padding:0; }

[/code]

Take it one step further and you can alphabetize the attributes to make it even easier to find what your looking for!

Tip 3 – Use Short Styles

Short styles take the longer version of style sheet properties, and shortens them.

So this:

[code language=”css”]

style {margin-top:0; margin-right:10px; margin-bottom:20px; margin-left:5px;}

[/code]

will look more like:

[code language=”css”]

style {margin:0 10px 20px 5px;}

[/code]

Tip 3a – CSS Acronym

When  using short styles always remember the acronym “Trouble” or “TRBL”.  This stand for Top, Right, Bottom, Left.  The first digit is always the top, the second is the right, and so on.

If two of the digits are the same, for example the right and left margin is 10px.  You can write it like so:

[code language=”css”]

style {margin:0 10px;}

[/code]

If you want the top and bottom margin to be the same you would just change the first number.

Tip 4 – Group Your CSS Properties

What this means is if you have repeating styles, make sure to group them together to save file size.

Example:

[code language=”css”]
#sidebar {margin:0 10px; width:300px; height:30px; border:1px solid #ccc;}
#footerSideBar {margin:0 10px; width:600px; height:30px; border:1px solid #ccc;}
[/code]

Now we can do the following to condense it.

[code language=”css”]
#sidebar, #footerSideBar {margin:0 10px;height:30px; border:1px solid #ccc;}
#sidebar { width:300px;}
#footerSideBar {width:600px;}
[/code]

Your not repeating your code and if you need to change anything, you will only have to change it in one place rather then two.

Bonus Tips

When you’re styling anchor tags be sure to do it in the correct order. Here’s a simple acronym to remember: “LiVe HAppy”.

[code language=”css”]
a:link, a:visited, a:hover, a:active
[/code]

You can leave the active out but make sure you style it in that order or you could run into issues.

You can also optimize your css by getting rid of spaces.

So something like:

[code language=”css”]
style { margin:0; padding:0; border:1px solid #ccc; }
[/code]

Should turn into:

[code language=”css”]
style{margin:0;padding:0;border:1px solid #ccc;}
[/code]

It’s very minimal but if you’re working on a large website, these little changes can be drastic.

Style Sheet Example

Go to this website that I did for a client of mine and take a look at the style sheet.
John C. D’Angelo, Staten Island CPA

Another example of a website with a few different style sheets in an organize structure, Enrichment Through The Arts.

If you have any questions or any other tips that you may do, I’d love to hear from you!

Advertisement
About the Author

What’s UP! This is my site, I write 99% of the articles on here. I’m also the owner of SureFireWebServices.com. I help out a lot of developers and designers getting into the web game. Helping is fun for me, so feel free to ask me any questions! I’ve made courses and have a membership as well to help get you on your feet!

0 comments on Future Proof your CSS – Clean it up and optimize

  1. Paul Salmon says:

    I am currently using some of those tips when I create my CSS files. I find that ordering my styles alphabetically has helped immensely when I need to find and modify a style.

    For my blog, I have a cache plugin that will minify my CSS, so I don’t worry too much about manually doing that.

  2. I have been using ProCSSor on my mac. When i first go into a project, after making backups, I use this tool to reformat and sort the CSS. It helps me understand what has happened to the project so far…I can sort alphabetically like @Paul Simon does and reformat indentions etc. I may or may not go back to the original style depending on what I see in my new reprocessed variations.

    1. Jonathan says:

      Interesting, I never tried ProCSSor, I’ll have to check that out.

Leave a Reply

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

Scroll to top