Why does blueprint css define a div.class and class with the same styling?

Question

In the linked code for the blueprint CSS framework, there is a style defined for a div.class selector and just the .class selector. Isn't this redundant? Or is there a more subtle reason for defining the class with two selectors?

https://github.com/joshuaclayton/blueprint-css/blob/master/blueprint/src/grid.css (lines 229-235)

/* In case you need to add a gutter above/below an element */
div.prepend-top, .prepend-top {
  margin-top:1.5em;
}
div.append-bottom, .append-bottom {
  margin-bottom:1.5em;
}

score 3 · Accepted Answer · answered Dec 27 '10 at 10:19

Interesting question. I've not used Blueprint, but then if you choose to override either div.prepend-top or .prepend-top, only that selector's styles will be overridden.

That means doing this:

.prepend-top { margin-top: 1em; }

Will leave the styles for <div>s with that class unaffected (still a 1.5-em top margin), because div.prepend-top is a more specific selector and so will take precedence for <div> elements.

And doing this:

div.prepend-top { margin-top: 1em; }

Will leave the styles for other elements with that class unaffected, because of the div type selector. Likewise for the append-bottom class.

Again I've not used Blueprint, but I think it has something to do with how it expects your HTML to be structured.

I see, that makes alot of sense (doing it for more or less specificity). Thanks! — noli, Dec 27 '10 at 11:11

Why does blueprint css define a div.class and class with the same styling?

1 Answers1