liltrill

Ну для тестов есть https://jsperf.com/

<input oninput="this.value = this.value.replace(/\s+/g, ' ')">

https://github.com/webpack-contrib/html-loader

https://webformyself.com/tekushhee-sostoyanie-del-...

Это конфликт синтаксисов функции SASS и фильтра gr...

Решение на миксине:


Если без миксина:

.fin{
  animation: fadein 3s;
}
.fout{
  animation: fadeout 3s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

https://jsfiddle.net/7Lj41awg/

console.log(result[0].id); //2
console.log(result[0].col1); //text

Первая причина использовать переменные - если значение нужно в 2х местах и более. Чтоб не копипастить.
Одинаковые transition, размеры заголовков и тд.

Втарая - удобство настройки компонентов. Например гамбургер. Он есть в каждом проекте, но меняется цвет, размеры и тд. Это удобно вынести в переменные и не лезти править внутри.

Третья - базовое значение. Например для отступов.

$indent: 8px;
.elem {
  padding: $indent*2 $indent*3;
}

Переменных должно быть столько, сколько требуется для решения задачи наиболее оптимальным путём.

Если проще, быстрее, прозрачнее и логичнее сделать без переменной — делайте без переменной. Если вы понимаете, что переменная вам всё же нужна — делайте переменную.

Во многих крупных проектах многое на переменных построенно, ибо так можно многое автоматизировать. Например, в том же Bootrstrap почти всё построенно на переменных — это позволяет автоматизировать процесс кастомной сборки.

Например, делал недавно небольшой компонент кнопки — вышло порядка 35 переменных (+6 глобальных), и все они служат своей цели, лишних нет. А сегодня я делал достаточно большой компонент баннеров — там всего 6 переменных вышло (+2 глобальных). И больше не было нужно для поставленной задачи.

Словом, делайте по ситуации и технической потребности.

.button {
    outline: none;
}
// или
.button:active {
    outline: none;
}

Настройте fieldConfig для всей формы, тогда сможете убрать div с классом form-control

<?php $form = ActiveForm::begin([
        'fieldConfig' => [
            'options' => [
                'tag' => false,
            ]
        ]
    ]); ?>

Вместо false можете указать свой тег.
Но тут есть одно "НО", валидация перестаёт работать, надо возиться, чтобы восстановить, возможно делать ajax валидацию.

Вызывайте иконку из внешнего файла спрайта на сервере:

<svg xmlns="http://www.w3.org/2000/svg">
    <!-- путь до файла спрайта + ID нужной иконки в нем -->
    <use xlink:href=assets/sprite.svg#sprite-icon-1"></use>
</svg>

Безо всяких JS такого, как у вас толка. В DOM будет встроена только конкретно вызванная иконка из внешнего файла. При этом кеширование тоже будет работать.

Не работает из коробки в IE11 и ранних версиях EDGE, но для них есть полифил:
https://github.com/jonathantneal/svg4everybody

https://d3js.org/

Phpstorm