10

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

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

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

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

所以，问题：

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

提前致谢！

4

2 回答 2

2

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

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

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

于 2013-09-14T16:09:06.260 回答
0

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

于 2013-09-13T12:19:17.800 回答