Вхід і реєстрація
Розробка · 26 листопада 2018, 22:13 2060
anonymous

Инструмент оптимальной переразбивки CSS. Есть ли уже такое?

Здравствуйте. Ищу gulp-плагин или просто программу для оптимальной реорганизации CSS-кода и генерации новых классов. Для простоты предположим, что есть 1 html- и 1 css-файл. Программа должна для каждого DOM-элемента получить его вычисленный набор CSS-правил и сгенерировать новые CSS-классы таким образом, чтоб покрыть все CSS-правила наименьшим количеством классов. После этого должна идти замена старых классов в html на новые (тоже опираясь на вычисленный стиль). Подскажите плиз, реализовано ли уже где-то такое?

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

Теми: CSS
👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Олексій Пєніє 27.11.2018 20:29

Грубо говоря, раздать всем стилизуемым элементам IDшники и прописать свой стиль. Будет работать быстро. Ещё быстрее — прописать стили инлайном через атрибут «style».

CSS вообще-то для другого задумывался: для удобочитаемости. Но как всегда, бюрократы сумели навыдумывать «канонов», дабы усложнить и первичную настройку, и читабельность, не говоря уже о том что лишить программистов возможности собственно программировать, да так чтобы всё читалось без жонглирования краказябликами.

Простой пример: строковая константа. Казалось бы, чего проще добавить это счастье в CSS. Но нееет, понадобились несколько практически готовых реализаций, от которых отказались в последствии.

С классами тоже адский ад. Казалось бы, пишешь свою страницу (или иную сущность) — зовёшь классы как хочешь, простыми именами. Но реальность такова, что огромная доля контента пишется на модульных фреймворках, ещё больше — на CMS, тоже со своими модулями и скинами. Как думаете, ваши имена классов не пересекутся? Ах, да, вы начнёте их префиксом «my» — не так ли, мальчеки июни? А особо продуманые поцоны даже со звёздочкой стиль напишут.

Потому, самый удобочитаемый вариант — писать стиль как можно ближе к точке применения. И поверь, на порядок проще управлять кодом с атрибутом «style», чем разыскивать где в обфусцированном CSS (карта — а зачем?) прописано волшебное !important

PS. Не стесняйтесь писать больше. От лишних 10 килобайт ещё никто не умер. В отличие от потерянной скобки или невменяемого именования.

Відповісти
Підтримати
Denis 28.11.2018 08:33
раздать всем стилизуемым элементам IDшники

по рукам надо бить за такое.

Відповісти
Підтримати
Олексій Пєніє
Олексій Пєніє 28.11.2018 17:31

Я сказал как быстрее работает, а не как надо. Дочитай коммент дальше первой строчки, здесь не твитер!
Я сторонник удобочитаемости, и собственно говоря CSS изначально для этого задумывался.

Відповісти
Підтримати
Denis
Denis 28.11.2018 17:52
Дочитай коммент дальше первой строчки

Мы на ты с вами не переходили вроде?

здесь не твитер!

Спасибо КЭП

Я сторонник удобочитаемости

Каким образом использование id вместо классов повышает читаемость?

Я сказал как быстрее работает

CSS отдается один раз, затем кешируется. В любом случае это не критично, более 50% обычно составляют изображения, вот над их оптимизацией и стоит работать в первую очередь. Оптимизация CSS это капля в море. Если у вас не facebook конечно.

быстрее — прописать стили инлайном через атрибут «style».

Быстрее да. Только вот вы сами себе противоречите, т.к. в данном случае удобочитаемость будет около нуля.

Відповісти
Підтримати
Олексій Пєніє
Gennady Dogaev full-stack web developer (freelance) 28.11.2018 13:42

Но умеет писать такие советы в темах про цсс :)

Відповісти
Підтримати
anonymus ps
Олексій Пєніє 28.11.2018 17:32

Умею. Прочитай коммент полностью. А вот «автоматизаторы» — делают стили оптимальными для робота, не для человека.

Відповісти
Підтримати
anonymus ps
Gennady Dogaev full-stack web developer (freelance) 28.11.2018 19:12
Умею.

Так зачем советы даешь айдишники использовать? Там разница в рендеринге в какие-то миллисекунды, если есть.

Відповісти
Підтримати
Олексій Пєніє
Олексій Пєніє 29.11.2018 00:39

Я и привёл это как антипаттерн. То что оптимально для машины — не оптимально для человека. А по-человечески нужны именно каскадные стили.

То есть сама задача оптимизации эффективно машиной не решаема. Потому что надо знать замысел.

Відповісти
Підтримати
Gennady Dogaev
Maksym Leonidov Front-end developer в CreatorIQ 27.11.2018 12:26

Спросите у Андрея Ситника, автора PostCSS. Он говорит, что в PostCSS есть плагины для всего :)

Или попробуйте посмотреть на инструмент CSSO — CSS minifier with structural optimizations. Текущим мейнтейнером которого является Роман Дворнов

Эти ребята уж точно занют все про инструменты для CSS

Відповісти
Підтримати
anonymous 27.11.2018 17:27

Нашел нечто похожее, но все равно не то: www.npmjs.com/...​ckage/postcss-merge-rules
потому что

This module will attempt to merge adjacent CSS rules:
Відповісти
Підтримати
Maksym Leonidov
dm Opr 27.11.2018 11:25

cssComb поможет сделать css читабельным. Ваша задача ясна,
реализации — ’under construction=:-)’

Відповісти
Підтримати
Gennady Dogaev full-stack web developer (freelance) 27.11.2018 18:19

То что просит автор как раз будет нечитабельно. И вообще не может пока что машина делать рефакторинг на таком уровне.

Відповісти
Підтримати
anonymous
anonymous 27.11.2018 18:29

Почему нечитабельно? Сгенерированные имена классов нужно будет в конце только переименовать в человекопонятные имена (а классов будет минимально возможное количество).

Подозреваю конечно, что задача NP-полная, но даже с приближением машинная группировка будет эффективней, чем человеческий BEM (ИМХО)

Відповісти
Підтримати
Gennady Dogaev
Gennady Dogaev full-stack web developer (freelance) 27.11.2018 18:38

Сомневаюсь как понятно объяснить. Допустим есть комментарии на странице, и имя комментатора будет иметь такие же стили что и какой-то другой элемент на той же странице (допустим есть список топ-комментаторов и там в данный момент такие же стили). И генератор посчитает что эти элементы должны иметь один и тот же класс? Имхо, это неверно и ухудшит поддержку в дальнейшем.

Відповісти
Підтримати
anonymous
Konstantin Strukov 27.11.2018 18:41

Ага, тоже представил как нужно поменять стиль какой-то мелкой финтифлюшки в дальнем углу футера, а оказывается что на нее оптимайзером навешен тот же класс(ы), что и у какого-нить контейнера, на котором вся верстка завязана.

Відповісти
Підтримати
Gennady Dogaev
Gennady Dogaev full-stack web developer (freelance) 27.11.2018 18:49

Так человек заранее видит что это логически другой элемент и применит другой класс. А тот самый генератор-оптимизатор — нет. Причем выигрыш от такого объединения классов мне не видится большим чтобы потом получать вместо тикета на 5 минут тикет на 4 часа

Відповісти
Підтримати
anonymous
Gennady Dogaev full-stack web developer (freelance) 27.11.2018 19:06
Это шутка? 5 часов? не ну для так сказать основательной работы для фандинга можно и пару дней навесить, но реально?!

А 10 минут вместо 5 было бы нормально? А 30 минут вместо пяти? Проблема ведь не в конкретной цифре а в том что ты хочешь ухудшить читаемость и поддерживаемость кода непонятно ради чего. Современный браузер может переварить очень сложный и CSS с большим количеством повторяющихся стилей и ты этого не заметишь. Для оптимизации загрузки есть минификация, gzip и cdn.

Відповісти
Підтримати
anonymous
Gennady Dogaev full-stack web developer (freelance) 27.11.2018 19:16
Но я не это хотел спросить, как заархивить бандл джс что бы его браузер читал?

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Encoding

Настраиваешь веб-сервер чтобы он сжимал статику, и готово. Пара строк в конфиге nginx.

вот на мой скромный опыт чем меньше классов поначалу — тем лучше. Это как задлача по оптимизации.
А при развитии проекта клонируешь нужные классы и клоны правишь если нужно к этому свести. Конечно могут быть и другие варианты

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

Відповісти
Підтримати
anonymous
Konstantin Strukov 27.11.2018 21:28
вот на мой скромный опыт чем меньше классов поначалу — тем лучше. Это как задлача по оптимизации.

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

Відповісти
Підтримати
anonymous
anonymous 28.11.2018 00:00

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

Відповісти
Підтримати
Konstantin Strukov
Євген Козлов Front-end developer в SoftServe 28.11.2018 00:24

через неделю правок обнаружите, что воссоздали тот самый исходный вариант

Відповісти
Підтримати
anonymous
anonymous 26.11.2018 22:34

Гугление результатов не дало

Відповісти
Підтримати
Євген Козлов Front-end developer в SoftServe 28.11.2018 00:26

писал самописный анализатор на базе структуры FP tree. задача была не минимизация, а выявления сильно похожих по стилям классов, чтоб иметь возможность вынести общие правила в отдельный класс

Відповісти
Підтримати
anonymous

Підписатись на коментарі

Не підписуватись
Скористайтесь акаунтом
×
з умовами використання сайту і політикою конфіденційності.