Maintain a Standard CSS Structure

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

Me and my buddy were discussing our Cascading Style Sheets (CSS) woes because of an evil menu that refused to center itself. After the tiresome tries we just moved on and started discussing about our existing CSS structure. We decided we had to standardize our structure so editing will be less tedious for the both of us.

I’m a designer who’s got no real logical thinking when it comes to programming. I do whatever works for me and even better when it solves the problem. My structure is normally arranged according to the row of a website.

If the Header DIV is first in line then anything found in the there will be found under the Header even though if it’s a Paragraph (P) or Unordered List (UL). The reason I structure my CSS that way is so that elements for that section is easier to find. But of course the structure is then only understood by me quicker than my buddy who might need 5-10 minutes making sense of my structure.

One of the better structures I’ve seen for the first time was in the Kubrick theme by Michael Heilemann. He section out the CSS according to layout, header, lists, miscellaneous items and etc.

Some might not agree with me that it isn’t the best but it’s because we’re all so used to our own methods of structure.

This Simpla theme stylesheet though is rather well done as well. The author arranged everything to layout, content, comment, and etc.

So far I’ve found the Simpla structure the easiest to manage and find whatever I need without taking too much turnaround time figuring where is what. But whether or not it’ll be a healthy standard for me and my buddy is another agenda to be discussed.

So what’s your standard CSS structure like?

Posted by dannyfoo on March 17, 2006 | Filed Under Website Lessons | View Comments |

Comments

Have something to say? Leave a comment

View Comments to “Maintain a Standard CSS Structure”

Pages: [1] 2 » Show All

Response #1 by Jonathan Ng on March 17th, 2006

I tend to grouping styles according to layout/sections. I have a little “typography” section at the top, where all the common/base styles are (like h1, a, p), then comes the layout styles (grouped by sections like sidebar, post, comment etc.). So the layout styles “overide” the base “typography” styles wherever neccessary.
Response #2 by ShaolinTiger on March 17th, 2006

Any structure is fine as long as it’s logical.

When it comes to wordpress I tend to design the css as the theme goes, header sidebars, body, single, footer, other.
Response #3 by Danny Foo on March 18th, 2006

That kinda sounds like how I code, Shaolin.

The other thing I normally find confusing is whether you apply padding to the DIV that holds the Paragraph or to the Paragraph alone?
Response #4 by ikram_zidane on March 18th, 2006

yeah.. for me i tend to code just as you do danny.. i works perfectly fine for me.. if you can’t find that certain ID or class.. just use the search function.. easy.. what’re using to code btw ?? (i uses notepad).
Response #5 by ShaolinTiger on March 18th, 2006

The the div that holds the Paragraph generally if it’s an overall style, unless it’s just a one off..then do it on the Paragraph.

ikram: notepad sucks, doesn’t handle *nix files properly, it can’t distinguish between cr/lb and just cr.

Textpad forever!
Response #6 by Danny Foo on March 18th, 2006

LoL! I’m ebil. I code directly in Dreamweaver. *shrug* I feel my work process is slightly better with it. But I’ve tried an extension for Firefox called Codetch (I think) and it’s quite cool though buggy.
Response #7 by Mossie`Ol Chin on March 18th, 2006

guess we all make our CSS the same way. section by section. i find it more logical…
Response #8 by ikram_zidane on March 18th, 2006

ShaolinTiger > i don’t understand what you are saying.. please explain..
anyway, IMHO notepad’s the best.. i just code > save..
Response #9 by Jonathan Ng on March 18th, 2006

Dreamweaver here too.. only coz of the pop-up code completers.. i’m a lazy person.. :p Eclipse has similar (and better) features, but it’s Java based, so u’ll need a kick-ass PC to run it smoothly..
Response #10 by David on March 19th, 2006

Organising your code into logical sections is best. Also, leave lots of comments in your code, not only for the benefit of others, but also for yourself when you revisit your code a few months later and wonder why you put in this rule in the first place.

The CSS for David’s Web (http://david.itchyhands.com) was the most organised I ever wrote. For my latest work I’m dividing my CSS into broad categories:

STRUCTURE – styles that make up the layout. All the positioning rules go here.

LAYOUT STYLES – styling for the divs above. I’m separating layout rules from decorative rules.

CONTENT STYLES – typography, specific page styles for the site sections

MISCELLANEOUS – what it says.

Check out the CSS of Douglas Bowman (www.stopdesign.com), Dave Shea (www.mezzoblue.com), John Hicks (www.hicksdesign.co.uk/journla) for ideas and best practices.