Сергей ZSA

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

Использовать flex. Стили такие:

.gallery {
  display: flex;
  justify-content: space-between;
}
.gallery img {width: 33%;}

Зачем каждому изображению давать свой класс и писать одно и то же я честно чет не понял... есть ведь селектор по тегу и всё с ним хорошо. Ширину при желании можно сделать меньше. Но не забывайте, что flex может сплющить ваши картинки и придется писать у них и нужную высоту (у каждой, либо вырезать все одной высоты и всем задать одну и ту же).

А где-то ещё повторяться будут такие же табы кроме как именно в этом блоке? Скорей всего нет. К примеру у вас есть блок с социальными сетями в подвале, там 5 кнопок и они определенным образом расположены. Все эти кнопки будут элементами оборачивающего их блока. Использовать ещё раз этот блок где-то в другом месте с этими кнопками вы можете снова, но использовать отдельно одну единственную кнопку какой-то социальной сети... в этом нет практического смысла, если конечно дизайн этого не требует (ну как бы не логично это).

Из-за чего такая логика? Всё просто. У вас есть абзац текста с какой-то стилистикой. И таких абзацей под этим абзацем штук 10 и ещё в других местах такие же тексты есть (к примеру это уже не абзацы а небольшие подзаголовки или может ссылки или ещё что-то). Вы же не будете все эти теги делать блоками. И элементами можно их даже не делать, а просто обращаться к ним по типу .content-text p {....} .sidebar a {....} ну допустим примерно так. Иначе если бы мы делали блоки везде, где какие-то стили повторяются - нам не нужны бы были элементы и теги без классов тоже бы отпали, 90% кода были бы блоки, а это будет крайне неудобно. Суть в том, чтоб не усложнить работу, а упростить. Именуйте мудро и будет всё хорошо у вас.

P.S. Надеюсь объяснил доступно. По крайней мере так я понимаю. Очень советую посмотреть работы, где использован БЭМ, поисследовать такие сайты, попытаться сделать пару проектов. Станет легче.

1. Есть отличный слайдер (набор слайдеров) с уже готовым таким функционалом. Называется slick и инфа по нему тут: kenwheeler.github.io/slick всегда почти использую его.
2. Есть отдельная библиотека для работы со свайпами jquery touchSwipe (гитхаб реп есть, нагуглить не проблема) удобная библиотека и не надо долго париться.
Но если не нравится jQuery то оба варианта конечно не для тебя.

Можно сделать с помощью svg, только нужно будет перерисовать немного - рисуем синий полностью, зелёный полностью и красного часть (как на скрине 5 блок), это всё в куче экспортируем в svg и ставим фоном, а красный потом просто цветом задать. Просто вопрос в том, что конкретно будет в этом блоке. Если допустим просто контент на весь этот фон (неразрывный блок) - можно всё вообще экспортировать в svg, если же стыки блоков где-то есть - то уже по ситуации смотреть естественно и соответственно ситуации вырезать.

h2 (или любого другого тега) с центрированием, внутри span у которого inline-block, а также у него же before и after с такими же inline-block но размерами (ширина и высота) ну и конечно у span и у before и after vertical-align:middle; всё.

Создаете внутри него ещё один блок с текстом, которому задаёте прозрачность в css в 0. Далее просто при наведении на родительский блок меняете прозрачность на 1.

В коде это будет примерно так:

.parent {bg}//// это блок с вашим фоном
.parent .childe {opasity: 0;}/////это блок с вашим текстом
.parent:hover .childe {opasity: 1;}

Видел коммент про CMS. Сайты, которые делаются так, что на всех страницах разный дизайн - их не должны на cms натягивать, либо вам дали просто снопом все возможные вариации просто и их надо заверстать в любом случае.

К примеру мне мало верится что основные стили, такие как оформление заголовков, основного текста, кнопок, текстовых полей, чекбоксов и тп разнятся. Если они не разнятся - у вас дизайн сайта, если разнятся от страницы к странице и это "типа один сайт" - идите откручивать голову дизайнеру, который это рисовал, либо объясняйте заказчику, что это бред полный и так не должно быть.

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

Ну делать адаптив вам так никто не мешает и тут ничего такого вы особа и не описали. Есть 2 способа верстать адаптивно - сначала мобильную версию и из неё переходить в десктоп, либо обратно. Только так.

На счет того, как организовать процесс - изучите БЭМ для этого дела. С ним хорошо верстать. Если ещё пользоваться препроцессорами какими-то - шикарно, а ещё если и сборщиками - вообще идеально (ну less/sass/postcss можно по-разному компилить вплоть до плагинов в редакторе).

Как делаю я:
1. Клепаю html полностью, естественно именую классы по БЭМ (можно посекционно делать - сделал секцию шапки, запилил стили, сделал секцию подвала и опять же запилил стили, кому как удобно)
2. Создаю на каждый (ну или почти на каждый) БЭМ-блок свой .less файл.
3. В каждом файле верстаю сначала моб версию, потом в нём же чуть по-ниже пишу нужные media
4. Конечно же сборщиком всё собираю в 1 css файл и всё (сборщик работает, конечно, постоянно, чтоб компилировать из less в css ну и минимизировать сразу и автопрефиксить).

Этап 3 можно делать подругому, к примеру делать отдельно media.block.less под каждый блок и всё это загонять в самый низ сжатого css, либо весь media делать в отдельном файле просто, всё зависит от того, на сколько много вам нужно писать media (у меня бывают простые проекты, где media нужно буквально 2-3 штуки в 50-70 строк кода максимум, для этого не вижу смысла всё в отдельные файлы блоков писать, пихаю просто всё в один).

P.S. Конечно же отдельные файлы less для миксинов и переменных ну и основных стилей страницы.

P.P.S Если вы не знаете препроцессоров - можно всё тоже самое делать и в обычном css, всё равно будет удобно. Раньше я считал дикостью такой подход. Сейчас без него жить не могу.