In this post, I show how to leverage css selectors to make styles specific to an AngularJS controller or directive. The technique seems obvious once it's pointed out but it's something I never thought of until recently. Hopefully this can also help others better organize css in their AngularJS applications.

We start with an AngularJS application that is broken down into controllers and directives responsible for different functionality throughout the application. In a big application it can be tricky to setup css selectors that only apply to elements in a specific directive or controller template. You may want a <h2> or <td> element to be styled differently depending on the page or table it appears in. I've seen this handled in a number of ways. One is to give each template a unique id in it's top level element to distinguish it from other templates. The css ends up looking something like this #id.class.div.class.h2. That is a lot to keep track of and hard to maintain. I've also seen side effects when using this approach, where changing styles to fit one template impacts the layout of another template. That's not good. A better way would be if we could specify our custom styles directly on an element and be sure they will only effect those elements in a specific template. If we're using an element directive, we already have a unique parent element to start with. This allows us to simplify the selector. I setup a simple example in plnkr to demonstrate this.

For example, let's say we have an h2 tag in two different directives that we want styled differently. The first directive's selector is <header-monospace> and the second directive's selector is <header-italic>. In our css, we can select the individual h2 from <header-monospace> using the selector header-monospace h2. Now we can add any styles specific to <header-monospace> and are assured those styles will only apply to this directive.

Similarly, we can do the same with a controller. Let's say we want to style the p tag in a controller. Since a controller is defined with the ng-controller attribute directive, we can use a css attribute selector to narrow our selection to only elements that match the specific attribute like this div[ng-controller="mainController"] p. The complete css from the example is below.

header-monospace h2 {
  font-family: monospace;
}

header-italic h2 {
  font-style: italic;
}

div[ng-controller="mainController"] p {
  text-decoration: underline;
}

That is pretty much it. A simple and effective way to use css selectors to make styling an AngularJS application easier. Look at this plunk to see a complete example with a controller and a couple directives.