Search code examples
cssxhtmlsemantic-markup

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

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:

alt text

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.

Solution

  • 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 { ... }