dcsimg
www.webdeveloper.com

View Poll Results: Should we drop Classes, or instead ID's in CSS? or continue using both?

Voters
3. You may not vote on this poll
  • Stop Using Classes!

    0 0%
  • Stop Using ID's!

    0 0%
  • Continue Using Both as Needed!

    3 100.00%
Results 1 to 4 of 4

Thread: Classes & ID's; All or Only One?

  1. #1
    Join Date
    Aug 2012
    Posts
    7

    Classes & ID's; All or Only One?


    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.
    Last edited by CDev; 09-24-2012 at 09:51 AM. Reason: typo

  2. #2
    Join Date
    Sep 2012
    Posts
    5
    both is same i think, but selector id always use to unique name.

  3. #3
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    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.

  4. #4
    Join Date
    Jan 2011
    Posts
    123
    Look at this code example.
    -analyze it
    -study it and
    -learn: where, how, and why, each of them is being used...


    HTML Code:
    <!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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles