Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts

    What's your #DIV nomenclature?

    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
    Last edited by Doctor_Varney; 11-07-2008 at 02:14 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Quote Originally Posted by Doctor_Varney View Post
    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 (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!
    Last edited by BoldUlysses; 11-07-2008 at 02:17 AM.
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    Doctor_Varney (11-07-2008)

  • #3
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    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}?

    Quote Originally Posted by msuffern
    Do a search for "Same Navigation Code on Every Page" on this page (it's #10).
    That page is brilliant. Cheers for the link!
    Last edited by Doctor_Varney; 11-07-2008 at 02:35 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #4
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    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:

    Code:
    /* ---------- 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.
    matt | design | blog

  • #5
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    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.

  • #6
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Like the other posters I tend to have some default rules in the style sheet like:
    Code:
    /* 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:
    Code:
    <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
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #7
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Doctor_Varney View Post
    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:
    Code:
    .fl { float: left; }
    .bg { background-color: #000; color; #fff; }
    Code:
    <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:
    Code:
    .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.

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

    best regards
    Last edited by oesxyl; 11-07-2008 at 10:15 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •