Rsa97

Тут вопрос не в оптимизации, а в удобстве. Если вы вместо переменной захардкодите значение в стили, то при необходимости изменить его вам придётся перелопатить все CSS-файлы и все стили в них в поисках нужных значений.

if (e.target.closest('.clear_btn')?.hasAttribute("data-action")) {

При клике по svg в e.target будет именно она, а не div, в котором она находится.
e.target - это именно элемент, на котором произошло событие, а он может не совпадать с элементом, на котором висит обработчик.

https://github.com/nefe/You-Dont-Need-jQuery

Зашифровать не проблема. Любой архиватор с паролем.
Только использовать нельзя будет, пока не расшифруете. Браузер же как-то должен читать этот файл.

.block {
    .block__2 {
        ...
    }
}

Это селектор .block .block__2

.block {
    &__2 {
        ....
    }
}

Это селектор .block__2

Данные селекторы могут относиться к одним и тем же элементам, но имеют разную специфичность.

А зачем нужен такой изврат? Чекбоксы и радио прекрасно работают сами по себе, безо всякого JS/jQuery