Where is the correct place to keep style associated with a directive?

Question

One use of a directive could be to create reusable HTML elements that can be inserted into your page cleanly.

I've used this idea several times in my current project but I cannot decide where the correct place to include CSS declarations for a given directive are. So far I've thought of:

• Inline css: This is always bad and goes against my moral standings, however it is very explicit in what the exact css for a directive is and it removes the possibility of CSS collisions/overwriting with other page elements and vice-versa.
• Style/link tag inside html template: A style tag keeps the bad parts of inline css at bay but can be a hassle to maintain in text editors (emacs for instance doesn't format it correctly). A link to the stylesheet could be added instead into the template but should we really be adding CSS links midway down a page?
• External stylesheet: The traditional "right" way of including CSS also doesn't seem to quite fit as collisions, like what I mentioned in the first bullet, can happen. Moreover I now need to remember to add this as a link tag at the top of the page which doesn't seem to align with the way of defining a directive - I don't need to explicitly add a link tag for the template (providing I'm importing templates through "template_url" in the directive definition) so why should I need to do this for the style?

I realise I could add this into any site-wide global css as well, but again this isn't good practice as I should be able to lift a directive from one project to a completly disjoint other project.

So, the question:

Where is the correct place to put CSS declarations for a given directive that is intended to be a reusable HTML segment?

Thanks in advance!

Answer 1

Styles should always be stored in a separate file. Unless you are coding something that will be embedded in other people's pages or send HTML emails, inline style is a bad idea (and even for emails you can inline your style easily from an external file). Style link tag inside the template just obscures your application enforcing developers to read all your directives, who might not even be aware of AngularJS.

For me, you want an answer for the wrong question. Your style shouldn't care whether you are using AngularJS or not. When coding CSS, then you follow good CSS practices. Directives are just HTML views that can benefit from class binding, but should never be a factor for how to organize your CSS. Just pick a CSS structure (BEM, OOCSS, SMACSS, Atomic Design, etc) and make your team and yourself follow it.

tl;dr Styles shouldn't care what behavior layer are using. Use good CSS practices and in this case, a good CSS practice is to put your styles in a external stylesheet.