Александр Ме

1. А если добавить

add_action('wp_ajax_nopriv_my_action', [$this,'my_action_callback']);

что-то меняется?
2. У Вас в js action:'add'
а в php
my_action

есть, % - от родителя, rem - от изначально установленного (для html)

на https://jsfiddle.net/driver/xzpnzb3j/

pastebin.com/uNfLxXCu

ps. скрипт не до конца, т.к. вы сами дали битый исходник

можно ли с ними работать в gulp-sass как с обычными .sass файлами?

Обычные - это как раз .scss-файлы. А .sass - устаревший синтаксис для извращенцев.

Всё это формальные параметры и оценки, которые даны не для слепого следования, а для того чтобы оценить ситуацию и понять что можно оптимизировать.

Если Google говорит что есть CSS блокирующий рендер, но вы-то знаете что это не проблема - то так тому и быть, не стоит сильно париться по этому поводу. Всегда критически анализируйте оценку и не гонитесь за абстрактными попугаями если это не имеет практического смысла.

Ничего проще и быть не может, чем slick slider. Он очень простой, но и при этом очень гибкий.

очень удобно верстать в единицах rem. Одним мановением руки весь дизайн удобно масштабируется.
для мелких иконок чаще удобнее использовать пиксели
проценты и вьюпорты в основном для общей раскладки и тому подобное.
ну и главное - думать головой, где что использовать.

Хороший материал Em vs Rem
Для примера взять: https://getbootstrap.com/examples/jumbotron/
В шапке размер текста и особенно отступы сверху, снизу обычно делаю в rem
Ширину блоков внутри контейнеров в %
Скругление углов и всё что касается картинок обычно в пикселях
vh чаше для первого экрана, если он эффектный, красивый и надо что бы он точно убрался в первый экран
Как-то так.