Чем отличается Pixel Perfect от других подходов к вёрстке?

Pixel Perfect — это подход в вёрстке, при котором итоговый результат максимально точно, пиксель в пиксель, совпадает с дизайнерским макетом 14.

Для этого макет сайта сохраняется как обычная картинка, после чего эта картинка накладывается поверх свёрстанного сайта при помощи специальных инструментов, например, браузерных расширений 1. После наложения становится очевидной разница, если она есть, между тем, как нарисовал дизайнер, и тем, что получилось в итоге 1.

От других подходов к вёрстке Pixel Perfect отличается тем, что предполагает соблюдение размеров и интервалов из макета с точностью до нескольких пикселей 5. Чтобы этого добиться, нужно указывать точные размеры и группы шрифтов, высоту строк, отступы между элементами и блоками, размеры изображения 5.

В качестве альтернативы Pixel Perfect можно использовать дизайн-системы — конструктор из элементов, который уже был утверждён и позволяет собирать сайт 2. Дизайн-система хорошо масштабируется, её легко поддерживать, она позволяет ускорить работу верстальщика 2.