Евгений Петров

Media Queries
Пример

1. Всё зависит от макетов, реализованных для разных размеров viewport, и комментариев дизайнера. В каких-то блоках отступы могут зависеть от размера шрифта, в каких-то от ширины блока, а где-то оставаться стационарными.

2. Используя в качестве единицы величины кегля rem, вы игнорируете возможность наследования от родителя. При этом каскад рассчитывается ровно столько же, и вы не получаете увеличение скорости построения CSSOM. Вот вам простой пример — в блоке есть 2 элемента, величина кегля для первого должна быть в 2 раза больше второго, для которого размер кегля должен быть в 1.5 раза больше, чем у родителя.

HTML

<div class="sample">
	<div class="sample-one">Text</div>
	<div class="sample-two">Text</div>
</div>

CSS

.sample-one {
	font-size: 3em;
}
.sample-two {
	font-size: 1.5em;
}

Изменяя размер кегля родительского блока, я всегда получаю нужный результат. А, в случае привязки к rem, я буду вынужден менять размер в 3-х элементах. А если таких вложений будет 10?

3. Все media queries работают по принципу if. Каждый будет проверен на соответствие и, в случае положительного результата, применяются описанные в блоке правила с учётом специфичности и порядка.

Думаю, проблема с контекстами. Потому что в простом окружении всё работает:
Фон background-attachment: fixed
Псевдоэлемент с position: fixed

Не нужно управлять правилами CSS с помощью JS.
Просто меняйте классы.

Ответ вам практически дал WhiteSama, просто в селекторе сделал опечатку.

.partner:nth-last-child(-n + 4) .partner-inside:before,
.partner:nth-child(4n + 4) .partner-inside:after {
    content: none;
}

Пример

Множественность классов — абсолютно нормально.
Но до мышей, конечно, делиться не нужно:)

В объекте window на событие scroll вешаем обработчик и меняем горизонтальную позицию фиксированного блока.
Уже миллион раз про это спрашивали.
jsfiddle.net/petroveg/m7bb25w9

Технически можно было бы сделать так

Пример

background-image: repeating-linear-gradient(
	-45deg,
	transparent,
	transparent 29px,
	rgba(255, 255, 255, .5) 29px,
	rgba(255, 255, 255, .5) 30px
);

Однако, в webkit будет совсем не то, что ожидалось.
Судя по всему, это — баг движка (очередной — на заметку тем, кто по инерции говорит о багнутости Firefox).
Исправляется указанием размера картинки. Остаётся только учесть, что вы указываете размер не исходной, а уже трансформированной картинки. Так, при повороте на 45° размер картинки должен быть в √2 больше, чем исходный размер.

Пример

background-image: repeating-linear-gradient(
	-45deg,
	transparent,
	transparent 29px,
	rgba(255, 255, 255, .5) 29px,
	rgba(255, 255, 255, .5) 30px
);
background-size: 42px 42px;

И остаётся небольшой минус — небольшие разрывы или сдвиги при несовпадении (опять же в webkit), и избежать этого для такого поворота не получится.

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

Пример

background-image: repeating-linear-gradient(
	-45deg,
	transparent,
	transparent 25%,
	rgba(255, 255, 255, .5) 25%,
	rgba(255, 255, 255, .5) calc(25% + 1px),
	transparent calc(25% + 1px),
	transparent 75%, rgba(255, 255, 255, .5) 75%,
	rgba(255, 255, 255, .5) calc(75% + 1px),
	transparent calc(75% + 1px),
	transparent
);
background-size: 40px 40px;

Гугл легко ответил бы вам на этот вопрос.
jsfiddle.net/petroveg/ggcbw7kd/1

Можно ли использовать rem для отступов блока друг от друга

Зачем? Значение в rem нужно для гарантированного получение базового размера. Между тем текстовые блоки наследуют размер шрифта, и для этого используются проценты, em.

К примеру, задать тегу html размер шрифта в один пиксель и использовать rem - так можно или не нужно и почему?

Ну это за гранью добра и зла:) Указывая размер шрифт в :root (он же html), вы задаёте точку отсчёта для наследования body и всех остальных элементов. Для какой задачи вам вообще может потребоваться базовый размер в 1 пиксель?

Самое верное решение — использовать flex.
Увы, сразу сделаю оговорку, даже в IE11 элементы не растягиваются по высоте контейнера с display:flex, если у того указана минимальная высота min-height:100%.
Решение с flex

HTML

<div class="container">
	<div class="header"></div>
	<div class="main">
		<div class="content">
			<div class="block"></div>
			<div class="block"></div>
			<div class="block"></div>
			<div class="block"></div>
			<div class="block"></div>
		</div>
		<div class="sidebar"></div>
	</div>
	<div class="footer"></div>
</div>

CSS

html {
	background: #f6f6f6;
}
body {
	margin: 0;
}
html,
body,
.container {
	height: 100%;
}
.container {
	position: relative;
	min-width: 600px;
}
.header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 80px;
	background: #9c6;
}
.main {
	display: flex;
	box-sizing: border-box;
	min-height: 100%;
	margin: 0 0 -120px;
	padding: 80px 0 120px;
}
.content {
	flex-grow: 1;
	background: #ccf;
}
.sidebar {
	flex-basis: 200px;
	background: #f99;
}
.footer {
	height: 120px;
	background: #69c;
}
.content:before,
.content:after {
	content: "";
	display: table;
}
.block {
	width: 150px;
	height: 100px;
	margin: 10px;
	background: #f96;
}

По причине бага в IE, или полном отсутствии поддержки flex, приходится городить огород «по-старинке» с float и фоном в :before.
Решение с использованием float

HTML

<div class="container">
	<div class="header"></div>
	<div class="main">
		<div class="content">
			<div class="block"></div>
			<div class="block"></div>
			<div class="block"></div>
			<div class="block"></div>
			<div class="block"></div>
		</div>
		<div class="sidebar"></div>
	</div>
	<div class="footer"></div>
</div>

CSS

html {
	background: #f6f6f6;
}
body {
	margin: 0;
}
html,
body,
.container {
	height: 100%;
}
.container {
	position: relative;
	min-width: 600px;
}
.header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 80px;
	background: #9c6;
}
.main {
	position: relative;
	box-sizing: border-box;
	min-height: 100%;
	margin: 0 0 -120px;
	padding: 80px 0 120px;
}
.main:after {
	content: "";
	display: block;
	clear: both;
}
.content {
	float: left;
	width: 100%;
	margin-right: -200px;
}
.sidebar {
	float: right;
	width: 200px;
}
.content:before,
.sidebar:before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 80px;
	bottom: 120px;
}
.content:before {
	left: 0;
	right: 200px;
	background: #ccf;
}
.sidebar:before {
	right: 0;
	width: 200px;
	background: #f99;
}
.footer {
	clear: both;
	position: relative;
	height: 120px;
	background: #69c;
}
.block {
	width: 150px;
	height: 100px;
	margin: 10px;
	background: #f96;
}

Ленар Фаттахов приводил ссылку на хорошую статью.

В дополнение к прекрасному варианту с pointer-events, который предложил Роман, для IE10 и ниже возможен вариант:

body:after {
	content: "";
	position: fixed;
	z-index: 1; /*Раззудись, молодецкое плечо*/
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}