Where is the appropriate place to preserve the style associated with the directive?

Question

One use of the directive may be to create reusable HTML elements that can be inserted into your page.

I have used this idea several times in my current project, but I cannot decide where to correctly place the CSS declarations for this directive. So far I have been thinking:

• Inline css: This is always bad and runs counter to my moral indicators, however it is very clear in what exact css is for the directive, and eliminates the possibility of collisions / rewriting of CSS with other page elements and vice versa.
• Tag style / link inside html template: a style tag stores bad parts of inline css in standby mode, but it can be a problem for supporting text editors (for example, emacs does not format it correctly). A stylesheet link can be added instead to the template, but should we really add CSS links in the middle of the page?
• External stylesheet: The traditional “right” way to incorporate CSS also doesn't seem entirely appropriate, as collisions can occur, like what I mentioned in the first release. Moreover, now I need to remember this as a link tag at the top of the page, which does not seem to match the directive definition method - I do not need to explicitly add a link tag for the template (by providing I import the templates through "template_url" in the directive definition), so why should i do this for style?

I understand that I could add this to any global css on the site, but again this is not a good practice, since I would have to raise the directive from one project to a completely disjoint other project.

So the question is:

Where is the appropriate place to place CSS ads for this directive, which should be a reusable HTML segment?

Thanks in advance!

Answer 1

Styles should always be stored in a separate file . If you don’t encode something that will be embedded in other people's pages or sent with HTML messages, the inline style is a bad idea (and even for emails you can embed your style easily from an external file ). The style of the link tag inside the template simply obscures your application to force developers to read all of your directives that may not even be aware of AngularJS.

For me you need an answer for the wrong question. Your style should not care if you use AngularJS or not . When coding CSS, you follow good CSS rules. Directives are simply HTML representations that can benefit from class bindings , but should never be a factor in organizing your CSS . Just select a CSS structure (BEM, OOCSS, SMACSS, Atomic Design, etc.) And make your team and follow it yourself.

tl; dr Styles do not have to care about which layer of behavior is used. Use good CSS techniques, in which case it’s good CSS practice to put your styles in an external stylesheet.

Answer 2

In the external file, all css classes must be prefixed with the provider.
Directives often use external files as html templates - there is nothing wrong with external css as well.