Есть ли инструмент, который говорит мне, если у меня есть неиспользуемые классы CSS?

Question

Представьте, что у меня есть элемент <p> с классом title:

<p class='title'>Title</p>

И

.title {
    font-size: 14px;
}

И затем по какой-то причине я решаю удалить <p class='title'>Title</p>но забудьте удалить правило CSS.

Существует ли инструмент, который бы отображал каждое правило CSS, которое не используется ни в одном из файлов проекта, для очистки моего кода?

Я использую Atom в качестве текстового редактора.Может быть, плагин мог бы сделать это?

Answer 1

Chrome Devtools имеет вкладку покрытия , в которой можно найти неиспользуемые CSS и JS.

Каждая строка кода имеет цветовую кодировку:

• Сплошной зеленый цвет означает, что строка кода выполнена.

• Сплошной красный цвет означает, что он не выполняется.

• Строка кода, красная и зеленая, например строка 3 на рисунке 2, означаетчто только некоторый код в этой строке выполняется.Например, троичное выражение типа var b = (a> 0)?a: 0 окрашен в красный и зеленый цвета.