ⓒⓢⓢ

добавьте для input стиль box-sizing: border-box;

из второго скрина видно только, что этот стиль выключен (снята галочка) - из-за этого тоже "перечёркивается"

При skew вам надо будет обрезать углы, у крайних элементов, с помощью родителя, установив overflow (что не всегда удобно при выпадающих списках).
Есть ещё вариант залить фоном:
https://codepen.io/anon/pen/rEVjed?editors=1100

Что у вас там твориться, это только вам известно.
Но как я думаю, у вас ".tab_osnovnoe" это элемент "li" и это работает так:

jQuery('.product-tabs .tab_osnovnoe').addClass('active'); // <- тут добавляется класс
jQuery('.product-tabs li').removeClass('active'); // <- тут сразу же удаляется класс

никак, тень для всех сторон сразу задаётся. Но можете сверху наложить ещё одну тень

box-shadow: 0 5px 0 white, 0 0 5px rgba(0,0,0, 0.25);

в медиа запросах не хватает родительских селекторов
.articles .article .article_text
против медиа правила:
.article_text

Простыми словами: чем больше селекторов используется в выборке, тем выше приоритет

при наличии на сервере HTTP/2 модули из CDN могут загружаться параллельно в отличии от той же webpack-сборки

C webpack-сборкой тоже может всё загружается параллельно и без блокировки контекста.

Так какой же подход все таки является более удачным в современных реалиях?

Современные реалии - современные методы. Но будут ли оправданы эти вложения - зависит от проекта. Если у вас ресурсы разбросаны по множественным серверам - то выгода будет минимальна

1. Читаем:
touchstart, touchmove, touchend
2. На событие "touchstart" запускаем таймер на, секунду.
3. Если сработал таймер значит это "зажал".
4. Если во время работы таймера пришло событие "touchmove" или "touchend", - Удаляем таймер.
Это значит не "зажал", а что-то другое, - например, клик, скролл и т.д.

в короткие сроки перейти сможет, но написать качественный проект - однозначно нет.
У каждого ЯП есть свои нюансы работы самого ЯП, свои библиотеки (фреймворки), свои архитектурные решения. "Короткие сроки" - это конечно образное сравнение

EiEich,

В m[ i ] [ j ] второй атрибут 'j' меняется, а вот если i будет больше '0', то уже ошибка "Can not set property "0" or undefined"

естественно, вы строкой const m = [[]] создаёте массив, с объявленным нулевым элементом, в который присваивается пустой массив.
при i=1, ваш массив разложиться в такую конструкцию: undefined[0]

Можно добавить m.push(i) при каждой итерации i
Но если заранее известен размер массива (величина i), то можно массив объявить так:

m = (new Array(10)).fill([]) // заменить число 10 на нужный размер

ещё так можно
https://codepen.io/anon/pen/Jqrvzv?editors=1100

Проблема css импорта в том, что браузер заранее не знает об импорте, до тех пор, пока не загрузит и обработает файл с объявлением импорта. На это влияет и глубина импорта. page.css -> main.css -> block.css
Ждём и обрабатываем 2 ресурса, чтобы обработать block.css

На текущий момент css импорты можно заменить html линками (см. Preload, prefetch и другие теги)

Так же хорошей практикой для проекта является разделение стилей и загрузка только необходимых фрагментов для отображения текущей страницы, Критический CSS + прогрессивный CSS = ?
Для небольших проектов, условно меньше 5-10к css строк для мобильных и десктопа, разбиение стилей для экономии на рендеринге почти без выигрыша

1) Как можно данные из первой функции передать во вторую?

чтобы передать данные во второй запрос, нужно дождаться эти данные, соответственно второй запрос сделать внутри .then(...)

2) Как нужно делать запрос чтобы объединить полученные данные двух этих запросов?

Promise.all(...)

Если правильно понял вашу цепочку, то можно так:

Promise.all([
  fetch(url-1),
  fetch(url-2)
])
  .then(response => {
    // response - тут данные двух запросов
  })

у вас after обрезается границами блока, потому что у блока установлен overflow: hidden
возможно и не стоит after использовать, например, при активном табе просто убрать у него границу?
https://codepen.io/anon/pen/RmgvVR

cd /D E:\site
gulp

количество элементов: 5
если количество элементов нечётное, то делением на 2 получим дробную часть: 5 / 2 = 2.5

Цикл с вариантом без floor:
1 < 2.5 // <- true
2 < 2.5 // <- true
3 < 2.5 // <- false

Цикл с вариантом использования floor:
1 < 2 // <- true
2 < 2 // <- false
3 < 2 // <- false

как пример с вложенностью
https://codepen.io/anon/pen/Ezjppv

для #container не хватает position: relative;
для поворачиваемого слоя (внутри которого картинка) не хватает transform-origin: left top;
проверял на варианте rotate\scale

у меня так:
options.var.scss
options.color.scss
options.mixin.scss
options.breakpoint.scss
options.bem.scss
options.polyfill.scss
options.base.scss <- тут импортируются нужные для текущего проекта options.*.scss файлы

https://codepen.io/anon/pen/LoVOyO?editors=1100