Как добавить обработчик при создании ES6 Класса?

Ярослав Иванов, Можно пример?

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

FrelFrloich, увы, но нужен отдельный скрол для каждого из меню, а не общий для контейнера. Но спасибо за участие.
Видимо придется выносить второе меню за пределы первого и позиционировать его с помощью js.

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

FrelFrloich, типа того. Смотрите, сделал еще пример https://jsfiddle.net/v2zcnh8s/
Типичное выпадающее меню. Наводим на "Категории", снизу выпадает красное меню. Наводим на его первую ссылку - справа выпадает синее подменю.
Сделал их постоянно видимыми для удобства.
Единственное что требуется, ограничить высоту красного и синего блоков, потому что в них может быть большое количество ссылок, и эта простыня тянется на несколько экранов. Если я добавляю хотя бы красному блоку max-height: 100px; overflow-y: auto - дизайн ломается и появляется горизонтальный скрол.

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

ul ul
position: absolute;
уберите, это по первому варианту.

Если я уберу позиционирование второго меню, то элемент начнет резервировать место внутри первого.

Как сократить код?

А есть вариант еще сократить количество обработчиков, использовав делегирование событий?

$('.container').on('click', '.button', function(){})

Градиент справа налево под углом?

Это не сработает, если длина градиента нужна в px. Ну кроме решения с использованием calc, как написали выше.

В чем ошибка css?

разве их нельзя использовать вместе?
https://jsfiddle.net/8n7ub5h6/

НЕТ общему сбросу стилей в БЭМ! Что в замен?

Я не об этом. Насколько мне известно, браузер по умолчанию применяет к тегу body внешние отступы размером в 8px. Зачем сбрасывать padding у тега body и margin/padding у тега html, когда они по умолчанию равны 0? И без преувеличения таких примеров в интернете можно найти сотни. А теперь и тут. Часто натыкаюсь на ваши ответы, производите впечатление опытного разработчика. Поэтому наводит на мысль, что я не знаю о каком-то частном случае, и мне тоже стоит использовать такой сброс.

НЕТ общему сбросу стилей в БЭМ! Что в замен?

Я видимо чего-то не знаю, потому что постоянно вижу подобный код

html {
padding: 0;
margin: 0;
}

.page {
padding: 0;
margin: 0;
}

Объясните, зачем обнулять padding и margin для тега html, и padding для body?

Как работает этот код?

Kutuzov_ska, огромное спасибо за такой развернутый ответ!

Как работает этот код?

Сам написал. Я только изучаю vue и наткнулся на такое не понятное для меня поведение.
В документации указано, что vue не может обнаружить добавление или удаление свойства.
Мне кажется, что в моем примере свойства не реактивные, именно поэтому они обрабатываются только после второго вызова моей функции. В этом причина?

Почему input теряет фокус?

Замена v-if на v-show решила проблему, но хотелось бы понять причину ее возникновения. При создании двух блоков вокруг input на jquery потери фокуса не происходит. https://jsfiddle.net/49ov8xnr/
По вашей ссылке я не нашел объяснения. Либо укажите поточнее, в каком разделе смотреть.

Какая есть бесплатная альтернатива Adobe Photoshop для верстальщика?

Максим Ленский,

проходит две недели - один email заменяете другим ...таким образом avocode становится бесплатным

лавочку уже прикрыли

Какая есть бесплатная альтернатива Adobe Photoshop для верстальщика?

Использую markupeasy.ru
Порой встречаются небольшие баги, но зато бесплатно, работает с браузера, создан для верстки. Есть еще avocode с бесплатным триалом.

Как сверстать ссылку с иконкой справа?

В вашем примере текст не переносится на новую строку.

Как сверстать ссылку с иконкой справа?

Извините, сначала не глянул ссылку и подумал что вы спрашиваете на примере того кода, что я писал на jsfiddle.

Конкретно в данном примере когда текст ссылки идет в две строки, появляется пустая кликабельная область, а иконка уходит далеко вправо от текста. С красным фоном это хорошо видно.

Как сверстать ссылку с иконкой справа?

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

@media min-width и max-width вместе на одном брейкпоинте?

- хоть в инспекторе и отображается меньше свойств , но сам css файл растет, а на скорость загрузки влияет именно он

незначительно, так как они либо перезаписываются, либо выносятся в max-width при верстке mobile first. Увеличивается только количество медиа-запросов вдвое. Трудно сказать, насколько это влияет на производительность

- так же свойства по-умолчанию прописываются для максимальной совместимости, хотя это скорее всего уже неактуально

с текущей поддержкой в 99% можно сказать, что неактуально

п.с. А вот с использованием дробных значений в брэйкпойнтах я на сталкивался

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

Как добавить атрибут value только первому тегу option?

Если вы имеете ввиду самый популярный ответ, то там три примера и ни одни не позволяет добиться вида/функционала, как в примере документации.
1 пример - по умолчанию select отображается пустым (без выбранной опции)
2 пример - активная опция задается из заранее известного значения, вместо первого из списка
3 пример - не используется v-model

Как добавить атрибут value только первому тегу option?

Нет, так как в вашем примере в первом теге option отсутствует атрибут value=""