CSS has always been the weakest link for me in terms of creating larger web apps. PHP, JS? Now manageable. But over the years, CSS has remained the most stubborn language to structure well. You can have dozens of CSS files, but any line in any one of them can affect any element in any page. The horror. It seems like no matter what decisions you make on how to organize the CSS, you end up running into problems. I think the relative absence of CSS design patterns relative to other languages hints at the problem – it’s just not something that developers have been able to properly address, due to the limitations of the language itself.

(On a related note, thank heavens for CSS pre-parsers).

This is why I’m so excited about the new scoped HTML5 attribute for the style tag, which just landed in Firefox 21 (out now!). It lets you scope your CSS based on the location in the DOM. Here’s a simple example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html>
<body>
   <h1>An h1, styled according to the browser defaults</h1>
   <div>
      <style scoped>
      h1 {
         color: red;
      }
      </style>
      <h1>A style-scoped h1. Holy crap it's red!</h1>
   </div>
</body>
</html>

If you’re running FF21 you can see an example here:
http://www.benjaminkeen.com/experiments/scoped.html

There’s still a long way to go, but this is tremendously encouraging. I have little doubt that Web Component shim developers (Polymer, anyone?) will be making use of this new feature in no time.

Hopefully the other browser vendors will implement this soon. As always, see caniuse.com to keep up to date:
http://caniuse.com/style-scoped