How it works
AngularCSS listens for states (or route) change events, adds the CSS defined on the current state and removes the CSS from the previous state. It also works with directives in the same fashion with the compile and scope destroy events.
To illustrate this behavior, each page and directive is defining CSS via this API. The main header changes color based on the current page CSS. Each directive's background color comes from the CSS defined in the Directive Definition Object (DDO). On page change, the CSS defined changes accordingly. The CSS from each state is overriding its directive's background opacity. See the app source code below for more details.