In CSS is there ever a reason to tie a class to an element type?
May 12, 2014 6:12 AM   Subscribe

Assuming that I'm going to apply the style only to paragraphs... .special { font-size:1.5em } functionally the same as... p.special { font-size:1.5em; } So what's the point of the more verbose p.special?
posted by markcmyers to Technology (7 answers total) 5 users marked this as a favorite
I see I omitted a semicolon. Sorry for the distraction.
posted by markcmyers at 6:14 AM on May 12, 2014 [1 favorite]

What if you decided to create div.special with entirely different style?

Also, human readability. It's important!
posted by jozxyqk at 6:19 AM on May 12, 2014

If it's relevant that the styling applies to paragraph elements, then I think it's just sane to specify it. You can always drop the element selector later.

There's also specificity, the system CSS uses to determine which style rules have precedence. So "p.special" should have a slightly higher precedence than just ".special".

Generally, you might be interested in reading about CSS best practices, for example Jonathan Snook's SMACSS.
posted by mbrock at 6:26 AM on May 12, 2014 [1 favorite]

Per jozxyqk's point, I would recommend avoiding depending on the element selectors. Although you could have p.special and div.special, it can be an extra bit of cognitive load on future maintainers to realize that those are scoped in that way. They're great for readability and clarity, but unless there's some clear semantic reason why the same class will have different effects on different elements (and there are certainly some cases like that) it's probably cleaner to not use the same class name.
posted by heresiarch at 6:51 AM on May 12, 2014 [2 favorites]

Because it makes your code more human-readable and future-proof. Great article here.
posted by danceswithlight at 7:07 AM on May 12, 2014

In situations where CSS matching performance is important, using the class selector alone is faster than using tag name + class.

(But in most situations, you should probably choose whichever selector better expresses your intent, since any speed difference is likely too small to notice.)
posted by mbrubeck at 11:00 AM on May 12, 2014

It's all about selector specificity and the cascade. See the W3C standard (CSS2) here and a good tutorial on Mozilla Developer Network.

The element selector enables fine-grained control of inheritance and cascading, for instance to apply multiple styles to an element depending on its location in the document tree, or to apply a single style to multiple elements which are also styled with a more specific selector. I find the element selector most useful when working with vendor/third-party code that can't be modified, as increasing specificity of selectors will overwrite previous declarations.

For example, if I wanted to overwrite this declaration in another stylesheet:

.Article .Sidebar .Content {
    border: 2px solid white;

I could do it simply by using a more specific selector (or several if necessary):

div.Article div.Sidebar p.Content {
    border: 2px solid black;

If an element selector is not necessary in the overall cascade, there is no need to include it, and you would probably be well-advised not to.
posted by PosthumanIntelligence at 12:02 PM on May 12, 2014 [1 favorite]

« Older Extravagant dessert   |   I'm moving to Bonn! Where should I live? Newer »
This thread is closed to new comments.