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

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

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

• 内联css：这总是不好的，违背了我的道德立场，但是它非常明确地说明了指令的确切css是什么，它消除了css与其他页面元素冲突/覆盖的可能性，反之亦然
• html模板内的样式/链接标记：样式标记可以防止内联css的坏部分，但在文本编辑器中维护起来很麻烦（例如，emacs不能正确格式化）。样式表的链接可以添加到模板中，但是我们真的应该在页面的中间添加CSS链接吗
• 外部样式表：传统的包含CSS的“正确”方式似乎也不太适合，因为可能会发生冲突，就像我在第一个项目中提到的那样。此外，我现在需要记住将其作为链接标记添加到页面顶部，这似乎与定义指令的方式不一致-我不需要为模板显式添加链接标记（假设我通过指令定义中的“template_url”导入模板），那么我为什么需要为样式这样做呢

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

因此，问题是： 对于要作为可重用HTML段的给定指令，放置CSS声明的正确位置在哪里

---

提前谢谢

在外部文件中，所有css类都应带有供应商前缀。

---

指令通常使用外部文件作为html模板-外部css中也没有错误。

样式应始终存储在单独的文件中。除非你编写的代码会嵌入到其他人的页面或发送HTML电子邮件中，否则内联样式是个坏主意（即使对于电子邮件，你也可以）。模板中的样式链接标记只是模糊了应用程序，强制开发人员阅读您的所有指令，他们甚至可能不知道AngularJS

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

---

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

供应商前缀不是问题，因为无论CSS声明在哪里，我都会添加它们。我知道通过“templateUrl”包含指令HTML，所以您是否建议在包含的HTML模板中声明一个标记（以我在第二个要点中描述的方式）？不，它不会很酷（在我看来）和脏。我更喜欢有关于该指令文档的页面，以及“如何使用”指令的说明。在那里写下必要的css文件，用户将在

标题中包含此文件（可能用户甚至会缩小该css并与其他css连接）。正确的位置完全可以是一个意见。选择任何东西并坚持那个惯例。你们说得对，这只是一个意见，应该把它放在哪里，但我想知道一个惯例是否已经确立。两周过去了。你选择了什么解决方案？你测试过不同的指令吗？在进行了全面的在线调查后，我发现将指令样式与外部模板和javascript定义文件并排使用是最好的方法。我的调查范围有多广是毋庸置疑的，现在这是你必须自己弄清楚的。OZ和jjperezaguinaga回答了贝娄、爸爸的风格指南、freenode的#angularjs频道和angular material的文件夹结构上的问题，这些都是提出这个公式的参考资料。