Дядя Толя

Установи пуфон, очевидно же. На большинстве линухов он из коробки, что у тя за дистриб?
Ну и не-lts ноду юзать не рекомендуется, многие пакеты не успевают подтягиваться.

Если на ноуте с высотой экрана 620px что-то не входит в экран, приходится делать адаптив по высоте.

С плагином fullpage приходится
https://codepen.io/SquishyAndroid/pen/XjRPVV

И на сайтах с горизонтальным скролом
https://gogolevsky12.art3d.ru/

const block = document.querySelector('.block');
const mql = window.matchMedia("(max-width: 768px)");

window.addEventListener('resize', () => {
  if (mql.matches) {
    block.style.backgroundColor = "blue"
  } else {
    block.style.backgroundColor = "red"
  }
})

(кратко про себя)
Все лежит в папках: компонент + стиль. Собирается webpack'ом. Но у меня react-проекты.

(длинно, но вроде бы по делу)
Если относительно долго занимаетесь - у вас скорее всего уже выработались части, которые похожи - их выносите. Так же скорее всего у вас есть одинаковая структура (обычно это js/css/images и html, либо как вы пишите компонентами (отдельными папками) внутри котороых html + стили и может js ). Делайте шаблон для будущих проектов, в первую очередь удобным для себя - ведь вам с ним работать, а в нем реализуйте то что умеете по-максимуму (жмите картинки, оптимизируйте js и т.д)

Плагины, которые используете для Gulp, просто проверьте в блэклисте, а так же можете посмотреть новые версии. Вообще, хорошо если вы знаете все свои плагины, в таком случае - вам и этот пункт можно не выполнять.

кажется, что не использовал это все на 100%

Всем так кажется, поэтому когда не хочется заниматься работой, идем в гугл и смотрим опен-сорс проекты других людей: gulp, wepback, затем если нашли что-то любопытное идем в npm/github читаем доку. Пытаемся применить в работе.

Что имеем в итоге?
1) если все работает и вас устраивает (скорость сборки, удобство проверки в разных браузерах ...) - "работу работать";
2) если есть время и желание - гуглите опен-сорс решения, читайте твиттер интересных людей / новостную подписку;
3) если хочется услышать мнение коллег, но при этом коллег рядом нет - пишите статью на хабр. Просто статья: я использую такие-то плагины в своем "шаблоне" - вряд ли получит лестные отзывы, но возможно кто-то напишет: вот в этом месте у вас плохо, сделайте иначе. Возможно, вы придумаете, как написать статью интересно - тогда честь и хвала. И критика. А обоснованная критика всегда хорошо.

P.S. если используете Jade и следуете BEM-методологии, то я бы порекомендовал посмотреть на этот проект

У кого проблемы с плагином WEBPCSS нужно установить converter командой -
npm install webp-converter@2.2.3 --save-dev
Мне помогло

:before и :after добавляет контент к содержимому элемента, а у img же как такового содержимого нет.
Решение - завернуть img в div и к нему уже применять псевдоэлементы.

Также псевдоэлементы нельзя применить к input

Смотри тут нужно подключить логику и правила BEM методологии, по BEM нельзя использовать конструкцию с обращением к span, да и еще учитывая что у вас там есть модефикачия ребенка "feature__color__item_first feature__color__item", сегодня у вас span сегодня а завтра будет div и все приехали))!
По поводу неймина и длинны не переживай это нормально, но стараться нужно писать более логично и с малым набором имен, лучше больше старайся декомпозировать свои компоненты!
Как уже было написано выше у вас не правильный BEM!

component: .feature
block: .feature__color
modeficator: .feature__color--first или .feature__color_first

Вот смотри правильно так:

<div class="feature">
    <div class="feature__color feature__color--first">
        <mark class="feature__color-item feature__color-item--first"></mark>
        <mark class="feature__color-item"></mark>
    </div>

    <div class="feature__color feature__color--first">
        <mark class="feature__color-item feature__color-item--first"></mark>
        <mark class="feature__color-item"></mark>
    </div>
</div>

или :
<div class="feature">
    <div class="feature__color feature__color_first">
        <span class="feature__color-item feature__color-item_first"></span>
        <span class="feature__color-item"></span>
    </div>
</div>

или :
<div class="feature">
    <div class="feature-color feature__color_first">
        <span class="feature-color__item feature-color__item--first"></span>
        <span class="feature-color__item"></span>
    </div>
</div>

Если вы уверены что внутри будет один блок то в виде исключения можно написать так(но я не рекомендую так как это нарушает BEM):

<div class="feature">
    <div class=feature__color"">
        <div class="feature-color-item ">
            <h2>first text</h2>
            <mark>second text</mark>
            last text
        </div>

        <div class="feature-color-item feature-color-item--fietst ">
            last text
        </div>
    </div>

    <style>
        .feature-color-item {
            font-size: 20px;
        
            h1 {
                font-size: 30px;
            }
        
            span {
                font-size: 10px;
            }
        }
    </style>
</div>

Если вы используете современный фреймворк, то тогда за счет инкапсуляции можно сократить нейминг, вот на примере ануглар:

<feature>
    <atricle class="__color">
        <div class="__item"><span>text</span></div>

        <div class="__item"><span>text</span></div>

        <div class="__item"><span>text</span></div>
    </atricle>
</feature>

или :

<feature>
    <atricle class="--first">
        <feature-color-item >
            <h2 class="__title">first text</h2>
            <mark class="__mark">second text</mark>
            last text
        </feature-color-item>

        <feature-color-item class="--first">
        <h2 class="__title">first text</h2>
        <mark class="__mark">second text</mark>
        last text
        </feature-color-item>
    </atricle>

    <style>
      /* componet feature-color-item */
        :host {
            font-size: 20px;

            .__title {
                font-size: 30px;
            }

            .__mark {
                font-size: 10px;
            }
            
            &.--first{
                 color: #red;
             }
        }
    </style>
</feature>