Welcome to WebmasterWorld Guest from 23.22.220.37

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Sheet format

Does it matter how the CSS is formatted?

     
5:24 pm on Sep 30, 2005 (gmt 0)

New User

10+ Year Member

joined:May 7, 2005
posts:2
votes: 0


Hi!

I have noticed that CSS is usually formatted like this:

#navlist {
position: absolute;
left: 36px;
top: 86px;
width: 186px;
}

For easier readability, I like to set them up like this:

#navlist {position: absolute; left: 36px; top: 86px; width: 186px; }

Does it matter?

5:35 pm on Sept 30, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 5, 2004
posts:198
votes: 0


It only matters as long as you understand it. I've seen such css markups as yours and they tend to be really annoying when there the code chunks are huge. I prefer to use the following markup:

#something, #a {
[tab] width: 100%;
[tab] height: 100%;
[tab] etc;
}

It is both easy to understand and semantically meets the programming standarts as far as I know.

7:59 pm on Sept 30, 2005 (gmt 0)

New User

10+ Year Member

joined:Nov 3, 2005
posts:3
votes: 0


It doesn't matter how you format your css. The only two factors (so far as I know) are:

* Readability. Some people like css written horizontally (as you do), while others prefer a top-down standard. I've talked to some that organize their css alphabetically, while others arrange it according to the flow of their html.

* File Size. If you are working with a lot of css, the file size may be an issue for you. If you arrange your code horizontally, the file will generally be smaller in size than if you did it in a top-down style.

11:38 pm on Oct 3, 2005 (gmt 0)

New User

10+ Year Member

joined:July 6, 2005
posts:8
votes: 0


I agree with alias - that format is easy to make corrections/changes to and can be ordered a lot easier. Commenting specific code is much easier too.
1:24 pm on Oct 4, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Dec 10, 2001
posts:254
votes: 0


I usually start with a simple list (like alias's), but from there I will sometimes combine closely related items onto the same line, e.g., height + width, margin + padding.

Your example might look like this (though with tabbed indents for the middle lines!):

#navlist {
position: absolute;
left: 36px; top: 86px;
width: 186px;
}

At least that's what I do with an external style sheet. If I have a few styles in the <head> of a page I'm more likely to consolidate things onto one line. In either case, readability and logic is key.

10:31 pm on Oct 4, 2005 (gmt 0)

New User

10+ Year Member

joined:May 7, 2005
posts:2
votes: 0


Thanks, guys. You are right configuring that way would be a lot easier to edit and comment out.

I am a recent convert to Dreamweaver 8 from Frontpage 2003. FP always formatted in a single line:

#navlist {position: absolute;left: 36px;top: 86px;width: 186px; }

DW formats like this:

#navlist {
position: absolute;
left: 36px;
top: 86px;
width: 186px;
}

Thanks a lot for your input!

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members