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

Question

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

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

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

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

那么,问题是:

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

提前致谢!

Answer 1

样式应始终存储在单独的文件中。除非您正在编写将嵌入到其他人的页面中的代码或发送 HTML 电子邮件，否则内联样式不是一个好主意（即使对于电子邮件，您也可以轻松地从外部文件内联样式）。模板内的样式链接标签只会掩盖您的应用程序，迫使开发人员阅读您的所有指令，而他们甚至可能不知道 AngularJS。

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

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