homepage Welcome to WebmasterWorld Guest from 54.166.173.147
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Sheet format
Does it matter how the CSS is formatted?
admash




msg:1223700
 5:24 pm on Sep 30, 2005 (gmt 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?

 

alias




msg:1223701
 5:35 pm on Sep 30, 2005 (gmt 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.

sorites




msg:1223702
 7:59 pm on Sep 30, 2005 (gmt 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.

drengur




msg:1223703
 11:38 pm on Oct 3, 2005 (gmt 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.

bruhaha




msg:1223704
 1:24 pm on Oct 4, 2005 (gmt 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.

admash




msg:1223705
 10:31 pm on Oct 4, 2005 (gmt 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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved