css - 将样式与指令相关联的正确位置在哪里？

Question

指令的一种用途是创建可重用的 HTML 元素，这些元素可以干净利落地插入到您的页面中。

我在我当前的元素中多次使用过这个想法，但我无法确定包含给定指令的 CSS 声明的正确位置。目前我想到的是:

• 内联 css:这总是不好的并且违背了我的道德立场，但是它非常明确地说明了指令的确切 css 是什么，并且它消除了 CSS 与其他页面元素发生冲突/覆盖的可能性，反之亦然。
• html 模板中的样式/链接标签:样式标签可以避免内联 css 的不良部分，但在文本编辑器中维护起来可能很麻烦(例如 emacs 无法正确格式化)。可以将指向样式表的链接添加到模板中，但我们真的应该在页面中途添加 CSS 链接吗？
• 外部样式表:包含 CSS 的传统“正确”方式似乎也不太合适，因为可能会发生冲突，就像我在第一条中提到的那样。此外，我现在需要记住将其添加为页面顶部的链接标签，这似乎与定义指令的方式不一致——我不需要为模板显式添加链接标签(提供我正在通过指令定义中的“template_url”导入模板)那么为什么我需要为样式执行此操作？

我意识到我也可以将它添加到任何站点范围的全局 CSS 中，但这同样不是一个好的做法，因为我应该能够将指令从一个元素提升到完全不相交的另一个元素。

那么，问题:

为旨在成为可重用 HTML 段的给定指令放置 CSS 声明的正确位置在哪里？

提前致谢!

Answer 1

样式应始终存储在单独的文件中。除非您编写的代码将嵌入其他人的页面或发送 HTML 电子邮件，否则内联样式不是一个好主意(即使对于电子邮件，您也可以 inline your style easily from an external file )。模板中的样式链接标签只会模糊您的应用程序，迫使开发人员阅读您的所有指令，他们甚至可能不知道 AngularJS。

对我来说，你想要一个错误问题的答案。 你的风格不应该关心你是否使用 AngularJS。在编写 CSS 代码时，您将遵循良好的 CSS 实践。指令只是可以从类绑定(bind)中获益的 HTML View ，但绝不应该成为组织 CSS 的因素。只需选择一种 CSS 结构(BEM、OOCSS、SMACSS、Atomic Design 等)并让您的团队和您自己遵循它。

tl;dr Styles 不应该关心正在使用什么行为层。使用良好的 CSS 实践，在这种情况下，良好的 CSS 实践是将您的样式放在外部样式表中。