Как удалить переопределения стилей css (less)? Очень много стилей повторяются?

Question

[Александр Шаповал]

Есть less файл, у которого много стиле определены как:

.btn-default,
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.btn-default.focus,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,

Тут идет повторение .btn-default:hover, .btn-default:active, .btn-default:focus , и таких стилей очень много. Есть онлайн сервис или плагин для Sublimetext/PhpStorm/Braсkets для удаления этих повторений?

Answer 1

[Евгений]

Вы можете прогнать свои стили через минификатор какой-нибудь, например "clean-css" или "cssnano", он объединяет повторяющийся код. Далее если нужно, можно разжать каким-нибудь "prettify".

Comments

[Александр Шаповал]

Хорошая идея, как-то не подумал. Только это пожалуй единственный случай не предусмотренный минификаторами(. Попробовал 3 разных

Answer 2

[Андрей]

Если у вас есть такие стили, в селекторах которых есть повторящиеся правила, то есть всего одна штука (я других не нашёл, но очень искал) который очистит css от таких правил - https://github.com/purifycss/purifycss
Заодно он почистит от стилей, которые не используются на странице (он настолько умён, что учитывает даже названия классов, генерируемые с помощью js)

Это относится к стилям вроде

.btn-default:active,
.btn-default.active,
.btn-default.active,
.btn-default.focus,
.btn-default:active{
  color: #FFF;
}

В случае разных стилей с одним селектором - вам поможет любой css-минификатор (обзор разных минификаторов есть тут -> https://habrahabr.ru/post/181880/)
Это относится к таким стилям, вроде:

.btn-default:active{
  color: #FFF;
}
.btn-default:active{
  text-align: center;
}