Ivan Bogachev

Демка, от которой вы можете оттолкнуться. Она была сделана для другого вопроса, но суть одна и та же.

Как исправить кучу ошибок цсс в валидаторе?

Тут вопрос не в том, как исправить, а в том, что исправить. Префиксы, как вы понимаете, нам нужны в любом случае. Меняем настройки валидации, чтобы не обращать на них внимание:


Имеем 9 ошибок с вашего сайта. Из них (с повторениями, -webkit-min-device... не считаем):
- Property user-select doesn't exist : none - это свойство из черновика CSS4. Все ок.
- Property touch-action doesn't exist : pan-y - относится к спецификации Pointer Events, а не CSS. Все ок.
- Value Error : cursor hand is not a cursor value : hand - вот тут ошибочка, cursor: hand не бывает.
- Value Error : margin-top Unknown dimension 10px\9 - что-то тут не так со значением отступа.

Последние две ошибки стоит поправить, на остальное можно забить.

Как отменить наследование

1em = размер шрифта родительского элемента
1rem = размер шрифта корневого ( :root ) элемента, в данном случае - это html

Вероятно вам необходимо использовать единицы rem.

Немного поправил ваш код:

.arrow {
  position: relative;
}

.arrow::before {
  content: '';
  display: block;
  width:  650px;
  height: 600px;
  background: blue;
}

.arrow::after {
  content: '';
  display: block;
  position: absolute;
  top:  0;
  left: 0;
  width:  600px;
  height: 400px;
  background: url(http://cliparting.com/wp-content/uploads/2016/05/Arrow-clipart-arrow-graphics-clipartcow-2.png);
}

По вашим словам кажется, что вы понятия не имеете о том, какой инструмент для чего нужен. Так что рекомендую следующий план:

HTML: практика -> Pug или любой другой препроцессор -> понять зачем он нужен -> микроданные -> wai-aria
CSS: практика -> каждый день выкладывать один сверстанный компонент на CodePen -> всякое разное -> изучить внутренности normalize.css -> использовать autoprefixer -> изучать хорошие практики -> написать свою сетку -> познакомиться с БЭМ, RSCSS -> осознать полезность методологий -> препроцессоры (LESS проще, SASS моднее, есть еще много разных) -> PostCSS -> осознать разницу между пре-процессором и пост-процессором
JS: ES6+ -> Babel -> понять смысл инструмента -> писать много велосипедов -> много велосипедов -> больше велосипедов богу велосипедов -> паттерны проектирования -> тестирование
Gulp/Grunt и Webpack/Browserify: осознать разницу -> использовать по мере надобности -> научиться автоматизировать все, что можно автоматизировать
Git, NPM: без комментариев

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

Есть еще один дельный совет: читайте ответы на тостере и изучайте решения, которые народ предлагает. Разбирайтесь с тем, как они что-то делают. В перспективе сами отвечайте. Метод утенка рулит.

Ну и умение задавать вопросы тоже лишним не будет.

Я просто оставлю пару ссылок и попрошу вас подумать, каким боком к вопросу относятся теги javascript, react.js и meteor.js.

Вы задаете :root значение размера шрифта (кстати познакомьтесь с вот этой идеей - сам пользуюсь постоянно, замечательная вещь). По умолчанию обычно размер шрифта для :root в браузерах равен 16px. Задавать для :root размер шрифта в rem/em бессмысленно - это как масло масляное.

1rem (1 root em) будет равен тому размеру шрифта, который задан для :root и будет одинаковым для всех элементов на странице. Если вы вложите кучу элементов с font-size: 1.1rem друг в друга, то все они будут иметь один и тот же размер шрифта.

1em у каждого элемента будет свой, равный размеру шрифта родительского элемента. Если вы вложите кучу элементов с font-size: 1.1em друг в друга, то каждый следующий будет иметь размер шрифта больше, чем предыдущий.

---

Сам я стараюсь все, что можно, делать в rem (включая все размеры на странице, отступы, border-radius, брейкпоинты и.т.д.) в сочетании с адаптивной типографикой из вышеприведенной статьи, а единицу em использую очень редко. А размеры в пикселях - вообще редкость, только если 1-2px в местах, где округление может сломаться. Такой подход не является общепринятым, но может быть очень удобным, я его описывал в статье на хабре. Демка там получилась так себе, но с тех пор идея обкаталась и успешно применяется.

Как говорится, ябзаверстал (за магические числа в примере ответственности не несу, был пьян).

Можно взять базовую разметку:

.project-timeline
    .step
        .number 1
        .content Lorem ipsum dolor sit amet.
    .step
        .number 2
        .content Lorem ipsum dolor sit amet.
    ....

С помощью CSS-трансформаций перевернуть половину элементов, а их содержимое перевернуть еще раз.


На маленьких экранах все повернуть еще раз.



---
CodePen

На главной странице в 728 строке stylesheet_custom.css подключается второй раз.

1. caniuse.com/#search=ttf, caniuse.com/#search=otf.
2. Я бы склонялся к woff. Ну или woff в сочетании с eot, если нужны старые IE.
3. Google PageSpeed Insight вообще много на что ругается. Такой уж у него характер. В первую очередь под сжатием обычно понимают удаление всех ненужных символов из шрифта (у вас на сайте редко когда будет больше 1-2 языков, так что и полный набор обычно не нужен).
4. Стоит ли вообще учитывать эти критерии , на которые ругается PageSpeed Insight? - Нет. Этот тест показывает вам узкие места, на которые стоит обратить внимание, но в первую очередь вы должны смотреть своими глазами. Я видел сайты, которые загружались меньше секунды и при этом имели 30-40 баллов по оценке этого теста, а то и меньше, а видел и такие, что они грузились 8-10 секунд при оценке в 95-100.