0 added
0 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>18 авг 2021</li>
2
<ul><li>18 авг 2021</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><h2>Ты не пройдёшь: магические числа для начинающих фронтендеров</h2>
4
</ul><h2>Ты не пройдёшь: магические числа для начинающих фронтендеров</h2>
5
<p>Выводим Гэндальфа на чистую воду: что такое магические числа и почему верстальщику надо гнать их взашей из своего проекта.</p>
5
<p>Выводим Гэндальфа на чистую воду: что такое магические числа и почему верстальщику надо гнать их взашей из своего проекта.</p>
6
<p>olia danilevich / Ion Ceban / Matheus Bertelli / Skylar Kang / Pexels / Polina Vari для Skillbox</p>
6
<p>olia danilevich / Ion Ceban / Matheus Bertelli / Skylar Kang / Pexels / Polina Vari для Skillbox</p>
7
<p>Журналист, коммерческий автор и редактор. Пишет про IT, цифровой маркетинг и бизнес. Сайт:<a>darovska.com</a>.</p>
7
<p>Журналист, коммерческий автор и редактор. Пишет про IT, цифровой маркетинг и бизнес. Сайт:<a>darovska.com</a>.</p>
8
<p><strong>об авторе</strong></p>
8
<p><strong>об авторе</strong></p>
9
<p>Преподаватель в "Хекслете", автор Telegram-канала<a>LayoutCoder</a>.</p>
9
<p>Преподаватель в "Хекслете", автор Telegram-канала<a>LayoutCoder</a>.</p>
10
<p>Магическими называют такие числа в коде, смысл которых понятен только написавшему их программисту. Например, иногда в интернет-магазинах цену товара автоматически умножают на 1,2, вместо того чтобы ввести понятную переменную для НДС. И без комментариев такие коэффициенты понять очень сложно. Магические числа встречаются в любом языке программирования: JavaScript, Python, Ruby. Они есть даже в CSS.</p>
10
<p>Магическими называют такие числа в коде, смысл которых понятен только написавшему их программисту. Например, иногда в интернет-магазинах цену товара автоматически умножают на 1,2, вместо того чтобы ввести понятную переменную для НДС. И без комментариев такие коэффициенты понять очень сложно. Магические числа встречаются в любом языке программирования: JavaScript, Python, Ruby. Они есть даже в CSS.</p>
11
<p>Чтобы избавиться от магического числа в коде, достаточно ввести для индекса 1,2 специальную переменную VAT - тогда любому разработчику, который читает и дополняет ваш код, будет понятен "физический" смысл числа.</p>
11
<p>Чтобы избавиться от магического числа в коде, достаточно ввести для индекса 1,2 специальную переменную VAT - тогда любому разработчику, который читает и дополняет ваш код, будет понятен "физический" смысл числа.</p>
12
<p>Веб-вёрстка близка к программированию, и проблема магических чисел здесь очень актуальна. Я преподаю и, комментируя код студентов, часто вижу, как отступы, длина, ширина блоков берутся практически с потолка. Постоянно попадаются записи вроде "width = 47%" - из них совершенно непонятно, почему взято именно 47%. Я-то понимаю: если на вёрстке пишут "47% от ширины", это чаще всего означает, что 3% ушло на отступы между блоками. Однако всё равно писать код нужно так, чтобы это было понятно без гаданий.</p>
12
<p>Веб-вёрстка близка к программированию, и проблема магических чисел здесь очень актуальна. Я преподаю и, комментируя код студентов, часто вижу, как отступы, длина, ширина блоков берутся практически с потолка. Постоянно попадаются записи вроде "width = 47%" - из них совершенно непонятно, почему взято именно 47%. Я-то понимаю: если на вёрстке пишут "47% от ширины", это чаще всего означает, что 3% ушло на отступы между блоками. Однако всё равно писать код нужно так, чтобы это было понятно без гаданий.</p>
13
<p>Магические числа определяют, насколько быстро верстальщик или разработчик, которые будут поддерживать код, разберутся, почему введены такие константы. В общем, проект нужно делать так, чтобы его логику понял даже бэкенд-разработчик, который практически не знает веб-вёрстку. Для этого во время написания кода надо постоянно задавать себе вопрос: "А поймёт ли код другой программист?"</p>
13
<p>Магические числа определяют, насколько быстро верстальщик или разработчик, которые будут поддерживать код, разберутся, почему введены такие константы. В общем, проект нужно делать так, чтобы его логику понял даже бэкенд-разработчик, который практически не знает веб-вёрстку. Для этого во время написания кода надо постоянно задавать себе вопрос: "А поймёт ли код другой программист?"</p>
14
<p>В вёрстке проблема магических чисел решается просто - через переменные CSS или в препроцессорах. Например, она красиво решается в фреймворке Bootstrap - в нём есть отдельный файл _variables.scss, где прописаны все используемые переменные: какие сделаны отступы и почему, какие цвета применяются.</p>
14
<p>В вёрстке проблема магических чисел решается просто - через переменные CSS или в препроцессорах. Например, она красиво решается в фреймворке Bootstrap - в нём есть отдельный файл _variables.scss, где прописаны все используемые переменные: какие сделаны отступы и почему, какие цвета применяются.</p>
15
Пример файла _variables.scss: со второй по девятую строку вводятся переменные с названиями цветов, с 14-й по 21-ю строку эти переменные сопоставляются со значениями.Скриншот: предоставлен Никитой Михайловым<p><strong>Способ 1</strong></p>
15
Пример файла _variables.scss: со второй по девятую строку вводятся переменные с названиями цветов, с 14-й по 21-ю строку эти переменные сопоставляются со значениями.Скриншот: предоставлен Никитой Михайловым<p><strong>Способ 1</strong></p>
16
<p>Разбивать проект на логические блоки и описывать его с точки зрения архитектуры: например, отступы между колонками, ширину бордеров и тому подобное выносить в переменные, чтобы назначение этих переменных было максимально очевидным. Например, если 3% уходит на отступы между блоками, стоит использовать встроенную в CSS функцию calc и передать в неё значение "50% минус размер отступа".</p>
16
<p>Разбивать проект на логические блоки и описывать его с точки зрения архитектуры: например, отступы между колонками, ширину бордеров и тому подобное выносить в переменные, чтобы назначение этих переменных было максимально очевидным. Например, если 3% уходит на отступы между блоками, стоит использовать встроенную в CSS функцию calc и передать в неё значение "50% минус размер отступа".</p>
17
Пример использования функции calc - на 12-й строке. Скриншот: предоставлен Никитой Михайловым<p><strong>Способ 2</strong></p>
17
Пример использования функции calc - на 12-й строке. Скриншот: предоставлен Никитой Михайловым<p><strong>Способ 2</strong></p>
18
<p>Не заигрываться с переменными - их не должно быть слишком много, иначе структура разрастётся и снова усложнится. Чаще всего переменные нужны на внутренних и внешних отступах и для цветов.</p>
18
<p>Не заигрываться с переменными - их не должно быть слишком много, иначе структура разрастётся и снова усложнится. Чаще всего переменные нужны на внутренних и внешних отступах и для цветов.</p>
19
<p><strong>Способ 3</strong></p>
19
<p><strong>Способ 3</strong></p>
20
<p>Стараться не подгонять макет с помощью мелких отступов. Например, если вы видите, что внешний отступ справа 43, а слева 32, то это тревожный звоночек - здесь что-то не так. Как правило, это попытка сделать что-то очень быстро и тут же выпустить в продакшн. Не надо так.</p>
20
<p>Стараться не подгонять макет с помощью мелких отступов. Например, если вы видите, что внешний отступ справа 43, а слева 32, то это тревожный звоночек - здесь что-то не так. Как правило, это попытка сделать что-то очень быстро и тут же выпустить в продакшн. Не надо так.</p>
21
<p>Магические числа - одна из самых распространённых проблем. Однако, чтобы её решить, не нужно алгоритмическое мышление или знание каких-то сложных систем и тайной науки. Если надо отрефакторить проект, однозначно придётся вычищать из него все магические числа. Правда, чаще всего они становятся едиными для всего проекта и используются повсюду, поэтому, чтобы их обнаружить, нужны опыт и насмотренность. А если удалось их найти - смело выводите в переменные и заменяйте.</p>
21
<p>Магические числа - одна из самых распространённых проблем. Однако, чтобы её решить, не нужно алгоритмическое мышление или знание каких-то сложных систем и тайной науки. Если надо отрефакторить проект, однозначно придётся вычищать из него все магические числа. Правда, чаще всего они становятся едиными для всего проекта и используются повсюду, поэтому, чтобы их обнаружить, нужны опыт и насмотренность. А если удалось их найти - смело выводите в переменные и заменяйте.</p>
22
<p>Хотите научиться верстать сайты с нуля и делать уличную магию - записывайтесь на курс "<a>Веб-вёрстка</a>" в Skillbox.</p>
22
<p>Хотите научиться верстать сайты с нуля и делать уличную магию - записывайтесь на курс "<a>Веб-вёрстка</a>" в Skillbox.</p>
23
<a><b>Бесплатный курс по Python ➞</b>Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>
23
<a><b>Бесплатный курс по Python ➞</b>Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>