Руководство по созданию интуитивно понятного стиля с использованием блочной модели CSS.
Одним из самых противоречивых аспектов разработки интерфейса является стиль. Используете ли вы React, Angular, Vue.js, Svelte или любую другую библиотеку внешнего интерфейса, вы либо ненавидите ее, либо любите. Но независимо от того, насколько вам нравится CSS в разработке интерфейса, это неизбежно.
Лично я обнаружил, что блочная модель CSS — одна из самых простых, но в то же время сложных концепций для работы. Теоретически он отвечает за ширину и высоту элемента, и вам нужно учитывать только 4 вещи: область содержимого, отступы, границу и поля. Но на практике может быть сложно заставить все эти 4 аспекта интуитивно работать вместе таким образом, чтобы получить гибкие и отзывчивые пользовательские интерфейсы.
Некоторые люди даже утверждают, что временами это может быть довольно подавляющим. И я был одним из них.
Блочная модель content-box по умолчанию
В CSS блочная модель элемента может быть изменена с помощью правила box-sizing. Есть только два варианта, и по умолчанию для модели коробки установлено значение content-box. В этой блочной модели ширина и высота, заданные для элемента, применяются только к области содержимого элемента.
Допустим, у нас есть элемент шириной 400 пикселей и высотой 300 пикселей. Но по причинам дизайна теперь он также должен включать отступы (15 пикселей), границу (30 пикселей) и поля (10 пикселей). После установки этих правил CSS размер элемента теперь не просто 400 на 300 пикселей. Это связано с блочной моделью content-box. Вместо этого только содержимое элемента будет размером 400 на 300 пикселей. Весь элемент будет иметь ширину 490 пикселей (400 + (15 + 30) * 2) и высоту 390 пикселей (300 + (15 + 30) * 2)).
Хотя это значение по умолчанию, и большинство людей приспособятся к этой модели, мне это кажется нелогичным. Проблема, с которой я сталкиваюсь в этой блочной модели, заключается в том, что она обрабатывает границы и отступы иначе, чем моя мысленная модель. Вместо того, чтобы рассматривать размеры элементов, основываясь исключительно на их содержимом, я думаю о них в целом, включая отступы и границы.
Для меня это сделало процесс определения размеров элементов довольно утомительным. Вам нужно будет начать с содержимого внутри, двигаться наружу, чтобы весь элемент включал границу и отступы, а затем снова возвращаться внутрь, чтобы вычислить различные размеры.
Блочная модель border-box
Вот тут-то и появляется другой вариант блочной модели, border-box. Вместо того, чтобы рассматривать только область содержимого элемента по его ширине и высоте, эта блочная модель учитывает всю область содержимого, отступы и границу.
Таким образом, используя предыдущий пример, весь элемент по-прежнему останется шириной 400 пикселей и высотой 300 пикселей. Вместо того, чтобы добавлять отступы и границы за пределами этих размеров, они добавляются внутри. Таким образом, контент в конечном итоге будет иметь ширину 310 (400 - (15 + 30) * 2) пикселей и высоту 210 (300 - (15 - 30) * 2) пикселей.
Это сделало вещи намного более понятными для меня и позволило мне создать стиль, который казался более интуитивным. Теперь, если бы я предоставил элементу определенные размеры, было бы гарантировано, что размер элемента по-прежнему будет соответствовать этим спецификациям. В то время как блочная модель content-box рассуждает о размере пользовательского интерфейса на уровне его содержимого, блочная модель border-box делает это на уровне всего элемента.
(Попробуйте здесь, в тестовой среде CodeSandbox)
Если вам понравилась эта статья, рассмотрите возможность проверить другие записи в информационном бюллетене Uncommon React и мой Twitter для будущих обновлений.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
