保持风格与指令相关的正确位置在哪里？

Question

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

我在当前的项目中多次使用过这个想法，但我无法确定在给定指令中包含CSS声明的正确位置。到目前为止，我已经想到了：

• 内联css：这总是很糟糕，违背了我的道德标准，但它对于指令的确切css是非常明确的，它消除了CSS碰撞/覆盖其他页面元素的可能性，反之亦然。
• html模板中的样式/链接标记：样式标记将内联css的坏部分保留在海湾，但在文本编辑器中维护可能很麻烦（例如，emacs不能正确格式化）。可以将样式表的链接添加到模板中，但我们是否应该在页面中间添加CSS链接？
• 外部样式表：包含CSS的传统“正确”方式似乎也不适合作为碰撞，就像我在第一个项目中提到的那样，可能会发生。此外，我现在需要记住将此作为链接标记添加到页面顶部，这似乎与定义指令的方式不一致 - 我不需要为模板显式添加链接标记（提供我正在通过指令定义中的“template_url”导入模板，那么为什么我需要为样式执行此操作？

我意识到我可以将它添加到任何站点范围的全局css中，但这也不是好习惯，因为我应该能够将指令从一个项目提升到完全不相交的其他项目。

所以，问题是：

为给定的指令设置CSS声明的正确位置在哪里，该指令是一个可重用的HTML段？

提前致谢！

Answer 1

样式应始终存储在单独的文件中。除非您正在编写将嵌入其他人页面或发送HTML电子邮件的内容，否则内联样式是一个坏主意（甚至对于您可以inline your style easily from an external file的电子邮件）。模板中的样式链接标记只是模糊了您的应用程序，强制开发人员阅读您可能甚至不知道AngularJS的所有指令。

对我来说，你想要一个错误问题的答案。 您的风格不应该关心您是否使用AngularJS 。在编写CSS时，您可以遵循良好的CSS实践。指令只是可以从类绑定中受益的HTML视图，但绝不应该是如何组织CSS 的因素。只需选择一个CSS结构（BEM，OOCSS，SMACSS，原子设计等），让您的团队和您自己遵循它。

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

Answer 2

在外部文件中，所有css类都应以供应商为前缀 指令经常使用外部文件作为html模板 - 外部css也没有错。