Мне как то и в 2017 году неплохо

css модули, все дела

Смотря что за CSS. Мб там полно мёртвых стилей. А вообще, его тоже как и JS можно разделять и загружать только когда нужно.

Прямо вижу — Буцтрап целиком, Foundation в трёх версиях, каждый со своим normalize.css, ну и парочка jQuery плагинов со своими файлами

ну вот, а раньше css модулей и сборщиков не было)

Прямо вижу — Буцтрап целиком, Foundation в трёх версиях, каждый со своим normalize.css, ну и парочка jQuery плагинов со своими файлами

и еще на все медиа брейкпоинты полностью весь код продублирован

И частично переопределен импортантами

Хорошо в css нет !important!important

Импортанты юзерстилей переопределяют импортанты сайта

А ещё должен быть козырной ипортант

У нас же энтерпрайз судя по описанию - нужно чтобы в должностной инструкции было требование устанавливать файл со стилями

Смотря что за CSS. Мб там полно мёртвых стилей. А вообще, его тоже как и JS можно разделять и загружать только когда нужно.

нет, тогда страница прыгает

Из окна

А вы пробовали не добавлять мёртвые стили?)

слишком много кастомных элементов, не понятно что нужно сейчас

Из окна

тут поржать или по делу?

Если по делу то нет единого решения

Если изначально не было архитектуры - просто так не порежешь

Потому что стили могут и аффектить

что значит архитектура? порезат можно, что дальше?

И самое страшное когда на аффекте строят новые стили

>что значит архитектура? Я кажется нашёл в чём проблема

И самое страшное когда на аффекте строят новые стили

В состоянии аффекта

Суд оправдает

слишком много кастомных элементов, не понятно что нужно сейчас

Выносите в модули с тестированием на регрессии

Чуваки, как замутить, чтобы цикл выводил элементы объекта именно в том порядке, в котором они указаны? https://jsfiddle.net/ozg3v9k4/

for (var key in obj) { console.log(key); }

Других вариантов нормальных нет

вынес, что дальше? смотреть как прыгает рендер страницы?

Тесты только решение, да

Как именно он прыгает

?

вынес, что дальше? смотреть как прыгает рендер страницы?

Ты понимаешь, что такое модули?

for (var key in obj) { console.log(key); }

Так всё равно не заработает

Ты понимаешь, что такое модули?

как понять, какой модуль на текущей странице?

Тогда точно всё плохо

как понять, какой модуль на текущей странице?

Позови взрослых, не стоит самому такие проекты рефакторить))

Блин. И правда

¯\_(ツ)_/¯

Позови взрослых, не стоит самому такие проекты рефакторить))

дядька, рассказывай воркфло, не томи

как понять, какой модуль на текущей странице?

Опиши конкретно проблему и те решения что ты сам видишь

я написал же - всё плохо

дядька, рассказывай воркфло, не томи

css модули делают компоненты независимыми, и после перевода проекта на такую технологию проблема неиспольщуемых стилей не должна появляться by design

после леса билд 1м

Нет кода компонента — нет css

я написал же - всё плохо

Ну тогда тут поможет только переписывание с нуля

В ExtJS и втором ангуляре из коробки оное

css модули делают компоненты независимыми, и после перевода проекта на такую технологию проблема неиспольщуемых стилей не должна появляться by design

можно подробнее? где собирать модули?

https://github.com/css-modules/css-modules

Вообще в древнем хтмл уже был модули

А точнее решение проблемы с месивом

Называлось оно атрибутами

Тег и стили едины by design

Но увы куча повторяющихся кусков

Атрибуты и сейчас есть, только это выглядит и пишется как огромный костыль

Ксс решил проблему с повторением, но добавил проблему с перемешиванием всё в кучу

Ну и теги это слишком мелкие компоненты

А, ты про это)

Ага

Просто в css можно сделать "модульность" разграничивая неймспейсы прям по кастомным html атрибутам

Эволюция штука суровая

Но с такого проекта наверное путь только в дурку

Техник 100500 видов

Но суть одна - нужно снова привязать стили к компонентам, но не к тегам а к группам и с инкапсуляцией

Впрочем это тоже лишь одно из решений

можно shadow dom использовать ^.^(в хром и опере)

Но сейчас компиляцией решается и прочим таким

ERROR: S client not available

Шадоу как-то долго заходит

shadow dom это тот ещё адок))

Inception в чистом виде

https://github.com/Wildhoney/ReactShadow

https://github.com/css-modules/css-modules

так. я разбил всё на модули. что дальше?

так. я разбил всё на модули. что дальше?

Радоваться

так. я разбил всё на модули. что дальше?

Теперь удаляй всё что осталось

да ничего нет больше. но все модули собираются в билд, и он 1м

И не используй global

да ничего нет больше. но все модули собираются в билд, и он 1м

CSS не может столько весить

А бандл может

это не весь css, это только main

ну, без gz понятно.

Ты же сказал, что всё вынес

внутри мобилки и шрифты. но самого css много всё равно

CSS не может столько весить

У меня кстати на проекте пол метра css

Но это по ходу потому что кто-то не может жить без бутстрапа ?

бутстрап порезаный у нас тоже кусочек

Оптимизированные модули вообще не больше 50-100 весят все вместе

ты говоришь что каждый элемент на странице это модуль, так?

дальше что, на сервере под каждую страницу собирать свой пак?

Картинка 1000х1000 px в base64

Как значение для бекграунда

И получаем 100500 мегабайт ксс

дальше что, на сервере под каждую страницу собирать свой пак?

Анализировать, кто съел всё место и как это можно переписать

рецепт нужен. пока я вижу - это дробить модули. нельзя просто так переписать сайтище с 1м css

Если ты действительно внедрил сейчас модули, а не ждёшь рецепта, то в итоговом блде у тебя прямо видны все зависимости в коде, просто смотришь, где что используется и что оказалось лишним

Потом какую-нибудь асинхронную подгрузку чанков сделать

10к страниц. как текущая страница поймет что ей нужно?

асинхронно не пойдет, перерендер это гибло для пользователя

асинхронно не пойдет, перерендер это гибло для пользователя

Чо