Максим Морев

Ну тут скорее не вопрос, а крик души, который можно поддержать.

По делу: да, проблема есть, именовать на больших проектах сложно. Решений нет.
Вернее, только те, которые вам кажутся "грязными", но других не завезли (и не завезут).
И те, которые не относятся к разработке (вроде "дать люлей дизайнеру, который не понимает, как это всё работает, и лепит каждый элемент как попало")

Тут просто надо несколько абстрагироваться и принять то, что абсолютно в любой объёмной системе, даже если её вдруг пишет один человек (что вряд ли), всегда есть место неочевидным вещам. Перфекционист внутри рыдает, но что делать.

Откройте любое масштабное решение - чёрт ногу сломит, не так ли? И требуется немало времени, чтобы вникнуть. Потом вникаешь - и становится проще, но всё равно много нагромождено. А если выпасть из контекста на месяц - потом опять заново вникать. Это норма (картинка с Малышевой).

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

Совмещение ваших пунктов 1 и 3 в одно - вполне здоровый стиль.
Если секция, где всё очевидно: about, gallery, text-section, etc.
Если контент неоднородный - именовать по смыслу (как в 3).

Единственное что мог бы посоветовать - не смущаться добавлять новые компоненты, задавая им какой-то дополнительный неймспейс (contacts-header, contacts-about), а не пытаться всё упихать в один общий с помощью модификаторов - в поддержке будет проще.

Просто размышления от прочитанного:
1. Подходы 2 ("section-1", "section-2") и 4 (атомарщина) - в аду для таких "специалистов" стоит отдельный котёл. Ну вы и сами понимаете. Использовать нужно никогда.
2. Инкапсуляция имён ничего не даёт в этом отношении, так как это придумано для элементов внутри блока (а с этим и концепция БЭМ хорошо справляется), глобально вам как разработчику всё равно нужно иметь понятное "корневое" название блока.

Ещё можно поработать со своей головой, возможно, что такой крик души идёт от страха быть осуждённым. Браузеру-то всё равно, вы ему хоть .qwerty123 { ... } скормите - нормально отобразится.
Понятные имена - для разработчиков, и надо понимать, что ни один толковый разработчик в вас камнем не бросит за то, что вы дали блоку имя .contacts-footer-call-to-action, если у вас этот самый .call-to-action в каждой секции настолько разный, что в один компонент не умещается.
Иногда помогает, если есть прямой выход на клиента или ЛПР донести, что такой дизайн... Ну не самый лучший для поддержки, и обосновать почему.
А чисто технически - решений нет, ну, вот такая работа, чё делать.

В ходе дальнейших изысканий определено, что реализовать это можно только с помощью написания своего расширения и вызовом не editor.action.insertSnippet, а метода своего расширения, который проверит предшествующий символ и вставит сниппет, если всё окей.

В моём представлении написание настолько мелких расширений - моветон, решил свою проблему добавлением нового сниппета, который по нажатию на "ctrl+#" вставит #{$var}, а "shift+3" (#) остаётся за обычным октоторпом.

Кейбиндинги, если кому понадобится:

{
  "key": "shift+[",
  "when": "editorTextFocus && resourceExtname == .scss || resourceExtname == .css",
  "command": "editor.action.insertSnippet",
  "args": {
    "snippet": " {\n\t${0}\n}"
  }
},
{
  "key": "ctrl+3",
  "when": "editorTextFocus && resourceExtname == .scss || resourceExtname == .css",
  "command": "editor.action.insertSnippet",
  "args": {
     "snippet": "#{\\$${1:var}}"
  }
}

То, что вам нужно, называется "Аккордеон", сам эффект найдёте по ключевому слову "slideDown" (по реализации из jQuery).

Любой слайдер может быть кастомизирован подобным образом, но руками и головой.
За Swiper могу ручаться, но не вижу причин, по которым с этим бы не справился owl-carousel, slick и что там ещё есть.
Если вы ищете прям готовое-готовое решение, чтобы только картинки вставить - не найдёте, слишком нестандартно оформлено.

Вот так, например.


А вообще, если уменьшение радиуса скругления при уменьшении вьюпорта не требуется - смотрите на свойство border-image - просто идеальный кейс использования, изящнее будет.

А никак.
Если нужно делать при наведении текст жирным, чтобы он не менял свои размеры, то можно использовать хак при помощи text-shadow.
Пример сделать сейчас нет возможности, загуглите "text-shadow like bold" - там всё расскажут.

Зависит от того, что вы от этого списка хотите.
Если ключи плюс-минус уникальны для каждой позиции (то есть вбиваете руками, а не выбираете из предустановленного набора) - храните строкой, чего заморачиваться.
Если есть какой-то предустановленный набор, который ещё и измениться может и хорошо бы сразу везде - заводите отдельную табличку с ключами (key_id, key_value) и отдельную для того, чтобы проставлять связи key_id -> product_id.
Можно и как у вас (id, value, product_id), если не гигантский объём данных (и ключи повторяются нечасто) - разницы не заметите.

Задачка интересная, вообще, как говорится, "со звёздочкой".
Пользователи IE и Edge в пролёте, ибо без fit-content задача не решается (имеется в виду решение на чистом CSS).
Как решить "для всех" без применения JS - не вижу, что чаще всего означает "никак" :)

Проблема в том, что в обработчике hover вы выбираете не элемент внутри того, на который навели, а все элементы с указанным классом на странице.

Вот так будет работать:

$(this).hover(function(){
  $(this).find('.declar_item_bg').toggleClass('declar_item_bg_usual');
  $(this).find('.declar_item_bg').toggleClass('declar_item_bg_active'); 
});

Вы result высчитываете на странице один раз, а потом каждый раз выводите одно и то же.
В функцию запечатайте и вызывайте функцию, каждый раз генерируя новое значение:

function myFunc() {
  var mass = ["I", "We",];
  var mass2 = ["love", "hate", "not", "return"];
  var math = mass[Math.floor(Math.random() * 2)];
  var math2 = mass2[Math.floor(Math.random() * 4)];
  return math + " " + math2;
}
myFunc();

function classNameCheck() {
  const div = document.querySelector('.js-your-div');
  if (!div) return;

  if (window.innerWidth < 600) {
    div.classList.add('small');
  }else{
    div.classList.remove('small');
  }
}

['load', 'resize', 'orientationchange'].forEach(event => {
  window.addEventListener(event, classNameCheck);
})