18 August 2004
I am a organising junkie
Working as just part of the whole
Something that I have come to realise over the last six weeks working at the cabin is that working as a team on projects brings a whole new bunch of management problems with it. Don't get me wrong, the benefits out number the problems with ease, but there are things that need addressing when working in a team if the team is to be truly efficient. People think is different ways, this is a fact. But when you are working together as a team, you really need to find ways of thinking on the same wave length. When everyone is moving in different directions, it only pulls things apart.
Just one aspect of this that I would like to talk about now, is the organising of style sheets. This should be something that the greater bunch of my readers will feel at home discussing, and that is why I will start off with this. Don't be surprised though if I start talking about other stuff in the future, such as sharing asp.net projects. ASP.net is the newest learning curve that I am trying to take. And yes Andy, I do still think that one person can have a programmer mind and a creative mind.
The Style Sheets of Chaos
When you have multiple people working on one CSS style sheet, it can become a bit of a mess. Everyone has their own way of organising their code. Some people have no way of organising their code. Some people have an amazing way of disorganisation other people's code. Basically, it can all become rather messy. You can spend ten minutes looking for the class that is throwing the whole thing out. Redundant classes bloat the file larger than it needs be. Chaos sets in, and bugs come with chaos.
Something that I have decided to try at Netring is come up with a set order for classes to appear within styles sheets, with a list of categories that all the different classes can fall under. This is only really my first draft, and I suspect that we will redraft it a few times in the future, but this is what I have come up with so far.
- /* Structural and Body Styles */
- /* Copy and Content Styles */
- /* Headings */
- /* Images */
- /* Lists */
- /* Forms */
- /* Tables */
- /* Extras and Miscellaneous */
(Note that the CSS comment syntax is used for ease of copy and pasting into a new CSS style sheet)
The idea is to split up the style sheet into these sections, and most sections are split by the type of HTML element that the styles effect, except a few.
‘Structural and Body Styles' is for the structural DIV tags and any other element which is used to structure the document to relate to the CSS. For example, Using a DIV for containing the whole page, or a main chunk of content. Using a span to clear other structural DIV tags. This section is also used for any 'body' styles such as a font-family or colour.
‘Copy and Content Styles' is for those annoying little styles such as a span with the class of ‘highlight' that you might use within your copy to highlight certain text, for errors or important messages to the user. The ‘Extras and Miscellaneous' section at the end for anything I might have missed.
Putting the tail on the donkey
So, let's try this out. Lets take some classed and see where they would fit into this organisation of styles. The first CSS class that we need to place is this:
#mainNavigation ul{
margin:0;
padding:0;
list-style-type:none;
}
Quite clearly (if you know your CSS) this class effects an Unordered List. So, it would obviously fall under the ‘Lists' category. Ok, how about this:
#mainContent form fieldset label{
width:150px;
float:left;
clear:left;
font-size:90%;
}
The above class affects a label, which is part of a form. So, you've guessed it; place this class under ‘Forms'
Finding the tail on the donkey
So, that we have a basic understanding of how we would place CSS classes into this organised style sheet, what if we find ourselves on the other side of the process, and we need to find the class that is affecting something on a page we are working on. For example, you want to find the class that is replacing the H1 tag in the header with an image. Well, since it is a H1 tag it should have been placed by in the ‘Headings' section.
It's not hard is it? In fact it is stupidly simple, and I am sure that most other developers have some sort of pattern to their style sheets too. But I am going to try and get all the developers at Netring to use the same pattern. Why? It will improve consistency amongst our products and work. It will improve productivity, and efficiency.
Why all the fuss?
Well if your style sheet is not that long, then I would understand why this might seem like a drastic overkill. However, I still try to code my smaller style sheets in the same way now, just out of habit. But when you have a style sheet that is over 1000 lines in code, this sort of structured style sheet can really help.
For example, an ecommerce site that we have just finished, health leads, is running on a transitional version of our Retailplus.bz system. It is half way between an old table based system, with nasty convoluted code, and a new shiny clean easy to update CSS based system. The next version of Retailplus.bz will be highly based upon the changes we have made while putting the site together for health leads. If you check out the style sheet, you will see that it is not small. And it will potentially get bigger when we finish off the system at a later date.
Other Methods
So that I am not shooting myself in the foot, I have to say that I am sure there are other methods for organising style sheets. And some CSS editing software such as topstyle allows you to find classes with ease, using a side bar that lists all the classes.
Some people might order their style sheet with the order things appear on the page. But some times things move around the page so I didn't like this. Some people organise things based on the structure of the document; header classes, the navigation classes, then mainContent classes, finishing with all the footer classes. This might work just as well as the method I use, but how I feel it has holes.
Summary
In summary, I have written a bit about how teams need to try and think as one mind, and stay on the same wave length as each other. I have mentioned that style sheets can suffer when team mates don't try to share each others wave length, and I have demonstrated what I am putting in place at Netring to try and over come this problem with style sheets.
I hope that you found this interesting, and that if you didn't you had the sense to ignore me. ;)
- Time: 14:30
- Wubb Development
Comments ( 2 )
Eric
So, I continually find that some typography belongs in a typography section, and some belongs along with the div.
The only thing I do consistently is a huge nav section, including all nav typography, since the nav is what I usually spend the most time on.
I'll definately be paying more attention to this in the next few weeks, though!
online video poker
online video poker
Sorry, commenting has been disabled for a while. I am getting a stupid amount of comment spam, and need to find a new way of doing things.
I will not publish your email address, but I may use it to get in contact with you.
HTML tags and entities display as source; they do not render. To create a live link, simply type the URL (including http://).