PDA

View Full Version : Organization of class/ID definitions and divs


CyberCrone
06-28-2009, 06:41 PM
In every Web page or CSS style sheet I've ever looked at, all the definitions of classes and IDs come first, followed by the div's. I have to scroll up, scroll down quite a bit when I am analyzing styles on a page. To me, it seems to make a lot more sense to define a class or ID immediately preceding the div's that use it.

Like my other post this morning, I realize there must be a reason for this, but I need to understand it. Can someone explain this to me, or is this one of those things that has always been done that way so everybody continues to do it that way? In other words, is there any reason I shouldn't organize my own pages the way that makes sense to me?

domedia
06-28-2009, 06:52 PM
I don't understand, you say that the classes and ID's are defined first, then the DIVs.

How are the DIV's styled in the stylesheet, if it's not done by classes and ID's?


Can you show an example to illustrate your question?

CyberCrone
06-28-2009, 07:43 PM
"How are the DIV's styled in the stylesheet, if it's not done by classes and ID's?"

Yes, they are styled with classes and ID's, but by 'defined' I mean set up, for example <div id="container">. "Container" is defined as an ID at the beginning of the file, far above the div that uses it. So what I'm saying is, why not put the #container {...} just before the <div id="container"> instead of at the top, so it would be easy to see exactly what we're applying to that div, not just the ID name? Because I'm always having to scroll up and down to find out just what specific attributes I'm assigning to the container div.

Does that clarify my question?

d a v e
06-28-2009, 07:54 PM
your container should be defined in an external stylesheet, not in the head of the html document, then you won't have to scroll and you can apply the same styles site-wide

CyberCrone
06-28-2009, 08:53 PM
I thought it was OK to have in head of document when the site is simple one-pager, as mine is. But even in an external style sheet, I have the same question, just for readability. Do you know of any functional reason I shouldn't do that? Maybe I'll simply try it on a simple test page and see what happens. I wanted to ask the question though, because sometimes effects of changing something aren't immediately apparent.

domedia
06-28-2009, 10:33 PM
I'm still a little confused of what you're asking about..
do you mean why you should not add inline styles as in
<p style="margin: 1em">Paragraph</p> ?

CyberCrone
06-28-2009, 11:44 PM
I'm still a little confused of what you're asking about..
do you mean why you should not add inline styles as in
<p style="margin: 1em">Paragraph</p> ?

No, I'd better send a page, which is what I think you wanted me to do in the first place, but have no more time today--I'll attach one tomorrow. Thanks for hanging in there!

CyberCrone
06-29-2009, 01:10 AM
Never mind! I figured out the answer to my own question, which was based on ignorance. I can't move the class/ID definitions down with the div's because they have to go between <style>...</style> in the head.

I know, I know, probably to you officionados this is simple and obvious, which is why you couldn't 'get' my question--no one could be that ignorant, right? :mad:

In my defense, I do read tutorials, but so far none has pointed this out, and I had to go in there and start trying to put a page together to show domedia to have it smack me in the face. Also the DW template is heavily commented, and ends up being visually confusing. When I stripped the comments out is when I noticed it.

Anyway, thanks to the three? who tried to help. You are appreciated.

d a v e
06-29-2009, 03:11 AM
even for one page you could strip out the styles and put them in an external stlye sheet just for the ease of editing, but it's up to you ;)

domedia
06-29-2009, 03:27 AM
In my defense, I do read tutorials, but so far none has pointed this out, and I had to go in there and start trying to put a page together to show domedia to have it smack me in the face. LOL Glad you got it sorted out :)

Dave is giving really good advice about separating CSS from CSS.

d a v e
06-29-2009, 02:56 PM
LOL Glad you got it sorted out :)

Dave is giving really good advice about separating CSS from CSS.
er, don't you end up with nothing then?! lol.
think he means separating html from css (i hope)