MyQuestion

Структура для всех страниц:

.page
    .page__header
      .header
    .page__wrapper
      .page__block1
        .block1  // это блок страницы, замените на свое название
      .page__block2 
        .block2 
  .page__footer
      .footer

Нужно ли везде указывать, что это за страница?

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

Ведь services этот блок, который может повторятся и на других страницах сайта, и при этом, будет выглядеть по другому.

Назовите его по-другому .main-service или .last-service

Конечно, если полностью следовать БЭМ, должна появиться и такая же структура файлов. Но если мне необходимо все стили запихать в один css?

В беме у каждого блока свой файл стилей. Собирать итоговый css можно как угодно, например, используйте sass include.

Или нужно избегать повторения в именование классов?

Нужно избегать повторений в именах блоков.

Если по дизайну нет заголовка у секции, это не значит что не нужно его добавлять. В таких случаях хорошие верстальщики добавляют подходящий по смыслу заголовок для секции и скрывают его с помощью паттерна visually-hidden.

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

section без заголовка - не валидная разметка.
table без caption - можно. Но будет лучше если оставите.

Может ли это длинное предложение, быть заголовком?

Это простая фраза и не имеет никакого смысла в качестве заголовка. Назови просто advantages__text и не парься

заголовок "Преимущества", скрыть его

Обычно это обозначает кривой дизайн. Заголовки нужны для людей.

Заголовок "Наши преимущества" принципиально неверный. Он не является уникальным и не влияет на ранжирование в поиске". "Преимущества компании Хитрый Том" - это гораздо лучше.
Длинный текст хоть и уникален, но такие фразы как "Что мы делаем" и "Читайте ниже" играют скорее в минус.

Относительно самого текста "это компания быстрого выполнения заказов, разной степени сложности". Это бесполезный бред. Я не знаю что вы делаете в принципе, зачем мне знать, что вы делаете неизвестно что быстро и это неизвестно что может иметь разную сложность? Здесь крайне важно конкретизировать:
быстрое выполнение? "заказ будет выполнен за 1 час или вернем деньги"
разная сложность? "нет наценки за сложные условия работы"
Т.е. нужно указывать совершенно конкретные ценности для клиента.
А воды клиент и без вас начитается...

Просто делайте html5-семантику и где требуется дополнительные секции/блоки - div.
Тексты - как обычно (p - параграф, span - текстовый элемент).
Межблочный отступ - margin.
Внутренний отступ до границ блока - padding.
Структура блоков - flex.
Текстовая сетка - с "вертикальным ритом".

1. p — для набора параграфов, если это не он, то можно смело брать span.
2. Классы на p → идеально, исключением составляет пользовательский ввод.
3. Класс строго по БЭМ (ну почти).
4. Флексбоксами действительно не стоит бездумно злоупотреблять, так как всегда есть риск выстрелить себе в ногу.
5. PP → в макете стоит искать закономерности и их релизовывать, но проверять на переполнение, так как пользовательский ввод не дремлет.
6. position: absolut; → position: absolute;
7. Отступы всецело зависят от контекста, например если тебе надо сделать карточку с фоноцветом, то скорее всего ты применишь padding, дабы были отступы от краев.

gulpfile.js

const autoprefixer = require('gulp-autoprefixer');

function scssTask(){    					
	return src(files.scssPath)					
		.pipe(sourcemaps.init()) 					
		.pipe(sass()) 					
		.pipe(autoprefixer())		
		.pipe(sourcemaps.write('.')) 					
		.pipe(dest('public/css')					
	); 					
}

package.json

"main": "gulpfile.js",
  "browserslist": [
    "last 2 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

детали