is it good idea to remember html tags in css classes and Ids?

Question

If we keep tag name within selectors.

For example:

#divMainContentBody { … }

.spanImportant { … }

This minimizes the need to switch between your stylesheet and your markup, since the ID and class already tells you what element type it is referring to.

---

Updated after @Guffa's answer:

I found this advise in this book also http://answers.oreilly.com/topic/647-how-to-write-efficient-css-selectors/

Don’t qualify ID selectors

Because there is only one element in the page with a given ID, there’s

no need to add additional qualifiers. For example, DIV #toc is unnecessary and should be simplified to #toc.

Don’t qualify class selectors

Instead of qualifying class selectors for specific tags, extend

the class name to be specific to the use case. For example, change LI .chapter to .li-chapter, or better yet, .list-chapter.

Answer 1

Prefixing identifiers in this was is called hungarian notation, and is used for aspects of identifiers that is considered crucial for their use.

In most cases I don't think that the element type is important enough to make it into the identifiers in the CSS. If the names are chosen well you should already be able to determine the important information from them.

If the element is important, you could use it in the selector instead of putting it in the identifier. That way the selector will actually only work with that element:

div#MainContentBody { ... }

span.Important { ... }

Answer 2

In my view, this may not be the best practice as using location-dependent styles or "trending" your CSS towards a location-based pattern (i.e. "this can only be used for a span", "this is only for a div") force you to create a 1:1 relationship between your HTML elements and your CSS classes.

CSS classes are appropriately-named since - just like in OO programming - you can have your CSS classes inherit from each other. To this end your better approach is to keep to a meaningful naming convention (as you've already suggested), but write classes that are modular and can be extended.

The upshot of this is that you can then use one class in a large variety of different ways and places without having to continually override behaviours in your style sheets. This keeps your styles more predictable and your CSS much more maintainable.

Read more about it on http://wiki.github.com/stubbornella/oocss or SlideShare.