“I improve design”

As I’ve mentioned before, in my previous company we worked with offshore developing located in Serbia. Given the fact that we were sitting in different countries, different levels of knowledge of the English language, different skills and such, sometimes we didn’t work seamlessy together.

The phrase in the heading came from one of the system developers in Serbia, when he had (less knowingly) changed my interface code, followed up by the jokingly said comment “I improve design”.
Needless to say, in my eyes, it wasn’t improved (however, if you’re reading this, Aleks, no hard feelings from my side. It was an entertaining ride :-)).

I tend to be very though when it comes to the structure of my code, which leads me to how to set up the structure of one’s CSS file(s).
Earlier on, I used to order my CSS in the order things were rendered in the page. However, I soon realized that with additions and changes all the time, fixes and so on, this wasn’t really useful as soon as I got to build bigger web sites.

So nowadays, I structure my CSS this way:

First, tag-specific CSS:
a{
color:#FFF;
}

body{
margin:0px;
}

Then ID-specific CSS, in alphabetical order where the tag name is the separator:
div#containerDiv{
width:800px;
margin:20px auto;
}

img#artImg{
border:0px;
}

img#userImg{
margin-left:20px;
}

Followed by class-specific CSS for specific tags, in alphabetical order where the tag name is the separator:

div.contentDiv{
width:400px;
background:#F00;
}

img.linkArrowImg{
float:right;
}

And finally class-specific CSS for any kind of tag, in alphabetical order where the tag name is the separator:

.bold{
font-weight:bold;
}

.preAmble{
font:1.2em/1.6em Verdana, Arial, Helvetica, sans-serif;
}

This works just fine for me. Does it look good? How do you do?

Posted in CSS

7 Comments

  • Box says:

    I tend to sort my CSS in a similar way as you do Robert – in alphabetical order. But I also sort my CSS in "blocks".

    /* — TopNavigation Block –*/

    div#topNavigation{

    width:400px;

    height:40px;

    }

    a.topNavigationNormal{

    font:bold 11px verdana;

    color:#FDB316;

    }

    a.topNavigationSelected{

    font:bold 11px verdana;

    color:#CCCCCC;

    }

    /* — — — — –*/

    This works for me and it makes it easy for me to look up the "correct" item if I should need to change it.

  • Martin says:

    I try sort my css by functionality. Everything that has to do with e.g. search functionality goes together. For general things I sort like you Robert.

  • Robert says:

    Thanks for the comments!

    To separate it into blocks is also a good thing. However, they need to have a structure within themselves to be able to handle when they get bigger.

  • Jewel says:

    I have noticed that some people like to group their stylesheets by typography, lists, main divs, positioning etc. I really dislike this sort of grouping personally, because I feel it involves a sort of duplication of selectors. For example you may find references to Heading tags in several different groups, and I prefer to have all the attributes of a selector in one place so that I can see instantly what I need to change. Several prominent websites use this sort of grouping though, so it must be quite popular. All down to personal preference, I suppose.

  • Robert says:

    I suppose.

    But not a way I'd personally choose.

    Also, depending if it's a feature for the visitor to be able to change/choose font size on the site, I normally don't set font-family/size and line-height in the general stylesheet, I tend to have one CSS file each per font size, for overview.

    It is also a matter of just loading a stylesheet as minimal as possible when changing font size, and avoid having every thinkable size and option in the general stylesheet and having to load lots of things every time that aren't used in the current page (although the different web browsers cache functionality makes this a minor issue, but still, I think it's good practice to separate it).

  • Tabris says:

    I usually first start with document container elements (html, head, body), followed by block level elements (headers, lists, paragraphs), followed by inline elements (a, code, del), followed by ID-specific style (#logg, #navigation), followed by class style (rarely ever used); all in alphabetical order (both element and attribute declaration-wise), when cascading is not an issue. 😉

  • Robert says:

    Tabris,

    Thank you for your input!

    To structure the CSS rules according to type of element (i.e. block element, inline element etc) is an interesting approach.

    And of course, as you said, all this only applies when cascading is not an issue. 🙂

Leave a Reply to Robert Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.