Грузим много CSS для IE в режиме разработки

[SergeiStartsev]

А разве большое кол-во грузящихся файлов ресурсов не является bad practice?

[lusever]

Да. Мое решение только для режима разработки, когда удобно дебажить файлы по отдельности, а не слитые в один. В тексте это написано, но легко пропустить. Переформулирую.

[SergeiStartsev]

Ясно. Из поста было не совсем понятно, что это «only for dev mode», наверное смутила фраза

Менять бэкенд, что бы он склеивал статику на лету и выводил другую логику специально для IE было непропорционально трудозатратно.

[macgera]

Я как-то обычно делаю так: создал основной css, потом файлик какой-то структуры или элементов. Отладил? Отдал в общий. Но в соответвующий комментарий. И работает очень даже хорошо.

[fiskus]

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

[liquidautumn]

Хватает одной.

[lusever]

Для декомпозиции. Разрабатывать сайт в большой команде и держать пару css файлов на весь проект, как минимум будет приводить к бесконечным конфликтам.

[artishok]

Ладно вам с большим количеством… Полгода потратили на 30 строк?

[lusever]

Я хотел подчеркнуть выдержку скрипта, перед тем как выложить в паблик.
Было подозрение, что ререндеринг стилей мог создать какие-нибудь специфичные баги. Но все хорошо, и ни каких особых багов в IE мы не нашли.

[Smerig]

Вроде только для IE8 и меньше. И почему-то условный комментарий для всех ИЕ, хотя еще есть ИЕ9 и ИЕ10.

[lusever]

Я перепроверил, в IE9 эта бага есть и она фиксится скриптом.
А условные комментарии в IE10 не работают.

[fiskus]

Для IE9 тоже актуально, а в IE10 уже conditional comments нет

[ambientos]

>>>Потом в IE начали пропадать стили из разных блоков, и мы осознали, что столкнулись с проблемой всех крупных проектов

*HANDSHAKE*

[ambientos]

А не проще ли пересобирать все файлы каким-нибудь make'ом и смотреть? Для чего вообще нужно подключать поотдельности каждый ccs'ник — пусть даже для отладки. Можно же как-то задавать классы, совпадающие с частью названия css-файла?

[lusever]

Проще оказалась как раз не думать о сборщиках, а пофиксить браузером. Потери производительности можно потерпеть, ради редких моментов дебага в IE.
И такой код легче переносить из проекта в проект.

[faiwer]

Попробуйте SCSS. У меня куда больше, чем 30 файлов, но в браузере работаю с одним. Генерирует всё на лету при сохранении, довольно быстро (не обращаю внимание на время, жму в браузере F9 (css_reloader) и вижу изменения). Из недостатков стоит отметить лишь то, что нельзя править файл прямо в браузере. Но этот недостаток с лихвой окупается огромными возможностями SASS\SCSS.

[lusever]

А у нас как раз SASS. Но блоки собираются не только на уровне css, а еще и на уровне html. У которого в ресурсах может быть css и js.

[NoN]

Less.js вообще собирает всё на клиенте (только для дев-мода конечно), и как раз по такому же принципу — закачивает всё через XHR и вставляет в <style>

[necromant2005]

<style type="text/css">
   @import url("import1.css");
   @import url("importN.css");
</style>

Я просто оставлю это здесь. И никаких js.

[Vest]

Я не проверял, но судя по этому посту, ограничение в 31 CSS файл, IE10 похоже преодолевает.
Наконец-то!

[rWeb]

В основе вашей модульной структуры лежит методология наподобие БЭМ либо используется какой-то иной подход?

[lusever]

Сейчас используем как у Google Closure Library. JS иклудит js, scss иклудит scss, html рендерится яваскриптом. Еще полгода назад блоки бились по мотивам БЭМ. Html блоки инклудили js и scss, а последние сами подтягивали нужные зависимости. Подробности есть в статье Фронт-энд Островка изнутри.

[vithar]

В Яндексе CSS и JS собирается на лету в один файл (импорты заменяются на содержимое файлов с исключением дубликатов) с использованием fast-cgi решения под названием ycssjs.

Мигрируем с него постепенно на bem server, который используется для сборки всех зависимых ресурсов страницы (например, ещё шаблонов), а не только css и js.

Для сбоки в продакшен используется ycssjs, или borschik, или bem make,