Сергей delphinpro

Лучший этот https://github.com/Diokuz/baron
>> crossbrowser custom scrollbar with native system scroll mechanic.

>> первые 4 картинки это 1 блок
>> последние 2 картинки тоже блок
Зачем плодить сущности? Тут четыре почти одинаковых блока и один отличается от остальных.
Все флоатнуты влево. В первых двух блоках и в последнем - по две картинки, в третьем - одна.

Берем любой скрипт аккордеона, или сами пишем, там кода строк на 20.
Берем скрипт для кастомизации скроллбара, рекомендую baron,js
И приправляем щепоткой CSS.
Тут нет ничего сложного.

https://www.google.ru/search?q=how+to+disable+phon...

http:// https:// - явное указание протокола
// - указание использовать тот же протокол, по которому загружена сама страница.

до авто - нельзя
люди извращаются с max-height

max-height: 0 -> max-height: 500px

В дополнение к тому, что предложил Андрей Хохлов есть еще древний способ, которым такую хрень делали еще на шестых осликах

.parent-block {
  display:inline-block;width:100%; /* или другой клирфикс*/
}
.gray-block {
  white-space: nowrap;
  float: right;
}
.purple-block {
  overflow: hidden;
}

Гугл примерно так и делает. посмотрите исходник страницы.

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

PS Для одностраничника вполне оправданно упаковать все в один файл. Кроме, пожалуй изображений в base64 =).

@for $i from 1 through 6 {
  .teammate-#{$i} {
    bacground-image: url('/images/teammate-#{$i}');
  }
}

Про каскад вы почти правильно знаете с азов. =)
Каскад начинает разруливать какие стили применять, когда у них оказывается одинаковая специфичность.
А это

"Избегайте каскада" иди "слишком длинный каскад".

люди путают понятия каскада и вложенных селекторов.

codepen.io/anon/pen/zomwex

background-size:cover
+ (опционально) разные картинки посредством медиа-запросов, если на определенных размерах выглядит совсем уж ужасно.

Я вижу только один вариант - писать много js =)
Т.е. ловим событие наведения мышки, генерируем блок за пределами слайдера наполняем соответствующим контентом из наведенной карточки, высчитываем и позиционируем поверх карточки. Не забываем каждый раз инициализировать и дестроить плагины/скрипты/события, которые работают внутри наведенной плашки.

Да любой. Посмотрите какой набор ui элементов имеется в составе. Если устраивает - берите.

box-sizing: border-box;

Расположите .main-item после .slider.active, поменяйте порядок флексом и обращайтесь через плюсик.

На сколько я знаю, использование ~

~ тоже работает только на последующие элементы (а + только на следующий)

UPD https://jsfiddle.net/1whm1g4o/3/

Пирожок, блин. extends - для расширения базового класса, добавления ему новых свойств. а не для дублирования одного и того же.

<input type="text" value="E-Mail"
  onfocus="if(this.value=='E-Mail') this.value=''"
  onblur="if(this.value=='') this.value='E-Mail'">

Снимите галочку "Create output file from stdout"

А так-то да - некрофилия ) сделайте простенький галп-таск, и таскайте gulpfile.js по проектам.