Серафим

background-image radial-gradient
и background-repeat

https://jsfiddle.net/Lm6duqb4/

С наложением синих https://jsfiddle.net/6jL3dhet/
Проблемы кратности ширины можно по разному решать.

В дополнение к Ankhena :

div {
  background: radial-gradient(ellipse at center, #ccc 0%, #ccc 50%, transparent 50%);
  background-size: 50px 50px;
  background-repeat: repeat-x;
  background-position: 0px center;
}

Пример на jsbin

Этот пункт справедлив исключительно для БЭМ-стека (project-stub, bem-express, и т. д.) — там сборщик действительно собирает только те CSS и JS-файлы, которые требуются для конкретной страницы (бандла).
Если вы ограничиваетесь пока только лишь именованием классов и группировкой файлов по каталогам, преимуществ разделения по платформам вы не оцените, т. к. популярные сборщики (а-ля webpack) этого попросту не умеют из коробки.

Ничё не понял из Вашего вопроса :)
Тут создаётся объект/ассоц.массив с ключами dogs : Fido, Hunter, Snoopie

var dogs = {
  Fido: "Mutt", Hunter: "Doberman", Snoopie: "Beagle"
};

Тут создаётся новая переменная myDog в которую ложиться строка "Hunter" - строка в кавычках - это строка!
var myDog = "Hunter";
Тут создаться новая переменная myBreed и ей присваивается значение из dogs с ключём имя которого равно тому что лежит в переменной myDog , тоесть Hunter
var myBreed = dogs[myDog];
Если бы было написано так
var myBreed = myDog;
То тут myBreed присвоилась бы строка из myDog, но Выше Вы обращаетесь к массиву dogs и в квадратных скобка указываете ключ из которого нужно достать значение

1) Насколько хорош в верстке должен быть фронтенд разработчик?

Как по мне, хороший фронтенд-разработчик должен уметь верстать хорошо, особенно, если он senior. Тем более вёрстка - это действительно наименее сложная вещь в веб-разработке.

2) Стоит ли подучить такие технологии как Flex-box и css-grid, прежде чем верстать первый макет или нужно сперва набить шишки на чистом css и html?

Разделять эти технологии и "чистый CSS" неверно, ведь Flexbox и CSS Grid - это часть CSS, и ничто не мешает вам применить их при создании первого макета. Знать их несомненно нужно, а использовать следует в зависимости от того, поддержка каких браузеров требуется в проекте.

3) По поводу адаптивной верстки, какими средствами достигается адаптивность(по-мимо media запросов)?

Например, за счёт использования относительных единиц измерения (%, em, rem, vh, vw) и функции calc().

4) Css фреймворки насколько широко они используются профессиональными компаниями?

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

Слышал такое мнение, что bootstrap и прочее создают простые шаблонные сайты, и профессионалу они не к чему, т.к. ограничивают его свободу действий, так ли это?

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

Мой опыт показывает:
1. С одной стороны верстать нужно и сложные макеты, чтобы они были кроссбраузерными, но и с другой - чтобы потом было легко натягивать эту верстку. Приходилось видеть плашку со скидкой, где сама скидка была прописана в стилях в виде псевдоэлемента. Конечно переделать было не долго, но все же. Или вот подобный выбор цвета в фильтре от верстальщика: https://yadi.sk/i/tgr8M-ZjH-wj-g
2. Flex-box и css-grid это не такие уж прям технологии, на изучение которых нужны месяцы. Достаточно выделить день, в песочнице попробовать что оно из себя представляет и когда это нужно использовать, чтобы не пихать туда, куда не нужно.
3. media запросов вполне хватает
4. Зависит от компании, от цели, от стоимости проекта, от времени на разработку

Но могу ошибаться, интересно мнение других.