A few general questions about CSS

Just starting to really get the hang of css and loving it. I have a few questions.

  1. How many divs should I use? for example I have a div whose id is “repairServices” inside it I list all the repair services my client offers. The list is long, so I decided to break the list up and have 10 on one side and 10 on the other side. What I did is I placed the first ten items in a div, positioned it, then created another div for the last 10 items and positioned it so the divs are side by side. Is that the best way to do it? It seems a lot of trouble for simply lining things up.
  2. When do I use id and when do I use class? If I understand it right, I would use class for something generic which can be many like class = “mom” then id=“hank” who is her son. Since there is only one hank I use Id, but since I may add more moms, that should be the class? Or better yet I can have class=“motorcycles” then id would equal a specific motorcycle? Is that correct?


Yess, CSS can be a lot of fun.

The basic rule of how many divs is no more than you need. :smiley: (When Mozart was told his music had too many notes, he said that there were just as many as were needed.)

Regarding the lists, you don’t strictly need to wrap them in divs at all, as the UL itself is a block level element that you can give a width to and float left or right. But it’s not the worst thing in the world to wrap them in divs, though. It might at least help to wrap the two ULs together in a div and float one to the left and one to the right.

As for the positioning, use floats rather than actual positioning (such as position:absolute) which should be used very sparingly in page layout, as it takes the element out of the ‘flow’, which then makes it hard to place it in relation to other page items.

Also be sparing with classes and IDs. You can slap a class or ID on each element, but it’s usually not necessary. For example, if you’ve got a div with a class of “wrap” and a single UL inside that, you can just target the UL with .wrap ul … so you don’t need a class on the UL itself.

Basically, classes can be used over and over on a single page, whereas an ID must only be used once per page. So reserve IDs for unique items. All the same, I use IDs less and less. There’s a good argument that you should reserve them just for elements that are modified by scripts like JavaScript. In terms of CSS, IDs are very powerful, and sometimes far too powerful. If there’s a CSS rule with an ID in it and you want to override it, it harder to do than if the element just had a class on it, and makes the CSS less eficient overall.


Thank you for your reply. I will position the UL list like you have suggested, just to try it.

for positioning, what about using margin-left:500px; or something like that for positioning? That is what I have been using.

When you say you are using IDs less and less, does that mean you are using classes more? If not, how are you calling and identifying things?

Thanks again, off to have some css fun. :slight_smile:

“Acceptable” div, id and class usage is going to depend entirely on the content/page specifics. Its not something where there is a magical number. Some pages have more moving parts than others so its not something that can be generalized. Post the complete page and people will be able to better answer your question.

the thing about CSS, is that people expect general solutions, and that’s not the way it works. Not if you are trying to get best results. You must plan first and approach each problem INDIVIDUALLY. The solution for a previous problem that seem 80% similar may be 0% usable in your current problem.

For example som may conclude that since can center something using horizontally by using width: some px and margin:0 auto… why wouldn’t you be able to center an element vertically using height: and margin:auto 0. ( the answer is that VERTICAL margin, is calculated from the WIDTH of the parent element and not the height… which by the way , means that with some math and if your emelents have a square withinin a square proportion…in that SPECIFIC situation you can use margins to vertically center. first it works then it doesnt work then it woks again…lol.

IDs are unique. This is actually more for javascripting, as many UAs will apply your ID stiles even if you have multiple instances of the same ID. Bottom line once you have given an ID to an element in a document dont use it again. Classes on the other hand you can use multiple times… but it is best to use them sparingly when you can. neither carries ANY semantic meaning; JUST BECAUSE its a list of “motorcycles” you dont have
to give it class=“motorcycles”. if it the only UL in your document, or if ALL your ULs look the same, tho each has a different subject matter … you are best off not giving them a class or ID…

speaking of which… I really hope you DIDNT DO this:

<li>items 1</li>
<li>itrough items 10</li>
<li>items 11</li>
<li>itrough items 20</li>

thats not valid code, only LIs can be direct children of ULs…

The VALID way to do, once more depends on the situation and goal…
but here is one way for one situation:

first code your list properly:
<ul >
<li> item 1</li>
<li> item 2</li>
<li> item 3</li>
<li> item 4…</li>
and the CSS
li { width:50%; float:left;}
ul { overflow: hidden}
try it…:slight_smile:

for positioning, what about using margin-left:500px; or something like that for positioning? That is what I have been using.

Yes, that’s quite a valid way to do it, though I have tended to find it more problematic (at least in older browsers) than just floating left and right.

When you say you are using IDs less and less, does that mean you are using classes more? If not, how are you calling and identifying things?

I have switched to using classes on main elements like wrappers, but as I said, I don’t slap classes on everything. What I was describing above are things like descendant selectors, which is really where a lot of the power of CSS really begins.

Just to re-iterate what’s been said and to expand on it slightly:

There are two reasons to use ID’s instead of classes – the first was mentioned by Dresden_Pheonix, using it to hook to something with javascript using the “document.getElementById” method. The other which has not been mentioned is that it is also a replacement for “named anchors” which are links internal to a document accessed via a hash… For example we have this link:

<a href=“mypage.html#content”>Go to Content</a>

Old school if you had in mypage.html the following:

<a name=“content”></a>

Following the above link would load mypage.html and scroll down to that anchor. Nowadays we don’t have to waste an anchor on that as ID’s perform the same function.

<div id=“content”>

Can also be accessed as mypage.html#content.

This is why ID’s are supposed to be unique – as it’s a target for a single action be it javascript or hash.

Classes generally can’t be targeted (though that’s SLOWLY changing) by scripting directly but you can use them as much as you like. Classes exist SOLELY for the purpose of applying style to elements.

When Ralph talks about using them less – well, there’s a great example and it relates to the use of DIV as well. You will see code like this all the time:

<div id="nav">
	<ul class="navList">
		<li class="navItem">
			<a href="/home" class="navAnchor">Home</a>
		<li class="navItem">
			<a href="/forums" class="navAnchor">Forums</a>
		<li class="navItem">
			<a href="/links" class="navAnchor">Links</a>

Which is 100% grade A pure idiocy. NONE of those classes are neccessary, and even the DIV around it 99.99% of the time is wasted code. UL is a perfectly good semantic block level container, you don’t need to put a DIV around it. When all the elements of a certain tag type get the same class inside a parent element with a class or ID on it, you don’t need the class… I’m also not wild about “nav” – all links on a page are navigation, it doesn’t say WHICH nav it is.

99.99% of the time this code can be made functionally identical:

<ul id="mainMenu">
		<a href="/home">Home</a>
		<a href="/forums">Forums</a>
		<a href="/links">Links</a>

Anything applied to #nav and .navList being applied to #mainMenu. For the rest of those classes:

#mainManu li” == “.navItem”
#mainMenu a” == “.navAnchor”

You see that type of garbage code all the time – look no further than wordpress for examples of it in action with their “cat-item” class; Wordpress’ developers not knowing enough HTML or CSS to code their way out of a piss soaked paper bag… It’s the same as their abusing/misusing/just wasting code on title attributes that are identical to the contents of the anchor it’s on.

Using DIV when you don’t have to is often called “divvitus” – extra classes or ID’s when not needed I’ve taken to calling “Not every ejaculation deserves a name” (Borrowing from George Carlin). Classes and ID’s should be used when the tag is DIFFERENT from it’s siblings and/or children. If all the tags inside a parent element with a class or id are recieving the same style, you don’t need a class or ID on those child elements!

You see it out of old-school coders with tables too – you’ll often see nonsensical rubbish like:

<table class="myTable" cellspacing="0" cellpadding="0" border="0">
		<td colspan="4" class="tableTitle">Title</td>
		<td class="emtpyCell">&nbsp;</td>
		<td align="center" class="columnTitle"><b>Col 1</b></td>
		<td align="center" class="columnTitle"><b>Col 2</b></td>
		<td align="center" class="columnTitle"><b>Col 3</b></td>
		<td align="right" class="rowTitle"><b>Row 1</b></td>
		<td class="data">Data 1-1</td>
		<td class="data">Data 1-2</td>
		<td class="data">Data 1-3</td>
		<td align="right" class="rowTitle"><b>Row 2</b></td>
		<td class="data">Data 2-1</td>
		<td class="data">Data 2-2</td>
		<td class="data">Data 2-3</td>
		<td align="right" class="rowTitle"><b>Row 3</b></td>
		<td class="data">Data 3-1</td>
		<td class="data">Data 3-2</td>
		<td class="data">Data 3-3</td>

All because the coders are unaware of the TH, CAPTION, THEAD and TBODY elements – none of the classes except .myTable is neccessary, the COLSPAN is unnecessary, and all the align attributes have no business in the markup either after we kicked nyetscape 4 to the curb circa 2002-2003ish. Even some of the properties like cellpadding aren’t needed when set to zero as that can be handled by border-collapse:collapse; while even the non-breaking space to force the TD to show isn’t needed if you set empty-cells:show;

PROPERLY written “modern” style that should be:

<table class="myTable">
			<th>Col 1</th>
			<th>Col 2</th>
			<th>Col 3</th>
			<th>Row 1</th>
			<td>Data 1-1</td>
			<td>Data 1-2</td>
			<td>Data 1-3</td>
			<th>Row 2</th>
			<td>Data 2-1</td>
			<td>Data 2-2</td>
			<td>Data 2-3</td>
			<th>Row 3</th>
			<td>Data 3-1</td>
			<td>Data 3-2</td>
			<td>Data 3-3</td>

.myTable caption == .tableTitle
.myTable thead td == .emptyCell
.myTable thead th == .columnTitle
.myTable tbody th == .rowTitle
.myTable tbody td == .data

The handful of extra characters declaring it in the CSS is more than made up for by using HALF the HTML and that if you use that same style across multiple pages on a site, the CSS is cached.

Basically, reserve classes for when something is recieving DIFFERENT styling from it’s siblings or it’s children are different.

So you are saying you write all the HTML, see the design than add classes and ids as necessary to achieve the specific design goals if needed?

For the most part yes. There are some standard ID’s and containers I do throw in ahead of time, but that’s more experience telling me what I know i’ll be using to make the layout.

Really though, if when you first make your HTML you even THINK about the appearance instead of the document structure and semantically presenting the content, you’ve already screwed the pooch.

For my own work, I like to do semantic HTML, design the layout using CSS, then go into the goofy paint program to make the images I hang on the layout – the “content first” approach to site building. To me drawing a goofy picture in a PSD without having content with semantic markup and logical document structure first is putting the cart before the horse. You end up shoe-horning content into graphics that might not even be practical for that content, much less accessible. Few if any people drawing “templates” in photoshop have any clue the limitations of the medium, and it really makes the entire notion of starting with a PSD back-assward.

Which is why the times I end up working with the PSD jockeys I make the HTML and layout CSS, handing it off to them for them to paint over a screen cap… then we go back and forth ten or twenty times arguing about what’s practical to do on a website and what isn’t…

To put it in art terms, photorealism is an impractical goal when the medium is crayons on 80 pound tan oaktag stock.

Alright, that is generally the way I approach it as well. Once you develop so many sites identifying patterns and anticipating useful identifiers just start to come natural.

Agreed, though I do actually sit and think about certain layout details while looking at the content and thinking through the best way to mark that content up. Esp since there is usually more than one way to do it.

I have switched to using classes on main elements like wrappers, but as I said, I don’t slap classes on everything.

While I like keeping id’s on my main boxes, my 3/# key always seems to need extra attention (or more pressure) so I’ve found myself using classes where I otherwise wouldn’t simply because typing a “.” is quicker and easier.

Not a good reason to do something, but there you have it. Maybe I should map the 3 key to something else.