Question

What is the best way to include CSS external files? from general to specific or the opposite?

More precisely in Rails 3.1, the default application.css (no Sass) generated contains:

/*
 *= require_self
 *= require_tree .
 */

It goes from specific to general so I guess if I want to add jQuery UI theme for example, the best would be:

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

instead of:

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

I ask this question because I know that for example in C++ it is recommended to go from the most specific to the most general.

The same question stands for .js includes, by default Rails generates (no CoffeeScript):

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

Here it seems to go the opposite: from general to specific.

Did the Rails devs choose a default sorting on purpose, or is it just random? If there is no preferable way from a technical point of vue, what are the conventions usually used?

Answer 1

CSS has to be included with general rules first and then more specific rules. This allows the more specific rules to always override the general rules (in the cases where you want that to happen) without explicitly having to manage CSS specificity.

So, if you had these two CSS rules:

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

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

And, you had HTML like this:

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

You would want to make sure that the more specific rule for .currentItem came after the more general rule for .subitem so that the .currentitem rule would be in effect when you wanted it to be.

Javascript files must be included in an appropriate dependency order. For example, if you have javascript file B that uses functions in file A in it’s initialization code, then file A must be included before file B. If two javascript files have no initialization dependencies (e.g. they don’t call functions in each other at initialization), then they can be in any order.

FYI, in javascript files, you should make sure that no functions in the global namespace or in a specific namespace exist with the same name in multiple files. If so, the last one to be included will be the one that is in effect. In general, you should not rely on this behavior, but should remove conflicting functions with the same name.