Nikolay Talanov

>не могу ни добавлять классы, ни менять их названия в html
>должен поддерживать работу ie8
>дизайн сайтов делается без дизайнера
>не могу использовать js

Как там в аду, неплохо живется?
Тут работу другую искать надо, а не деградировать в болоте, издеваясь на собой. Грамотный css невозможен без контроля над html и без адекватного дизайна (и общения с дизайнером, если речь идет о чем то сложнее говнолендинга). Ну а ие8 это вообще все равно что гроб засыпать не землей а говном. Я ие11 уже полгода+ не открывал и Edge чекаю "по желанию".

А чего тут непонятного? Кликнули, ненужные блоки разлетелись по сторонам, у нужного увеличилась ширина, чтобы он стал фуллскрин. Внутри лежит картинка которая автоматом растянута на большую ширину. Ну и всякие там движения туда сюда. В целом эффект раскрытия в этом слайдере выглядит довольно таки некрасиво и топорно, слишком резкий прыжок слайда с последующим отскакиванием, халтурная работа.

Я почти 2 недели назад сделал такую демку - codepen.io/suez/pen/AXQaEg, тут все намного плавнее и красивее, да еще и все реализовано с помощью css, js лишь 2 класса добавляет, но у меня правда отсутствует функционал слайдера, ибо концепт другой. Но можете изучить css чтобы понять как это дело работает.

Вам необходимость использовать Timeline в Chrome DevTools для профилирования производительности анимаций и не только.

Хотите знать основы оптимизации рендеринга - вам сюда https://www.udacity.com/course/browser-rendering-o...

Причин плохой оптимизации может быть вагон и маленькая тележка. У вас там могут огромные элементы анимироваться с помощью top/left вместо transform: translate, у вас при каждом скролле может идти repaint огромных картинок, забирая по 60-100мс на каждый шаг и так далее. Скорее всего причины крайне простые и связаны с использованием древних и убогих методик для анимаций, аля jQuery.animate (который до 3й версии юзает setTimeout вместо requestAnimationFrame под капотом).

Оценивать надо исходя из вашего желаемого часового рейта. И все.
Ко мне если обратяться с просьбой сделать что-то простое, что требует N часов работы, то я и скажу им что это будет стоить N * hour-rate. При этом я естественно предупрежу людей, что обращаться ко мне с созданием чего-то простого нецелесообразно, ибо огромное количество более низкоспециализированных людей сможет это сделать за N * hour-rate/5 (или /10).
Все остальные критерии не имеют никакого значения. Сложно это или нет. Это рыночные отношения, где все крутится вокруг спроса и предложения.

1) Серый css-треугольник с помощью :after.
2) Css clip-path (не пашет в ие и ФФ)
3) Svg clip-path (слегка геморройно и не очень легко сделать идеально растягиваемым под все разрешения с сохранением пропорций).
4) Еще есть варианты с псевдоэлементами и трансформами (skew/rotate и так далее), с помощью которых можно юзать не только монотонный бэкграунд, но и картинки. На тостере уже миллион раз подобные вопросы были.

Мешанина из классов в html - расстрелять. Надо юзать миксины/экстенды, а в хтмл держать БЕМ классы и некоторые клювые лэйаут классы иногда.

У них это сделано на канвасе. То есть 3 бэкграунда для блока просто фоном сделаны канвасом, который реагирует на движения мышью. Есть конечно вариант сделать такое на свг, но там могут быть проблемы с адаптивностью и сохранением адекватного aspect ratio (даже со спец атрибутами viewBox и preserveAspectRatio можно будет помучаться).
У меня имеется несколько демок с похожим эффектом (на свг):
codepen.io/suez/pen/emjwvP - вот тут простой drag effect, который просто меняет одну координату арки.
codepen.io/suez/pen/epgZjK - вот тут более продвинутый пример, где я уже юзаю Cubic Bezier Curve, а не арку или квадратичную Безье.
У меня варианты на rAF велосипедах, с гсапом это все дело должно быть явно проще.

Если речь идет о столь примитивном сайте, то без разницы.

Что там использовать то, хоспади. Вы что ф12 не умеете нажимать? Там тупо картинки в контейнеры вставлены, которые скроллятся в оверфлоу. До жути примитивно и уныло.

% для марджинов и паддингов берутся от ширины элемента, даже если речь идет о margin-top/padding-bot и так далее.

Бордер топ и лефт для блока
:before:after для линий снизу и справа.
Ну или еще миллион вариантов.

НЕ ТРОГАТЬ ИЕ8 В 2016 ГОДУ
Неожиданно, правда?

Естественно, ведь без этого не стать html-программистом.

Html препроцессоры - бяка.
В большинстве нормальных проектов вам не придется заниматься какой-то копипастой, ибо будет шаблонизация и компоненты. А для прототипирования хватает Emmet.
Для css естественно scss. Ну или stylus если вам очень нравится его специфический синтаксис и отсутствие строгих правил.

Изращениями какими-то занимаетесь. Я более чем уверен что вся цветовая схема влезает в пару строчек стилей, и мучать юзера дополнительным http реквестом при каждой смене темы это очень плохая идея. Просто сделайте для каждой цветовой схемы глобальные классы для body или основного контейнера и по клику меняйте их. Выбранную схему просто потом сохраняете в localStorage или вообще на сервере можете даже хранить, если юзер логинится.