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 - что-то тут не так со значением отступа.

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

Посмотрите на mathsass - там реализованы все эти функции.

Z-index over9000 не нужен вообще. Это костыль, который некоторые люди, не понимающие css, используют для того, чтобы быть уверенными в том, что их элемент будет "сверху". При этом цивилизованные люди ограничиваются небольшими значениями z-index, с которыми проще работать. Иногда используют логические схемы вроде таких:

• 0-9 - в пределах компонента
  
• 10-19 - для всплывающих менюшек, подсказок и.т.д.
  
• 20-25 - для выезжающих меню, модалок и.т.д.
  

Можно ограничиться только диапазоном 0-9, но такая схема, хоть и является избыточной, позволяет проще ориентироваться в коде.

А те, кто говорит "Но если используются сторонние плагины, в которых элементы имеют большой z-index, а их надо перекрыть, то ничего другого не остается" в ответах выше ( mletov ) просто решают один костыль подпереть другим. Не стоит утверждать, что ничего другого не остается - в большинстве случаев предпочтительнее в такой ситуации использовать обертку (пример упрощен для наглядности):

<div class="my-div">My element</div>
<div class="wrapper">
    <div class="over9000">over9000</div>
</div>

div { position: absolute; width: 100%; }

.my-div   { background: #0f0; z-index: 2; }
.wrapper  { z-index: 1; }
.over9000 { background: #f00; z-index: 9999 !important; }

В такой ситуации "мой элемент" будет выше, чем "over9000".
codepen

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

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);
}

Иван Карпущенко верно говорит, можно использовать transform:skew, но вот по поводу использования псевдоэлемента для текста - очень спорная мысль, точнее сказать не универсальная. Или придется этот текст передавать через data-атрибут, что будет довольно странным решением. Гораздо практичнее просто в button добавить span с текстом - codepen.

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

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

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

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

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