javascript - 订购 CSS/JavaScript 外部文件的最佳方式包括

Question

包含 CSS 外部文件的最佳方式是什么？从一般到具体还是相反？

更准确地说，在 Rails 3.1 中，生成的默认 application.css(无 Sass)包含:

/*
 *= require_self
 *= require_tree .
 */

它从特定到一般，所以我想如果我想添加 jQuery UI 主题，例如，最好的是:

/*
 *= require_self
 *= require_tree .
 *= require jquery-ui/smoothness/jquery-ui-1.8.16.custom.css
 */

代替:

/*
 *= require jquery-ui/smoothness/jquery-ui-1.8.16.custom.css
 *= require_self
 *= require_tree .
 */

我问这个问题是因为我知道例如在 C++ 中建议从最具体到最一般。

同样的问题代表 .js 包含，默认情况下 Rails 生成(没有 CoffeeScript):

//= require jquery
//= require jquery_ujs
//= require_tree .

这里似乎是相反的:从一般到具体。

Rails 开发人员是故意选择默认排序的，还是随机选择的？如果从vue的技术 Angular 没有更好的方式，通常使用的约定是什么？

Answer 1

CSS 必须首先包含在一般规则中，然后是更具体的规则。这允许更具体的规则始终覆盖一般规则(在您希望发生这种情况的情况下)，而无需明确管理 CSS specificity .

所以，如果您有这两个 CSS 规则:

// general rule
.subitem {color: blue;}

// more specific rule
.currentitem {color: red;}

而且，你有这样的 HTML:

<ul>
    <li class="subitem">Item</li>
    <li class="subitem currentitem">Item</li>
    <li class="subitem">Item</li>
    <li class="subitem">Item</li>
</ul>

您需要确保 .currentItem 的更具体规则出现在 .subitem 的更通用规则之后，以便 .currentitem 规则会在您希望的时候生效。

Javascript 文件必须包含在适当的依赖顺序中。例如，如果您的 javascript 文件 B 在其初始化代码中使用文件 A 中的函数，则文件 A 必须包含在文件 B 之前。如果两个 javascript 文件没有初始化依赖关系(例如，它们不在彼此调用函数初始化)，那么它们可以是任何顺序。

仅供引用，在 javascript 文件中，您应该确保全局命名空间或特定命名空间中的函数在多个文件中不存在同名。如果是这样，最后一个被包括在内的将是有效的。通常，您不应依赖此行为，而应删除具有相同名称的冲突函数。