Вадим Кот

Как сверстать у элемента угол скошенный под прямым углом?

1. Для удобства пересчета px to rem - 1rem равен 10px
2. В процентах для того, чтобы изменив базовый размер в настройках браузера (обычно 16px) rem пропорционально увеличивался в отличие от абсолютных 10px
3. Проще размеры задавать в пикселах, а затем с помощью https://github.com/cuth/postcss-pxtorem переводить нужные в rem

https://codepen.io/anon/pen/GBrJvY

Почему браузер читает CSS-селекторы справа налево

.item:nth-child(3n) {
  border: none;
}

codepen

с бутстрап обертками:

.col-md:nth-child(3n) .services-item{
  border: none;
}

codepen

https://github.com/aFarkas/lazysizes

В плане seo гугл бот точно видит картинки - можно убедиться в search console в сканирование->Просмотреть как Googlebot. Яндекс нужно протестировать аналогично гуглу в вебмастере.

В статье гугла по ссылке Александр Талалаев есть раздел Lazy loading libraries

https://codepen.io/WhoIsAndrew/pen/QGLeMP
https://codepen.io/CiTA/pen/ALVWzg
https://codepen.io/geoffgraham/pen/vWJeOP
https://codepen.io/mihaelnikic/pen/yJLJYG

Чтобы была поддержка в IE svg спрайта из внешнего файла нужно использовать полифилы https://github.com/jonathantneal/svg4everybody или https://github.com/Keyamoon/svgxuse

Самый простой пример

Вы не поверите, но вопрос по верстке именно такого элемента уже задавался в прошлом году и имеет несколько решений Как сверстать это?

Модификатор нельзя использовать самостоятельно https://ru.bem.info/methodology/quick-start/#%D0%9...

или так (останется только тени добавить)

Лучше

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Тогда у любого враппера можно определить box-sizing отличный от border-box и все его дочерние элементы унаследуют от него. А иначе придется у всех внутренних элементов переопределять box-sizing.
https://css-tricks.com/box-sizing/