Welcome to WebmasterWorld Guest from 54.159.214.250

Forum Moderators: not2easy

CSS Sheet format

Does it matter how the CSS is formatted?

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

5+ Year Member



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 Sep 30, 2005 (gmt 0)

10+ Year Member



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 Sep 30, 2005 (gmt 0)

5+ Year Member



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)

5+ Year Member



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)

10+ Year Member



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)

5+ Year Member



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!

 

Featured Threads

Hot Threads This Week

Hot Threads This Month