Чому велика кількість магічних чисел прийнятна у CSS та SVG?

Часто я бачу такі запитання у списку гарячих запитань до мережі, як цей, які в основному задають питання "як я малюю цю довільну форму в CSS". Незмінно відповідь - це пара блоків даних CSS або SVG з купою, здавалося б, випадкових твердо кодованих значень, які утворюють потрібну форму.

Коли я дивлюся на це, я думаю: «Юк! Який бридкий блок коду. Я сподіваюся, що я ніколи не бачу такого типу матеріалів у своєму проекті ». Однак я бачу такі типи питань і відповідей досить часто і з великою кількістю відгуків, тому явно громада не вважає їх поганими.

Але чому це прийнятно? З мого заднього досвіду це не має для мене сенсу. Так чому це нормально для CSS / SVG?

По-перше, у програмі уникають магічних значень за допомогою змінних чи констант. CSS не підтримує змінні, тому навіть якщо магічні значення були нахмурені, у вас не має великого вибору (крім використання препроцесора як SASS, але ви б цього не зробили для одного фрагмента).

По-друге, значення можуть бути не такими магічними в мові, специфічній для домену, як CSS. У програмуванні магічне число - це число, де значення чи наміри не очевидні. Якщо рядок говорить:

x += 23;

Ви запитаєте "чому 23"? Яке міркування? Змінна може уточнити наміри:

x += defaultHttpTimeoutSeconds;

Це тому, що самотнє число може означати абсолютно все, що стосується коду загального призначення. Але врахуйте CSS:

background-color: #ffffff;
font-size: 16px;

Висота і колір не є магічними, оскільки значення цілком зрозуміло з контексту. А причина вибору специфічної цінності проста, оскільки дизайнери думали, що це буде добре виглядати. Введення змінної нічого не допоможе, оскільки ви все одно просто назвете її на зразок " defaultBackgroundColor" і " defaultFontSize".

Це прийнятно, оскільки ці формати - це не код , а дані . Якби ви видалили всі "магічні цифри", ви б по суті дублювали кожну мітку, і в кінцевому підсумку виходили б смішні файли типу:

mainkite_width = 200px
...
.mainkite {
  width: mainkite_width;
  ...

Кожного разу, коли вам потрібно було змінити деякі дані, вам потрібно було б шукати в двох місцях. Зрозуміло, є ситуації, коли непогано уникати дублювання, наприклад, якщо у вас є колір, який повторюється часто, і ви можете захотіти зміни, щоб змінити теми. Існують препроцесори та запропоновані розширення для вирішення цих ситуацій, але в цілому бажано мати номери разом зі структурою у форматі даних.

Заборона магічних чисел є первісною версією цього принципу дизайну:

Приймайте рішення в одному місці .

Але це не магічні числа . Принаймні, це стосується не будь-якого відомого про мене стилю кодування.

ширина: 200px;
висота: 200px;

Вони чітко позначені. Звичайно, цифри бувають однаковими. Але ширина - ширина, а висота - висота. Вони розроблені для того, щоб змінюватись незалежно.

Тепер, якщо у вас є 5 об'єктів, які всі повинні були мати однакову ширину і кожен незалежно твердо кодував їх ширину, я бив вас непрямою палицею.

Я б не називав їх магічними цифрами, якщо вони будуть позначені міткою, але я все одно бив вас непрямою палицею.

Оскільки CSS не є мовою програмування, натомість файл конфігурації містить змінні дані для вашої програми.

В даний час CSS настільки потужний, що ви можете насправді запрограмувати в ньому, але це крім суті. По суті це все ще мова таблиці стилів .

Давайте зробимо крок назад. Уявіть, у нас є мова програмування, яка може малювати на екрані. Уявіть, що ми хочемо запрограмувати його, щоб намалювати веб-сторінку.

Спочатку ми вводимо в наш код тонни магічних чисел. Ширина поля, висота тексту, відступи тощо тощо.

jump(100) // The margin
drawTable(500, 500)
writeText("Hello World", 12)

Отже, ми витягуємо магічні числа і ставимо їх поверх нашого файлу.

int margin = 100
int table = 500
int text_size = 12
jump(margin) // The margin
drawTable(table, table)
writeText("Hello World", text_size)

Зараз це трохи некрасиво. Ми швидше читаємо наші змінні номери з файлу конфігурації.

margin 100
table 500
text size 12

Гм, це трохи незрозуміло ... Що означають ці цифри? Що означають ці імена? Давайте трохи її формалізуємо.

margin_left 10em
table_width 500px
table_height 500px
font_size 12px

Але ви знаєте, ми хочемо трохи розширити нашу програму. Ми також хочемо, щоб він малював сторінки з кількома таблицями, сторінки без таблиць, сторінки з абзацами або кнопками і багато іншого. Додамо до нашого конфігураційного файла селектори, щоб ми могли вказати, який абзац повинен мати більший шрифт або інший колір тексту, можливо, ми можемо підтримувати вкладені елементи, можливо, ми можемо використовувати загальне властивість у нашому конфігураційному файлі, а потім замінити його конкретним один з кількох вкладених елементів.

Ви відчуваєте, куди це йде, врешті-решт потрапляєте як CSS. (І браузер, щоб надати його.)

Чи повинні ми тоді додавати можливості до нашого конфігураційного файла, щоб ми могли знову уникати магічних чисел? Додати змінні? Додати файл конфігурації для нашого CSS-файлу? Здається трохи безглуздо, якщо ви пам’ятаєте, що наш CSS-файл - це той самий файл конфігурації.

Але це звичайно не вірно; ваш CSS-файл зростає і збільшується, і з часом ви стикаєтеся з тими ж проблемами, що і з оригінальними магічними числами, однакове число, що повторюється всюди, іноді з невеликими перетвореннями тощо.

Однак сучасний CSS дозволяє багатьом способам уникнути цього повторення. Ви можете використовувати класи, які застосовуються до багатьох елементів, ви можете встановити стиль для всіх divs, але потім конкретно замінити один, а CSS 3 навіть дозволяє використовувати певне використання змінних.

Це не означає, що вам потрібно починати використовувати змінну CSS у кожному можливому місці. Використовуйте його там, де це має сенс, і використовуйте його там, де ви уникаєте дублювання, або коли інші доступні методи також не вистачають.

Зрештою, ви також не хочете занадто багато магічних чисел у своєму конфігураційному файлі :-)

Чому для CSS / SVG це [купа начебто випадкових твердо кодованих значень]?

Це не нормально. Це можна писати і підтримувати прості файли «.css», але в кінцевому підсумку випадкові жорстко закодовані значення стануть поширеним тягарем.

Для будь-якого іншого, крім надзвичайно простих веб-сторінок, вам доведеться або розробити дисципліновану стратегію «знайти і замінити», або скористатися препроцесором CSS зі змінними, або визначити стилі за допомогою JavaScript.