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开发人员是故意选择默认排序，还是只是随机排序？如果从技术角度来看没有更好的方法，通常使用的约定是什么？

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中的函数，则必须在文件B之前包含文件A.如果两个javascript文件没有初始化依赖项（例如，它们不在彼此调用函数）初始化），然后它们可以按任何顺序。

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

Answer 2

从css文件中包含css：

@import "myCSSfile.css";

包含来自html的css：

<link href="myCSSfile.css" rel="stylesheet" type="text/css">

包含来自javascript的css：

document.getElementByTagName('head')[0].innerHTML +=
  '<link href="myCSSfile.css" rel="stylesheet" type="text/css">';

Answer 3

我在CSS方面添加的一件事是，您应该通过执行.subitem.currentitem来强制执行特异性，而不是依赖于订单。这种“级联”是CSS的用途：）

在大型应用中，根据订单会变得棘手。

此外，在JS的情况下，如果定义了多个标识符，则该顺序将影响分配给标识符的内容。

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

3 个答案: