Нету никаких уроков, нужно просто выставлять отступы так, что бы получилось как в макете. Браузер по своему рендерит макеты и просто брать значения из фигмы и вставлять не достаточно.
подскажите насколько актуальна сейчас в 2020 и в 2021
Это всегда актульно, НО!!! Без фанатизма. Нужно максимально стараться привести верстку к макету. Нет нужны и смысла мучить себя 1-2 пикселями. А так же, не забываем про особенности браузеров в отображении тех или иных стандартных тегов.
select,
button,
input и т.п. Поэтому сначала нужно взять либо какой-то
reset или
normalize.css
В первую очередь всё зависит от дизайнера. На сколько он любит свою работу и на сколько он профессионален. Мне не попался ещё дизайнер, который нарисует всё на столько ровно и одинаково.
Чаще всего, дизайнер, рисуя кнопку, не понимает, что это за элемент и какие есть правила его применения в отрасли. На одной странице кнопка выглядит так, на другой так, на 3й так, и т.д. И так со многими повторяющимися элементами.
Я всегда списываю это и делаю так, что бы получилось одинаково везде. Пока никто никогда не жаловался.
Следствие чего, не имеет смысла для каждой страницы делать кнопку разной. Достаточно просто привести её к средним значениям.
Точно так же бывает с сетками. Либо её вообще нет, либо имитация.
P.S. Это не прописная истина, это мой подход в работе, который выработался за мою долгую практику. Я тоже пытался делать попиксельно, но это лишняя трата времени и своих сил.