Какие есть утилиты и приложения для оптимизации кода CSS?

Question

[Лариса]

Верстальщики, какие Вы порекомендуете утилиты и приложения для оптимизации кода CSS?

попался на глаза вот такой онлайн оптимизатор

Никто не знает, имеются ли встроенные возможности в Webstorm?

Понятное дело что можно и руками сделать, вопрос в том как это делать быстро и автоматизированно)

Answer 1

[Владимир]

https://learn.javascript.ru/screencast/gulp
https://www.npmjs.com/package/gulp-autoprefixer
https://www.npmjs.com/package/gulp-combine-media-q...
И еще миллион на свой вкус
https://github.com/nevech/generator-genlys

Comments

[Лариса]

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

[Kovalsky]

Лариса: прям standalone приложения такого, я уверен, не существует. А чем вам не нравятся различные модули для ноды? В принципе то же самое ведь.

Есть например YUI Compressor

Answer 2

[Максим Тимофеев]

Любой автооптимизатор - сделает Вам г...но, которое не факт что будет корректно работать. Разве сервисы для сжатия:
а их можно найти в помощью поисковика сотню.
Вот статья есть на тему:
https://habrahabr.ru/post/306442/
Но правильный способ - не использовать css при разработке, а использовать less или sass.

Comments

[Лариса]

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

пользоваться яндексом умеют все, а вот что реально народ использует в работе имеет значение

[Максим Тимофеев]

Лариса: по ссылке ходили?

[Максим Тимофеев]

Лариса: раз уж у Вас проблемы с чтением:
cssresizer.com
refresh-sf.com
csscompressor.com

[Лариса]

Максим Тимофеев: меня больше интересует ответы вида
я пользуюсь вот такой утилитой и могу ее порекомендовать
в противном случае данный сайт не имеет никакой пользы, если в ответе лишь море ссылок как и у поисковика

[Максим Тимофеев]

Лариса: Мне забить эти ссылки в Ваш шаблон?

[Максим Тимофеев]

Лариса: Вы просили хорошую систему, я дал Вам ссылку на детальный их разбор. Авторитетный ресурс советует, но Вам надо, что бы люди (заведомо известно, что среди них есть большой % оленей) Вам что-то посоветовали. В чем Ваша логика? Вам нужна хорошая система или популярная?

[Лариса]

Думаю что олени не заходят на этот сайт и бодаются руками.
Надежда была на опытных коллег и их рекомендации по конкретной утилите)

[Максим Тимофеев]

Лариса: Спецы вообще этой ерундой не занимаются. Что они Вам посоветуют если не пользуются? А вот олени сейчас накидают говна больше чем яндекс дает. Вам умный человек - Владимир, написал про gulp и т.д. Я написал про less и sass. Но Вы видимо ждете оленя, который нашел волшебный сервис по уменьшению css и не понимая как это работает, посоветует, как магическую штуку.

[Лариса]

уже файл на основе LESS создан, но нуждается в оптимизации

[Kovalsky]

Лариса: а о чем речь, о минификации или о uncss?

[Ankhena]

Лариса:

уже файл на основе LESS создан, но нуждается в оптимизации

очень спорное утверждение

[Ankhena]

Лариса: Встроенная возможность Webstorm это Inspect Code, хотя он и без нее подсвечивает на полосе прокрутки опасные, по его мнению, места.

[Лариса]

Ankhena W: Опасных мест нет, вопрос стоит в оптимизации

[Ankhena]

Лариса: "опасные" я имела в виду лишние, повторяющиеся объявления свойств, использование несокращенных записей для font, background и т.д.

[Максим Тимофеев]

Лариса: Оптимизация какая. Уменьшение веса css или его более быстрый рендер?

[Лариса]

Максим Тимофеев: Ankhena W: В комментариях к ответу Константина расписала

Answer 3

[Константин Китманов]

Лучше этот процесс отделять от IDE -- класть сминифицированные и склеенные файлы в систему контроля версий не стоит, а на сервер никто webstorm ставить не будет. Поэтому gulp/grunt, webpack, cssnano и другие страшные слова.

Comments

[Владимир]

Вебшторм, кстати знает о задачах gulp. Поэтому использовать систему сборким можно как из ГУИ так и при упаковке на девелоп/стейдж/прод. Но девушка не хочет "среды для разработчиков" чтобы это ни значило.

[Константин Китманов]

Владимир:
> Вебшторм, кстати знает о задачах gulp.

Совершенно верно. И это удобно.

> Но девушка не хочет "среды для разработчиков"

И совершенно зря:)

[Лариса]

Владимир: winless при подключенной настройке
Use globally installed less — вместо компилятора в WinLess применяется компилятор, установленный через Node.js.
Minify by default — по умолчанию все компилированные CSS-файлы оказываются компактными — из них удаляются пробелы, комментарии, табуляция и переносы строк.

на выходе выдает файл, где остаются не объединенными куски кода

аа, бб, сс {color: red}
dd, vv, qq {color: red}

к сожалению оптимизация в less файле не позволяет их свести

поэтому возник вопрос, что может есть что-то мозговитое,
типа www.css-school.ru/optimiser
(он к сожалению мелкие куски хорошо кушает, а на больших начинает глючить)

[Владимир]

Лариса: Я вам уже ответ давал, используйте сборщик проектов и под него ищите оптимизатор, их достаточно много.

[Ankhena]

Лариса:

Мне так вообще кажется, что Вы не с той стороны решаете задачу чистоты кода.

1. Странная затея объединять куски такие куски кода автоматом. Как автомат узнает, можно их объединять или нет, потому что правило специально стояло в другом месте документа и что-то переопределяло.

2. Используйте extend в less

3. Используйте класс .red

[Константин Китманов]

Ankhena W: 1) это нормальная затея, если это умеючи делать:) и есть тулзы, которые умеют.