Q:

Using 

I am adding some CSS styles using .... in the htm file specified in the templateUrl when loading a directive. 
Is this a bad idea?  Meaning will it get repeated every time the template is instantiated on the rendered page or is Angular smarter than that?  Using the inspector, it seems that it gets repeated with each instance of the template. 
How then can I load some CSS that is scoped to a template (directive) and load only and only if the template is loaded. 
Maybe I'm over-optimizing. 

A:

You are over optimizing and likely to lead to maintenance issues.  You would end up playing the, 'where does this style come from' game.  As there could be a style be the same name loaded by a different template, eclipsing the previously loaded style. 
CSS preprocessor such as LESS and SASS, which make creating CSS much better, generally spit out one big file.  However once that file is minified / uglified the size should be manageable. 
Is there a specific need to have a set of styles that only applies to a specific template opposed to building the CSS that gives you the loom you want?