...

View Full Version : What's your #DIV nomenclature?



Doctor_Varney
11-07-2008, 12:33 AM
So what do you call things, when you have a lot of multiple pages? I'm finding my stylesheets getting rather cluttered with rules for DIVs which perform similar duties, but differ in small ways, according to which page they appear in.

Four queries...

1) Is it valid to assign the body an #ID of it's own? If so, how could I use this to help organise stuff? Could I actually swap between <body id="">'s to call in different style information, to one page?

2) Can I use an #ID and a .class in the same HTML DIV tag?

3) Or is it best to just use a seperate style sheet for each page, where major differences occur?

4)Is there a way of putting more than one stylesheet inside one document? If so, how would they be seperated?

Everyone must have their own system, so how do you more experienced coders deal with naming things?

Or perhaps I should call my DIVs Rod, Jane, Freddy, Mary, Joseph...? Hmm... That could get weird...

Many thanks,

Doctor V

BoldUlysses
11-07-2008, 02:14 AM
1) Is it valid to assign the body an #ID of it's own? If so, how could I use this to help organise stuff?

Yes, it is valid. This has many uses, including the ability to use the same navigational elements for all your pages.

Do a search for "Same Navigation Code on Every Page" on this page (http://www.sitepoint.com/article/top-ten-css-tricks/) (it's #10).


2) Can I use an #ID and a .class in the same HTML DIV tag?

Yes, you can. I do this all the time. Just go from the general to the specific--classes for elements that will be carried across multiple pages or multiple times within a page, and ids to refine those class properties for individual pages. It can be tempting to just use classes all the time since you'll never run into conflicts, but the functionality is there in the CSS, and you'll be a better coder if you use it.


3) Or is it best to just use a seperate style sheet for each page, where major differences occur?

I use a single stylesheet for screen styles and secondary stylesheets for IE hacks (if necessary) and print styles (always necessary). Easier to just have one sheet to keep organized. I have multiple HTML/PHP files to track down on a given site, having more than one CSS file just makes it more complicated.

Hope that helps!

Doctor_Varney
11-07-2008, 02:25 AM
Thanks!

So, just to clarify, what you're saying, when answering 2), is that it's not possible to over-use .classes? It is very tempting to use them for nearly everything. Is it okay to use them with multiple commands inside, such as
.class {margin-left:; margin-right:; float:; background-image:; etc, etc}?


Do a search for "Same Navigation Code on Every Page" on this page (it's #10).


That page is brilliant. Cheers for the link!

BoldUlysses
11-07-2008, 02:38 AM
I tend to default to classes, yes, but you can always change them to ids if you like. It just takes some thought as you're planning your site structure. And yes, they function just like ids in that you can have as many attributes in them as necessary.

Here's a recent stylesheet of mine, for example:


/* ---------- Color Scheme ----------

Light orange: #E59E59
Light green: #D6E59B
Light brown (link color): #BD7945
Dark brown (hover link color): #412715
Blue: #64B5E1

*/

/* ---------- Cross-browser settings ---------- */

* {
margin: 0px;
padding: 0px;
}

/* ---------- General Styles ---------- */


html {
font-size:100%;
height: 100%;
background:url('../images/coconut1.jpg');
}

body {
font-family:arial, helvetica, serif;
height: 100%;
width:100%;
text-align:center;
color:#000;
}

a {
text-decoration:none;
}

a:link {
color: #BD7945;
}

a:visited {
color: #412715;
}

a:hover {
color: #D6E59B;
}

a:active {
color: #D6E59B;
}

.header {
position:absolute;
height:96px;
width:100%;
background:url('../images/headerfade1.png') repeat-x;
z-index:-5;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
width:900px;
margin: 0 auto -77px;
background:url('../images/parchmentbg1.png') repeat-y;

.mainContent {
padding:15px 70px 0px 80px;
text-align:left;
}

/* ---------- Navigation Styles ---------- */

#mainNav {
height:35px;
border-bottom:5px solid #412715;
}

#mainNav ul{
list-style-type:none;
margin-left:-40px;
}

#mainNav li{
float:left;
}

#mainNav li a{
display:block;
width:136px;
height:35px;
text-align:center;
line-height:35px;
border-left:2px solid #412715;
border-right:2px solid #412715;
color:#fff;
background:#BD7945;
font-weight:900;
font-size:0.8em;
}

#mainNav li a:hover{
color:#000;
background:#D6E59B;
}

#mainNav li a.leftNavLink {
width:133px;
border-left:5px solid #412715;
}

#mainNav li a.rightNavLink {
width:133px;
border-right:5px solid #412715;
}

/* ---------- Image Styles ---------- */

.contentImagesLeft {
position:relative;
float:left;
margin:0 10px 5px 0;
border:3px solid #412715;
height:203px;
}

.contentImagesLeft div{
position:absolute;
height:10px;
width:10px;
z-index:10;
}

.tlCorner {
top:-3px;
left:-3px;
background:url('../images/tl.png') no-repeat;
}

.trCorner {
top:-3px;
right:-3px;
background:url('../images/tr.png') no-repeat;
}

.brCorner {
bottom:-3px;
right:-3px;
background:url('../images/br.png') no-repeat;
}

.blCorner {
bottom:-3px;
left:-3px;
background:url('../images/bl.png') no-repeat;
}

/* ---------- Footer Styles ---------- */

.footer, .push {
height: 77px;
}

.footerContent {
width:660px;
margin:0 auto;
background:url('../images/bottomcap2.png') no-repeat;
padding:18px 20px 0;
height: 59px;
font-size:0.8em;
}

Ignore the attributes of the elements and note a few organizational things:

1. All in one stylesheet. I use the comment dividers to organize subsections that correspond with parts of the site or individual pages.
2. It's kind of a mishmash of ids and classes at the moment, but I usually make big only-one-per-page elements like .wrapper and .footer ids. I may change them to that moving forward, since there's really only one "wrapper" or "footer" on a page; no reason to have a class.
3. Links defined up top in the "General Styles" section.
4. "Color Scheme" section at the top--helps keep track of all those hex codes.

jlhaslip
11-07-2008, 06:22 AM
I typically use id's to define a page's structure since there is usually only one header/footer/sidebar/navlist, etc on a page and id's are suited to that.
Classes I use for things like floating elements left/right, where there may be more than one per page.

harbingerOTV
11-07-2008, 07:37 AM
Like the other posters I tend to have some default rules in the style sheet like:


/* Reusable Snips */
.fl { float: left; margin: 0 10px 10px 0; display: inline; }
.fr { float right: MARGIN: 0 0 10px 10px; display: inline; }
.cb { clear: both; }


and then i can chain classes together without having to think about it like: <img src="something.jpg" alt="something" class="sample fl" />

of course there are a few sites that i have done where the div naming convention was part of a, well let's say, socail experiment like:


<body>
<div id="bun">
<div id="lettuce">
<div id="onion">
<div id="pickles">
<div id="mustard">
</div>
</div>
</div>
</div>
</div>
</body>


so take that with a grain of salt ;)

oesxyl
11-07-2008, 10:06 AM
So what do you call things, when you have a lot of multiple pages? I'm finding my stylesheets getting rather cluttered with rules for DIVs which perform similar duties, but differ in small ways, according to which page they appear in.

Four queries...

1) Is it valid to assign the body an #ID of it's own? If so, how could I use this to help organise stuff? Could I actually swap between <body id="">'s to call in different style information, to one page?
yes is valid but is useless because body is only one in document so is more simple to use body { ....} in css.


2) Can I use an #ID and a .class in the same HTML DIV tag?
yes both can be used. More then that you ca use multiple classes in a class attribute:


.fl { float: left; }
.bg { background-color: #000; color; #fff; }




<div class="fl bg">....



3) Or is it best to just use a seperate style sheet for each page, where major differences occur?
that depend of how did you organize your work. I use one stylesheet for each group of pages( who have same look).
usualy people build library with css rules, add commen to keep track of what they do and reuse them later. I prefere to write the stylesheet each time I need. I know that some people will say that is useless to repeat but I have two reason:
- keep fresh my memory, when I forgot I search in my old work
- keep work fresh whit what I learn in different frametimes
- each site is uniq, it's harder in my opinion to reuse and I prefere to focus on create something new


4)Is there a way of putting more than one stylesheet inside one document? If so, how would they be seperated?
you can have multiple link element pointing to how many stylesheet you want.


Everyone must have their own system, so how do you more experienced coders deal with naming things?


Or perhaps I should call my DIVs Rod, Jane, Freddy, Mary, Joseph...? Hmm... That could get weird...
no problem if you easy associate Rod, Jane, Freddy with what you intend to do in that div, :) I'm serious here!

some rule I use:
- split group of rules in pieces. If is something like:


.myfirstclass {
float: left;
background-color: #000;
color: #fff;
}

I use two classes as in above example because is a grater probability to need float: left in a lot of places, :)
- use class often, id only when element uniq.
- name convention: concatenate first leter as in fl <- float left, and add numbers when name are in conflict. The numbering start from head with 0( c/c++ habit, :))
- when I finish something I take some time for a overview

Probably I forget to say some things but is not important, the idea is to know how other people do and build your own style of work getting what you think is good and fit with your skill.

I said "I'm serios here". That don't mean that I was not serios in rest, :)
best regards



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum