.. Your Daily Design Dosis

Tips How to Organize your CSS file(s)

| 44 Comments

CSS (Cascading Style Sheet) is used to separate content from presentation in a web site, this means that by applying CSS you have the ability to keep the structure and code of your document clean and fast, with the possibility of controlling the ‘looks’.

Ever had to pick up a project that someone else started, or needed to update some of your own old web designs, only to discover that the original code is a mess? This could be the result due to messy coding from the beginning, or sometimes it’s just because of multiple hacks and changes over time or any other reason.

CSS is a language that is extensively used in almost every website, CSS is powerful and has many nuances that can help (or hurt) your web design (more information about CSS, you can find here on the gonzoblog: How Can CSS Benefit Website Design?).

In this article, I’ld like to give you some tips for writing a clean CSS to avoid inconsistency and redundancy, so you can make your CSS easier to maintain and edit later on.

Always Use an External Stylesheet

The best way to separate content and presentation is to use an external stylesheet (external .CSS file). The advantages of using an external stylesheet are:

  • Separation and organization of content from presentation.
  • External stylesheets are kept in cache, allowing faster page loading times.
  • A single stylesheet can be applied to every page of a web site, allowing quick style changes.

Don’t use inline styles, because every style change needs to be done on every single HTML document instead of a global change in a single external stylesheet. When using an external stylesheet, simply place the following code in between your <head> tags of the HTML source code:

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

Note: Be sure to replace CSS/style.css with the name and location of your CSS file.

Tip: Don’t use too much different external stylesheets. Why? Before a browser can begin to render a web page, it must download and parse any stylesheets that are required to lay out the page. In addition, once the stylesheet is loaded, the browser’s CSS engine has to evaluate every rule contained in the file to see if the rule applies to the current page [resource: code.google.com] => Page Speed!

Resetting your Stylesheet

Due to the fact that every web browsers has its own set of defaults you should start by overriding all the browser styles. A Global Reset fixes this browser compatibility issue and lets you build a site from absolute scratch. A reset stylesheet is basically just added to the top of your CSS, that sets HTML elements to a baseline value in order to avoid all inconsistencies across browsers (margins, paddings, line-heights, etc.).

There are many different pre-made CSS reset stylesheets ready for you to use. Eric Meyer’s Reset Reloaded is a popular reset, along with Yahoo’s developer reset. But it could also be something like written below, it just depends on the specific web site you’re making and what kind of styles you use:

body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,p,th,td,html,table,tr,td {
margin:0;padding:0;
}
form, fieldset, legend, label,input, textarea, option, .nobox {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
}

Tip: Do not include any markup elements in your reset stylesheet that you don’t use. BTW: CSS resets aren’t for everyone. There are plenty of reasons to not use them.

organising CSS files

Organize your CSS Files

Organizing your code now, means saving a lot more time later, when you have to edit your completely unreadable code. Also, you’ll never know who might need to work with your code in the future.

The 2 most common ways how to write a style sheet are the ‘Single-Line’ or ‘Multi-Line’ method, below you can see an example of both ways.

Single Line:

.single_line {background:#FF5C00; border:3px dotted #FFF; color: #003300; }

Multi-line:

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

The CSS examples in this article are written in a multi-line format, where each style property gets its own line. This  convention is widely-used, not only within CSS files, but also in books and articles about CSS.

In my believe both practices are perfectly acceptable. Just remember – focus on consistency and pick what format is most comfortable for you. That’s all that matters.

Consistency is Key

Not only be consistent when it comes to the single-line or multi-line format, but also in naming the different classes and layers. Name your elements based on what they are, not what they look like. For example, .Arial28pt is more limiting and less versatile than .post-title (what if you want to change the font-family of this class?).

Giving precise, semantic and clear class names to your elements is key, this will avoid confusion and let you understand your CSS better and faster. When naming your divs or classes be careful using the underscore, older browsers don’t always support it, learn yourself to use a hyphen instead.

Use a coherent structure according the different content “sections” of the web page in your CSS. You’ll be faster at editing your CSS later because it will follow an easy to read, logical structure. See the example below:

0 – Reset
1 – Links
2 – Typography
3 – Header
4 – Main/Content
5 – Navigation
6 – Forms
7 – Extras
8 – Footer

Comment your CSS

In your CSS-file (as well in your source code) you can include comments to all the different styles or sections within your file. This could come in handy when you’re working in a team or when making templates for someone else to implement a CMS or an app. The included comments can include copyright, last update, version, etc.

To add a comment, simply add /* behind the comment, and */ to close it, like this:
/* This is a comment-label */

A helpful use of CSS comments is a color reference, where the color palette for the web site is defined with the hexadecimal color code for each element of the design. Include a colour reference at the top of your CSS file. That way, if you forget the code for a specific color, you can simply check the top of the file.

/* Color Reference:
background: #EEE;
normal text: #222;
links: #888;
headings: #444;
End Color Reference */

Get to know Shorthand CSS

When designing a web site, you’ll probably be adding <div> after <div> to your CSS Stylesheet, your CSS file becomes incredibly bloated and loading takes more and more time. Using shorthand CSS makes your file-size smaller and is the perfect way to make your web pages load faster. Imagine having to write the following code, if you want to define a single <div>:

#div {
color: #222222;
font-size: 14px;
font-family: Arial, Helvetica, sans serif;
line-height: 24px;
margin-top: 10px;
margin-right: 24px;
margin-bottom: 12px;
margin-left: 0px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

That would take a lot of time every time you want to have something like that applied to a <div>, right? Thanks to the magic of shorthand CSS, that code can be made into this:

#div {
font: 14px/24px #222 Arial, Helvetica, sans serif;
margin: 10px 24px 12px 0;
padding: 10px;
}

Now, that’s much quicker to write, 5 lines of CSS instead of 13! Just remember: The order of the sides goes clockwise, from the top. So it’s top, right, bottom, left.

Combining and Grouping Elements

Somehow the worst case scenario you can have are identical style declarations or multiple classes with shared properties, spreaded across multiple external stylesheets. For example: if your h1, h2 and h3 elements both use the same font, color and margins, the only difference between the headings is the font-size, you could write it as shown below:

h1 {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 36px;
color: #333333;
margin: 10px 4px 6px 2px;
padding: 0px;
}

h2 {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 24px;
color: #333333;
margin: 10px 4px 6px 2px;
padding: 0px;
}

h3 {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 21px;
color: #333333;
margin: 10px 4px 6px 2px;
padding: 0px;
}

By grouping the identical style declarations the CSS becomes less bloated and later in the stylesheet we can add the unique characteristics (ie. font-size) to each of these header styles if we want to:

h1, h2, h3 {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 21px;
color: #333;
margin: 10px 4px 6px 2px;
padding: 0;
}

h1 {
font-size: 36px;
}

h2 {
font-size: 24px;
}

h3 {
font-size: 21px;
}

Validate Your CSS

If you’re working on a design and for some reason things just aren’t looking right, W3C’s free CSS validator will be a big help in pointing out errors. Validation gives you a chance to make sure your work is, easier to maintain and to fix, browser consistent and fast on loading pages.

More about validation, web-standards and browser compatibility, please read the following article: The Importance of Web Standards

Compress When you’re Finished

Once you’re finished writing your CSS code, and everything works perfectly, then you need to minify your CSS. There are online tools, such as the CSS Drive CSS Compressor, that help you to strip out the unnecessary whitespace for you. This tool also has several options to determine how much whitespace to remove, whether to remove comments, etc.

By removing all the extra whitespace, such as tabs, spaces, newlines and deleting the comments, this will 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.

Conclusion

Whether you work on an internal team, with vendors and sub-contractors or by yourself as a team of one, these CSS practices will help establish the ground rules for being a good CSS team player, saving both time and frustration.

– § –

If you have more tips to be added to this list, please share them below. Be sure to leave a comment with your response.

 

Author: Jan Rajtoral

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

44 comments

on this article: “Tips How to Organize your CSS file(s)”
  1. Nice article, definitely useful for beginners.

    • Hi Robbert,

      Glad you liked it, BTW nice Dutch webdesignersforum you’ve got there, is it yours? Will dive into that when it’s a bit chiller here .. loads of work to do!
      Hope to see you next time? Cheers & Ciao ..

  2. Hi Dianne,

    Thanks for your visit and comment, much appreciated!

    Cheers & Ciao ..

  3. some genuinely interesting details you have written.

  4. Pretty nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!

    • Hi Bigney,

      thanks for your comment, much appreciated! Every week you can expect 2 blogpost here, Saturday (today) a new Tweet-Parade will be published at 15.00 CET, so stay tuned! Cheers & Ciao ..

  5. I must say, whilst checking through dozens and dozens of blogs each week, the theme of your blog stands apart (for all the proper reasons). If you don’t mind me asking, what’s the name of this theme or would it be a especially designed affair? It’s far better compared to themes I personally use for some of my blogs

    • Hi Reither,

      Thanks for the compliment! Yep, I designed this theme for the gonzoblog cause I wanted something else than the ‘mainstream’ design of a lot other themes.

      One day I want to redesign this blog completely and maybe, just maybe, I could make this theme into a freemium? Hmm, you got me thinking now ..

      Thanks for the comment, much appreciated. Cheers & Ciao ..

  6. Organization is the root and key of all designs. Thanks for the tips!

  7. Hi DL,

    Thanks for your comment, have a great day ..

    Cheers & Ciao ..

  8. The great fresh articles keep me coming here time and time again. Thanks so much.

  9. Hi NHIPF,

    maybe in the beginning it’s mind dazzling, but you’ll see when you have to make a redesign, you’ll win your time back!

    It’s just is better to organize your CSS, so no more delaying anymore ;-P

    Thanks for your comment, Cheers & Ciao ..

  10. Whew! Organizing CSS files sound like such a tedious task. I haven’t even gone halfway through your article and I’m already drained. :) But, thanks for posting this. Truly helpful. I’ve been putting off organization for some time now. You left me with no excuse for delays anymore. ;)

  11. Hi CG,

    This info is not only important, it helps you to write a clean and logic CSS file.

    Do this right at the beginning of designing your site and you’ll see you will love yourself when you have to redesign it!

    Thanks for your comment, Cheers & Ciao ..

  12. Hi CrazyUpload,

    Thanks for subscribing (be the first to know when a new article is posted)!

    And I try to maintain a schedule of publishing, every wednesday the main article is posted and every saturday a new Tweet-Parade (best articles of last week).

    So I hope there will be enough for you to look out for ;-P

    Cheers & Ciao ..

    P.S.: see the OFF-TOPIC: next 2 weeks no main articles!

  13. Any way I’ll be subscribing to your feed and I hope you post again soon.

  14. Hi RWS,

    Start blogging again and express yourself! Or if you don’t want to start a blog, come and write a guest-post here on the gonzoblog?

    ..it’s just a thought? Cheers & Ciao ..

  15. you writing reminds of my own blog which i used to write a couple of years back. I still miss blogging though. Its a great way to express oneself. Maybe i would start a blog again soon enough.

  16. Hi JPop,

    nice to see you back commenting here on the gonzoblog! Thanks for the compliment .., appreciate it ;-P

    Hi Candi,

    That’s what we’re here for, to give some help and (background)information.

    JPop & Candi, thanks for commenting, Cheers and Ciao ..

  17. Aided me a lot, just what I was looking for : D.

  18. Thanks for this great article! Nice job :)
    .-= JPop´s last blog ..Hitomi Shimatani – Shirou muno no You ni =-.

  19. Hi Ilana,

    I did develop and design this gonzoblog-theme. Never thought it could inspire some one ;-P

    Cheers & Ciao ..

  20. Hi Dompl,

    Thanks for your comment! Maybe in another article more about unused selectors, otherwise this article would be very, very long ;-P

    But it’s an issue worth mentioning, thanks for that! Cheers & Ciao ..

  21. Thanks for the article. Very useful for beginners. It will be also wort mentioning about tools like ccs tidy or find unused selector.

    Good job.

    Thanks

  22. Hi Chris,

    first of all let me start thanking you for your great comments and constructive thoughts, cheers mate!

    As replied earlier, structure is an important factor in becoming a professional. Not only structure in your life, but also in your planning, work-flow and your designs (e.g. gridsystem), etc.

    The best way, as you mentioned it, is to learn from earlier projects and to go back and analyse what you actually have done (wrong). It’s a cliché but therefore oh so true: learn from your mistakes!.

    For instance, by using an external stylesheet, you will see that a single style-change is so easy to do – because you need to change 1 stylesheet, instead of changing all your inline styles on all your webpages. That’s called organising and separating content from presentation, bringing structure in your design(s).

    Structure can make your work easier for you, so you can do more and far better work, and in my humble opinion that is equivalent to professionalism?

    Once again, thanks for sharing your thoughts, love that! Cheers & Ciao amigo ..

    P.S.: your last paragraph in your comment is THE reason why I write my articles here, .. the ‘motto’ of this blog!

  23. I’d like to start by simply thanking you for compiling this set of quick tips for creating more intelligent work-flows. I’ve been an off and on web designer who mainly designed for small businesses in rural areas. I am now taking a more professional approach to what I once considered only a hobby.

    This article really helps me to go back and look at recent work and critique my work-flow methods. I have developed bad habits, such as “style” tags within my code files rather than in my stylesheets.

    Articles like this one provide me with useful tools to help turn my hobby into a profession through work methods I can take pride in.