I've noticed that most front end coders don't use element names before classes/IDs.. and am wondering why? #wrapper div#wrapper For the experienced coder, wrapper automatically means that the element is a division, so he doesn't have to think twice if he doesn't have the element name right before the ID. Let's say we had a news site, and in the content div we had a bunch of articles as follows: <div class="article"> <h2>article title</h2> <p>lorem ipsum dolor sit amet conspecteur lorem ipsum dolor sit amet conspecteur lorem ipsum dolor sit amet conspecteur lorem ipsum dolor sit amet conspecteur </p> <ul class="extra"> <li><a class="author">Dr. Jekyll</a></li> <li class="date">September 28, 2009</li> </ul> </div> I believe the majority (of novice CSS coders) would have their selectors as follows: (at the top of stylesheet) a:link, a:visited { color:blue; } .article { background:#f5f5f5; border:1px solid #ddd; margin:0 0 1em; } .article h2 { font-size:1.4em; } .extra li { display:inline; } a.author { color:#c00; } li.date { color:#666; } The novice css coder would just use the minimum to target the element, all that's needed is the class name and the anchor element and the link changes to red color, and that's exactly what the coder wants. A more seasoned coder would probably have the following selectors, making it a little bit more 'consistent' looking and easier to read, since you have them all grouped and you have the .article right before an element, if any. .article { background:#f5f5f5; border:1px solid #ddd; margin:0 0 1em; } .article h2 { font-size:1.4em; } .article .extra li { display:inline; } .article a.author { color:#c00; } .article li.date { color:#666; } For the last two lines, the coder might even include the extra class for the ul .article .extra a.author { color:#c00; } .article .extra li.date { color:#666; } I think you see the benefits of adding the class name of the parent element before the element you're targeting (the seasoned coder's block of code is far easier to read than the novice's) And this is where it ends, this is how many of you do your styles. I think when we all started out using CSS, some of us learned to have the element names before any classes or ID's, like so: div.article { } div#content { } But later on we found out those element names were unnecessary and some of us are lazy typers and just stopped using the element names. Now, where I work we deal with a hundred or so websites, and you will never remember the (html) structure for even a quarter of those. We do a lot of maintenance work, where we have to read someone else's stylesheet and modify things around because of client requests. Now, say you were editing someone's stylesheet and you came across this... .contact-info { color:blue; width:495px; float:left; display:inline; } a.phone { color:red; text-decoration:underline; } .company { font-weight:bold; } .zip { font-size:.9em; } You look at the source code and notice that an anchor with a class of phone, a span with a class of company, and a span with a class of zip are in a paragraph with a class of contact-info. Would it not have been easier if it was something like this? p.contact-info { color:blue; width:495px; float:left; display:inline; } p.contact-info a.phone { color:red; text-decoration:underline; } p.contact-info span.company { font-weight:bold; } p.contact-info span.zip { font-size:.9em; } You can easily understand that all of those elements are in a paragraph with a class of contact info, and that because there is an element name before contact-info, you know that is a paragraph (instead of a division) I think having the element names before classes/IDs are useful, and can potentially save time for everyone. If you're only just one developer doing a stylesheet for a company where no one else is working, you would easily know what elements you have and what their class names are.. but later on down the rode what if you're no longer maintaining the website and someone else has to make modifications to your stylesheet, in which you didn't have element names before IDs/Classes and he has to look at the source code to know which element is a parent of which, what ".company" is trying to target (a paragraph? span? anchor? div?). I'm just saying I think everyone should start using element names as a best practice. Thoughts?
Including it is a waste of bandwidth for little or no functionality - and from a presentational standpoint it shouldn't REALLY matter what the tag is. Moreso you might be assinging the class to different tags to share properties (I do this with 'current' a good deal) like font-size, in which case you might use... well, for example say you have a menu and a corresponding tab in a css layover: <ul id="menu"> <li class="current">Some data</li> <li>Some more data</li> </ul> <div id="article1" class="current"> Some test content </div> <div id="article2"> </div> if both are using most of the same properties: .current { position:absolute; top:0; left:0; z-index:5000; } but different background images: li.current { background-image:url(images/whatever.png); } div.current { background-image:url(images/dummy.png); } Then you have justification for including the tag. (though I would probably use the ID or class wrapping them instead of the tag) There's also the issue that when laying out a page I often switch what tag is used to try different techniques/approaches to problems. Constantly deleting the tag type before the class is a waste to me. Of course, with your above example I'd probably code that without the a before .phone unless I had another a declaration above that I needed to override - and that would only happen if nested inside an ID. Though to be honest, I'd NOT be using spans for those or putting them all in a paragraph, as it SOUNDS like that's not a paragraph... but I'd have to see the HTML for that to be certain Paragraphs do get abused WAY too often as containers... So much for semantic markup.
Oh man, thx Soulscratch. I was about to post a thread one of these days asking about what the difference was... all my books are new and never use the div#wrapper, only #wrapper and I wondered if either I was doing something wrong, if this was an older style, or if it made any difference in specificity in the CSS (to me this would be the most important thing). My company is small, but there are a couple of guys working on various websites... I'm about to redo a site pizzaatje.nl because... it's obvious why. If I think other people are going to read the CSS, I've already made sure most of my names make sense (looking at the site, you can guess well what part is named what). Does adding the tag name change anything with specificity? In the instance of div.wrapper vs .wrapper?
Yes. div#foo { background:red; } #foo { background:blue; } The division will have a red background because the first rule is more specific (element name + id is more specific than just the id). Remove the div from the first rule and it will be blue since the two rules will have the same exact specificity, except the rule with a blue background comes later.