Автоматическое объединение/слияние селекторов CSS с препроцессорами

Основной пример CSS. Каждый браузер, с которым я столкнулся, будет отображать элемент с пометкой и дополнением и красной рамкой

.test{
    margin: 4px;
    border: 1px solid black;
    padding: 4px;
}

.test{
    border: 1px solid red;
}

Естественно, если бы я писал этот CSS вручную, я бы заменил черный на красный и имел только одно правило.

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

Теперь, когда я использую серверную часть LESS → сборку CSS с минимализацией, мне кажется совершенно разумным, что компрессор / minifier должен сводить правила до простого

.test{
    margin: 4px;
    border: 1px solid red;
    padding: 4px;
}

Но все, что я пробовал, поддерживает оба правила; некоторые из компрессоров / minifiers идут до удаления новых строк

.test{margin:4px;border:1px solid black;padding:4px}.test{border:1px solid red}

Он удаляет один символ новой строки, но оставляет полностью ненужное объявление правила. Это кажется странным для меня.

Есть ли какая-либо система, чем это можно сделать? (желательно добавить для node.js) Если нет, знаем ли мы, почему нет? Кажется, это довольно большой размер файла, без недостатка.

отказ от ответственности Я попытался найти комбинацию селекторов, слияние селекторов и несколько вариантов, извинения, если я пропустил общий термин для этой процедуры, кажется вероятным, поскольку выгоды кажутся настолько очевидными, что я должен быть отсутствует что-то!

ОТВЕТЫ

Ответ 1

Почему он не может и не должен быть выполнен

Вы заявляете:

Каждый браузер, с которым я столкнулся, элемент с краем и отступом и красной рамкой.

Это потому, что, конечно, каскадный характер CSS. Он разработан так, чтобы работать с целью переопределения. Это именно то, почему (и как) вы добавляете дополнительное правило в свой CSS для переопределения.

Существует причина

Теперь я вижу, что ваша точка в препроцессоре, возможно, "слияния" кода с тем же селектором для целей минимизации. Однако (1) был бы редкий (если вообще когда-либо) случай, когда два класса фактически последовали друг за другом в коде CSS, как показывает ваш пример (и в таком случае минимизация будет в порядке). Обычно происходит вмешательство CSS, которое может повлиять на то, как каскад может проигрываться при рендеринге. Что приводит к (2), это потребует большей логики, чем изначально очевидно (или даже возможно) для реализации. Рассмотрим этот пример:

HTML

<div class="test1 test2"></div>

CSS (файл рамок)

.test1 {
    margin: 4px;
    border: 1px solid black;
    padding: 4px;
}

.test2 {
    border: 1px solid blue;
}

CSS (файл разработчика)

.test1 {
    border: 1px solid red;
}

Вышеприведенный код, если вывод как нормальный, должен отображать границу red каскадом, как хочет разработчик. Теперь предположим, что LESS или другой препроцессор минимизирует его по вашему желанию. Это может закончиться следующим образом:

Теоретическая минимизация

.test1 {
    margin: 4px;
    border: 1px solid red;
    padding: 4px;
}

.test2 {
    border: 1px solid blue;
}

И на самом деле будет отображаться как blue не как red!. Это связано с тем, что два .test1 слиты, теперь сделав .test2 последним в каскадном порядке, а не в секундах экземпляр .test1 является последним. Таким образом, препроцессор должен быть достаточно "умным", чтобы вычислить теоретически бесконечное количество возможных комбинаций каскадов, и что, не зная, что кодирование html в конечном итоге влияет на решение (например, здесь, где html двойные классы в сочетании с каскадный порядок - это то, что определяет окончательный рендеринг).

Если бы препроцессор объединился во второй экземпляр, это не решило проблему, так как, если разработчик поставил второй экземпляр .test2 после второго экземпляра .test1, но не определил другой цвет границы? Цвет границы .test2 по-прежнему будет переопределен путем слияния со следующим .test2.

Эта иллюстрация должна показать, почему такая минимизация не может и не должна быть выполнена - интерактивная логика между возможной формой html и каскадом CSS невозможно предсказать, что и как слить, за исключением случая, когда были две точные селекторные строки в CSS сразу последовали друг за другом. Любой другой случай может принять неправильное решение.