CSS @import Best Practices

Question

Я запрашиваю мнения о том, как лучше всего обрабатывать @ import или избегать их всех вместе.

Работая с DNN, я обнаружил, что при скининге CSS для всех различных переопределенийэлементы для модулей и тому подобное могут быть очень грязными.Выгрузка всего CSS в один файл может быть трудной для работы, и мне интересно, лучше ли разделить их и импортировать в начало файла skin.css.Существует также вопрос эффективности, и если это хороший компромисс или нет.

Я не профессионал CSS, но думаю, что могу знать ответ на этот вопрос, но все равно спросит.В любом случае можно ли ссылаться на различные файлы CSS так же, как, скажем, файлы .cs?skin.Events.someElement?Разве это не было бы хорошо?; -)

Спасибо.

Answer 1

Лучше всего избегать @import.

По словам Стива Соудерса, объединение @import и link или встраивание @import в другие таблицы стилей приведет к последовательной, а не параллельной загрузке.

Есть и другие проблемы.

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Yahoo также рекомендует против @import, отметив, что

В IE @import ведет себя так же, как и в нижней части страницы, так что лучше ее не использовать.

http://developer.yahoo.com/performance/rules.html#csslink

Я обычно использую одну таблицу стилей и использую link, чтобы взять ее.

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

Answer 2

Из чистого опыта:

Во время работы вы можете хранить все отдельно (reset.css, forms.css, main.css и т. Д.), Если вам трудно работать с одним единственным файлом - я не наденуне делайте даже этого ..

При запуске в производство - храните все в одном файле - без импорта - 1 запрос к серверу - минимизируйте свой CSS.

Исключение составляетдополнительные ie.css, если вы хотите, чтобы ваш main.css был взломан free / pass validation (я тоже этого не делаю, поскольку ни один из моих клиентов не заботился о проверке - люди хотят, чтобы это работало, значки не являются тенденцией :)- поэтому я просто использую хаки через main.css (#, _ и т. д.))