Лучший способ заказать внешние файлы 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 include, по умолчанию Rails генерирует (без CoffeeScript):

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

Здесь, кажется, все идет наоборот: от общего к частному.

Разработчики Rails специально выбрали сортировку по умолчанию или это просто случайность? Если не существует предпочтительного пути с технической точки зрения, какие соглашения обычно используются?

Answer 1

CSS должен быть включен сначала в общие правила, а затем в более конкретные правила. Это позволяет более конкретным правилам всегда переопределять общие правила (в тех случаях, когда вы хотите, чтобы это происходило) без явного управления спецификой CSS .

Итак, если у вас были эти два правила 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 не имеют зависимостей инициализации (например, они не вызывают функции друг в друге при инициализации), то они могут быть в любом порядке.

FYI, в файлах javascript вы должны убедиться, что в нескольких файлах не существует функций в глобальном пространстве имен или в определенном пространстве имен с одинаковыми именами. Если это так, то последним, который будет включен, будет тот, который действует. В общем, вы не должны полагаться на это поведение, но должны удалять конфликтующие функции с тем же именем.

Answer 2

включить css из файла css:

@import "myCSSfile.css";

включает CSS из HTML:

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

включает CSS из JavaScript:

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

Answer 3

Одна вещь, которую я бы добавил на стороне CSS, это то, что вы, вероятно, должны усилить специфичность, выполнив .subitem.currentitem, а не полагаться на порядок.Именно такой «каскад» предназначен для CSS:)

В больших приложениях, в зависимости от порядка, будет сложно.

Кроме того, в случае JS порядок будет влиятьприсваивается идентификатору, если он определен более одного раза.