The Benefits of Targetted CSS
Feb 22, 2009I've been developing websites using CSS for quite a few years now and invariably during any design, I find myself desiring some means to prevent styles from cascading into nested elements.
As a simple example, say that in my content area, every paragraph should begin with an enlarged first letter:
#content p:first-letter {
font-size:200%;
margin:0px 3px 3px 0px;
}
However, in the same content area I can also have blockquote elements which can also contain paragraphs. For these paragraphs I don't want the first letter to stand out. Normally, what I would do is provide a second rule that cancels out the first.
#content p:first-letter {
font-size:200%;
margin:0px 3px 3px 0px;
}
#content blockquote p:first-letter {
font-size:100%;
margin:0px;
}
But canceling out CSS rule by rule seems to run counter to the purpose of CSS which is to cascade into the elements in which it is needed. It sure would be easier to have some sort of CSS rule that reverts all elements within a containing element to the pristine and default styles supplied by the browser. It would cut down on a lot of unnecessary style cancelation for sure.
But the reason I've always looked at it this way is because in the past I've felt the need to design my CSS so that it can be understood by the lowest common denominator; these days, that means Internet Explorer 6.0
Internet Explorer 6 cannot understand a few crucial selector combinators which would make my problems literally vanish. These combinators are primarily the direct child combinator > and the direct sibling combinator +. As well, pseudo selectors like :first-child and :last-child are also pretty important.
Armed with these tools, and a browser which can interpret them, it becomes far easier to target specific elements and halt the cascade before it even gets to deeper nested elements. In our example above, instead of blanketing all paragraphs in the body element, we can target only those paragraphs which are direct descendents of the content area.
#content > p:first-letter {
font-size:200%;
margin:0px 3px 3px 0px;
}
We've now done away with the need to cancel out this style within blockquote elements because it only affects paragraphs which are direct children of the content area. Paragraphs nested within any other block level element in the content area will not recieve these styles.
Now extend this concept to an entire document. If all the styles of the document are targetted so they only cascade to the elements which need them and no further, then including another document within that document becomes as easy as using a <div> element with an id as a pseudo-namespace. Just apply a unique id value to the parent HTML element of the embedded document and prefix all the rules in its stylesheet with that id's selector.
Because all the rest of your CSS has been specifically targetted, you can be confident that the embedded document will look exactly like it once did as a standalone document. Previously, attempting something of this nature would make most authors resort to using an <iframe>!
An example of this design style assisting in embedding documents within documents can be seen in the widgets section of this site. Each of the widgets you can use on this site was originally a standalone document meant to be played on your desktop. Normally, taking the HTML from a widget and pasting it into another document would cause all sorts of CSS from the containing document to "leak" or cascade destructively into the embedded document.
Because of the targetted CSS design style though, all that was needed was to change the <body> element of each widget to <div id="widgetname"> then copy that entire block into the content area of the site template. Then prefix all the CSS rules of the embedded document with #widgetname ... plus a few JavaScript tweaks and they were all up and running in no time, pretty much exactly as they appear as standalone games or tools.
The unfortunate thing about this is that, despite falling fast, Internet Explorer 6 still has a pretty significant market share, so liberal use of these targetting selectors won't be viable for sites which need to work there. The good news is that IE7 supports the > and + combinators as well as the :first-child pseudo-selector, so there is only one more version to wait for.
These days, more and more content on websites is embedded content from other providers: shoutboxes, advertisements, blogrolls, RSS feeds etc. By targetting your CSS within your own site template, you can make adding components such as these simple and painless. And since you are no longer including rules to cancel unwanted cascading, you'll be using less CSS overall as well.
Remember, don't try to halt the cascade, channel it only to the elements you want!
| ⇐ New Site Design! | CSV String to Array in JavaScript ⇒ |
