Classes & ID's; All or Only One?

[CDev]

The Issue at Hand

---

Really great developers in the past few years are claiming we should not use classes, and another half feel we should not use ID's in our selectors. Both sides are very knowledgeable, lots of experience and a big name in the industry. But neither ever give an explanation as to why unfortunately...

The Details

---

These days I see it more often than not, whenever someone brings up common mistakes or issues in CSS development, a lot of well known and proven great web developers are all claiming different opinions on whether or not one should continue using Classes, or should not bother with ID's anymore. Both sides are very knowledgeable and really know what they are talking about, and thoroughly proven themselves in the industry.

Its a bit confusing to follow, and decide which is right and why we should choose one or the other.

I dont need to give resources here, as there are tons. Just do a quick search on both.
Google:
"Dont use CSS Classes"
as well as
"Dont use CSS IDs"
The results will contradict each other, by both arguing the same reasons why we shouldn't use one or another..

Their Stand

---

When I am not coding myself, I pass time by following professional designers and developers blogs, magazines and websites, just to try to stay in touch with the latest standards, and things to look forward too.
But this is one issue I stumble upon constantly.

One person claims how it is not right to continue using Classes, as they feel they are inferior to ID's. Another person or group will say the complete opposite. Others have just learned coding through only using one or the other, and have been taught that one should only use one or the other.

My Stand

---

Others, like I, believe that we should continue using both for their correct purpose that they have been maintained for since the beginning. Use classes for Selectors that will be used over and over again. Use ID's for selectors that only need properties to be declared to only one selection.

I still think we should continue using both, and I feel it would be unwise to drop the use of one or the other...

The Question

---

What are your thoughts on this issue? Should we continue using both as they have always been used? or should we drop one or the other in favor of a more useful selection?

If so why? Any resources to help justify your claims? and if you don't base your views on resources, but instead personal preference from long term experience, give detailed reason to back your stand.
I want to know if there is a REAL reason why one or the other is either superior or inferior. Why should one ever even consider this?
At first I figured it was a matter of opinion, and personal preference, but now the more and more I see this issue, the more and more these people are trying to make people follow the methods they believe is right. But all in all, I haven't found one actual explanation as to why..

* I would prefer if you answer, please give good reason, and explain why you feel that way.

I just don't get it, why would people feel this way? there is really no good reason to drop one or the other that I can find.
Could using both, or one instead of the other actually effect your development? Is it possible one or the other may be deprecated in the near future, or a good reason why we should start moving towards deprecation of one?

No matter how much I look into it I cant understand this argument. Because as I said, both sides argue the same reasons and contradict each other.

Which is why I am turning to you guys here at WebDeveloper.com forum, to get a little discussion going on this, to hear everyone's opinion, and help me to better understand why people feel this way. If anyone can help to make me understand this or start to consider it in my own development, its a group discussion with other developers or the unlikely case that W3C deprecates one of them.

Please share your thoughts.
Thank you for your time as well.

[bungperson]

both is same i think, but selector id always use to unique name.

[handcraftedweb]

Well I searched for "Don't use CSS Classes" like you suggested and at the top of the list was this: http://coding.smashingmagazine.com/2...-need-classes/

That article strikes me as complete nonsense. Avoiding classes in favor of context selectors (e.g. child selectors), hmmm, I don't think so. Kind of an interesting point of view, but simply wrong.

[Troy III]

Look at this code example.
-analyze it
-study it and
-learn: where, how, and why, each of them is being used...

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=Author content="b.b. Troy III p.a.e.">
<title>Image Gallery</title>
	<style>
	*
			{
			margin: 0;
			padding:0;
			border: 0;
			font-family: 'Trebuchet MS', Helvetica, sans-serif;
			}
	body
			{	
			background: white;
			width: 774px;
			margin: 5px auto;
			}
	.gallery
			{
			position: relative;
			height: 100%;
			width: 100%;
			margin: 4px 0 4px 0px;
			left: 2px;
			background: url([url]http://www.layoutstar.com/images/allbackgrounds/bgs/artistic/artistic_background_01.gif[/url]) no-repeat 73% 48%;
			}
	.thumb span
			{
			position: absolute;
			top: 1px;
			left: 218px;
			border: outset 1px #f0f9ff;
			visibility: hidden;
			text-decoration: none;
			color: black;
			padding: 30px;
			}
	.n1:focus span
			{
			background: url([url]http://www.billfrymire.com/gallery/webJpgs/dry-drought-arid-dirt.jpg[/url])
			}
	.n2:focus span
			{
			background: url([url]http://www.billfrymire.com/gallery/webJpgs/Sun-Valley-golf-course.jpg[/url])
			}
	.n3:focus span
			{
			background: url([url]http://www.billfrymire.com/gallery/webJpgs/close-up-colorful-iris.jpg[/url])
			}
	.n4:focus span
			{
			background: url([url]http://www.billfrymire.com/gallery/webJpgs/stress-fish-blender.jpg[/url])
			}
	.n5:focus span
			{
			background: url([url]http://www.billfrymire.com/gallery/webJpgs/paragliding-valley-sport.jpg[/url])
			}
	.n6:focus span
			{
			background: url([url]http://www.billfrymire.com/gallery/webJpgs/hurricane-space-earth-horizontal.jpg[/url])
			}
	.n7:focus span
			{
			background: url([url]http://www.billfrymire.com/gallery/webJpgs/world-globe-in-oyster-beach.jpg[/url])
			}
	.n8:focus span
			{
			background: url([url]http://www.billfrymire.com/gallery/webJpgs/periodic-table-chemistry-science.jpg[/url])
			}
	.thumb:focus span
			{
			visibility: visible;
			background-repeat: no-repeat;
			background-position: center 30%;
			background-color: #f9f9fa;
			}
	.thumb:focus img
			{
			border: 1px #666 solid
			}
	a,a img
			{
			height: 102px;
			width: 102px;
			}
	span img
			{
			visibility: hidden;
 			width: 490px;
 			height: 320px;
			display: block;
 			}
	h1
			{
			padding: 30px 20px 30px 15px;
			background-color: #444;
			color: #f0f9ff;
			padding-left: 20px;
			}
	h1 i
			{
			color: #aaff44;
			}
	b.o,b.m,b.x,b.i
			{
			display: block; background: #444; padding-top: 1px;
			}
	b.o
			{
			margin: 0px 5px;
			}
	b.m
 			{
			margin: 0px 3px;
			}
	b.x
			{
			margin: 0px 2px;
			}
	b.i
			{
			margin: 0px 1px; padding-top:2px;
			}
	h2, h2 span
			{
			overflow: hidden;
			font: bold 38pt/1.2em georgia, 'Trebuchet MS';
			position: relative;
			width: 100%;
			text-align: center;
			color: #999;
			background: #444
			}
	h2 span, h2 br
			{
			color: #ddd;
			top: 0px; left: 0px;
			position: absolute;
			height: .575em;
			}
	h1 small
			{
			font-size: 0.5em;
			display: block;
			}
	#botm
			{
			text-align: center;
			width: 100%;
			color: #444;
			line-height: 2em;
			background: #fcfdfe;
			}
	.gallery img
			{
			border: 1px #fff outset;
			}
	.thumb
			{
			outline:none 0;
			text-decoration: none;
			}
	#au
			{
			background: url([url]http://i35.tinypic.com/xbkdg9.jpg[/url]) repeat-x;
			font: normal 11px Tahoma;
			color: #000;
			border-top: 1px solid #ddd;
			height: 25px;
			line-height: 25px;
			margin-top: 5px
			}
	</style>

	<!--[if IE]><style>a{outline:expression(hideFocus='true')}</style><![endif]-->

</head>
<body>

<div>
<b class=o></b>
<b class=m></b>
<b class=x></b>
<b class=i></b>
 <h1>Pure <i>CSS</i> Image Gallery demo<br><small>with <i>on click</i> swap</small></h1>
 <b class=i></b><b class=x></b><b class=m></b><b class=o></b>
</div>


<div id=au>&nbsp
 • Aeneas Dardanus •
</div>


<div class=gallery>

<a class="thumb n1" href=# tabindex=1>
<img src=http://www.billfrymire.com/gallery/webthumbs/dry-drought-arid-dirt.jpg><span>
<img src=""><br>Dried... (Bonneville Salt Flats)</span></a>

<a class="thumb n2" href=# tabindex=2>
<img src=http://www.billfrymire.com/gallery/webthumbs/Sun-Valley-golf-course.jpg><span>
<img src=""><br>Sun Valley, -looks green... (Idaho USA golf course)</span></a>
<br>

<a class="thumb n3" href=# tabindex=3>
<img src=http://www.billfrymire.com/gallery/webthumbs/close-up-colorful-iris.jpg><span>
<img src=""><br>Some Colorful surprise.</span></a>

<a class="thumb n4" href=# tabindex=4>
<img src=http://www.billfrymire.com/gallery/webthumbs/stress-fish-blender.jpg><span>
<img src=""><br>Feeling safe?</span></a>
<br>

<a class="thumb n5" href=# tabindex=5>
<img src=http://www.billfrymire.com/gallery/webthumbs/paragliding-valley-sport.jpg><span>
<img src=""><br>Watch this...</span></a>

<a class="thumb n6" href=# tabindex=6>
<img src=http://www.billfrymire.com/gallery/webthumbs/hurricane-space-earth-horizontal.jpg><span>
<img src=""><br>Hurricane or typhoon? -Can't tell - but it's Huge!</span></a>
<br>

<a class="thumb n7" href=# tabindex=7>
<img src=http://www.billfrymire.com/gallery/webthumbs/world-globe-in-oyster-beach.jpg><span>
<img src=""><br>...Some Nut in a shelve</span></a> 

<a class="thumb n8" href=# tabindex=8>
<img src=http://www.billfrymire.com/gallery/webthumbs/periodic-table-chemistry-science.jpg><span>
<img src=""><br>Need some chemistry to start things over.</span></a>
</div>


<div id=botm>
<p><small> Gallery <i>Images</i> are a property of 
<a href=http://www.billfrymire.com title="you can see more here">bill frymire visuals</a>
 |•|  b.b. Troy III p.a.e. </small></p>
</div>

<div style='border-top: solid 3px #af4; margin:0'>
<H2 title="TROY III"> TROY III <span> TROY III </span> </H2>
 <b class=i></b><b class=x></b><b class=m></b>
 <b class=o></b>
</div>

</body>
</html>

...and don't waste your time with nonsense..., -such issue is non existent.
learn about selector priority instead.

Say if you have a CSS like:

.mydiv{color:blue}
#mydiv{color:red}
div{color:green}

And HTML like:

<div id=mydiv class=mydiv> my div </div>

-What (font) color will this element have?
(It will be red of course! )


That's why the issue in question, is a complete nonsense.
You will use selectors according to their strength, and only as strong as necessary and of course only when required to override some previously defined/ inherited style.

Have fun.