Как минимизировать количество CSS

Question

Так же, как компрессор javascript, я использую ту же технику для css. Сначала я объединяю все файлы в один файл, а затем сжимаю. Но поведение HTML не такое, как раньше, с несколькими CSS-файлами. Каков наилучший способ минимизировать количество файлов CSS?

Answer 1

Вы объединяете их в один файл в правильном порядке? Поскольку CSS позволяет переопределять более ранние правила, вам, возможно, нужно быть осторожным с тем, какая часть объединенного файла предшествует другим частям.

Answer 2

Может ли быть так, что вы по ошибке, возможно, объединяете также свои таблицы стилей печати с основной таблицей стилей? (Просто предположение.)

Если это так, и вы хотели бы сохранить его таким, вы все равно можете сделать это, заключив их содержимое в:

@media print {
    /* content here */
}

Answer 3

Убедитесь, что ваш HTML действителен. Если ваш браузер находится в режиме причуд, возможно, он использует CSS, который ваш компрессор считает ненужным.

Answer 4

Проверьте порядок загрузки ваших файлов в скрипт слияния, как уже упоминали другие. Я нашел Sprockets , чтобы быть хорошим инструментом для управления зависимостями. Он отслеживает изменения в ваших файлах и выводит один файл, готовый к сжатию. Он также будет работать с вашими файлами CSS.

Answer 5

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

Порядок стилей имеет значение, если они конфликтуют, поскольку последний указанный стиль будет иметь приоритет.

Расположение файлов имеет значение для любых указанных относительных URL-адресов изображений, поскольку они относятся к файлу CSS, а не к веб-странице.

Answer 6

Поведение вашего HTML обычно не должно меняться. Если это действительно произойдет, я предполагаю, что у вас есть конфликтующие правила, которые перезаписывают друг друга, и что файлы CSS не объединяются в том же порядке, в котором они были загружены ранее.