How to remove css (less) style overrides? Too many styles are repeated?

Question

css

There is a less file which has a lot of style defined like:

.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,

There is a repetition of .btn-default:hover , .btn-default:active , .btn-default:focus , and there are a lot of such styles. Is there an online service or plugin for Sublimetext/PhpStorm/Brackets to remove these repetitions?

Answer 1

You can run your styles through a minifier such as "clean-css" or "cssnano", it combines repetitive code. Further, if necessary, you can decompress with some kind of "prettify".

Answer 2

If you have styles that have repeating rules in their selectors, then there is only one thing (I didn’t find others, but I really looked for) that will clear css from such rules - https://github.com/purifycss/purifycss
At the same time, it will clean from styles that aren't used on the page (it's so smart that it even takes into account js-generated class names)
This applies to styles like

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

In the case of different styles with one selector, any css minifier will help you (an overview of different minifiers is here -> https://habrahabr.ru/post/181880/)
This applies to such styles, like:

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