Почему в CSS и SVG допустимо большое количество магических чисел?

Часто я вижу вопросы , включенные в список Hot Network Вопросы , как это , что в основном спрашивают «как я могу сделать эту произвольную форму в CSS». Неизменно ответом является пара блоков данных CSS или SVG с кучей, казалось бы, случайных жестко закодированных значений, которые формируют запрашиваемую форму.

Когда я смотрю на это, я думаю: «Тьфу! Какой уродливый блок кода. Надеюсь, я никогда не увижу подобные вещи в своем проекте ». Тем не менее, я вижу эти типы вопросов и ответов довольно часто и с большим количеством откликов, поэтому сообщество явно не считает их плохими.

Но почему это приемлемо? Исходя из моего внутреннего опыта это не имеет смысла для меня. Так почему же это нормально для CSS / SVG?

Во-первых, в программировании избегают магических значений, используя переменные или константы. CSS не поддерживает переменные, поэтому, даже если магические значения были отклонены, у вас не будет большого выбора (за исключением использования препроцессора в качестве SASS, но вы не сделаете этого для отдельного фрагмента).

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

x += 23;

Вы спросите «почему 23»? В чем причина? Переменная может уточнить намерение:

x += defaultHttpTimeoutSeconds;

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

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

Высота и цвет не волшебны, потому что значение совершенно ясно из контекста. И причина выбора значения spefic проста, потому что дизайнеры думали, что это будет хорошо выглядеть. Введение переменной ничего не поможет, так как в любом случае вы просто дадите ей имя " defaultBackgroundColor" и " defaultFontSize".

Это приемлемо, потому что эти форматы не код , а данные . Если бы вы удалили все «магические числа», вы бы по сути продублировали каждую метку и в итоге получили бы смешные файлы, такие как:

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

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

Запрет на магические числа является изначальной версией этого принципа дизайна:

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

Но это не магические числа . По крайней мере, не так, как в любом известном мне руководстве по стилю кодирования.

ширина: 200 пикселей;
высота: 200 пикселей;

Они четко обозначены. Конечно, цифры оказываются одинаковыми. Но ширина - это ширина, а высота - это высота. Они разработаны, чтобы варьироваться независимо.

Теперь, если у вас есть 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, однако, позволяет многим избежать этого повторения. Вы можете использовать классы, которые применяются ко многим элементам, вы можете установить стиль для всех элементов, divно затем переопределить один из них, а CSS 3 даже разрешает использование переменных.

Это не означает, что вам нужно начинать использовать CSS-переменную во всех возможных местах. Используйте его там, где это имеет смысл, и используйте его там, где вы избегаете дублирования или когда другие доступные методы также не работают.

В конце концов, вам не нужно слишком много магических чисел в вашем конфигурационном файле :-)

Почему [куча, казалось бы, случайных жестко запрограммированных значений] подходит для CSS / SVG?

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

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