Есть ли смысл при вёрстке всем элементам прописывать box-sizing: border-box?

Question

[sireshko]

На первый взгляд кажется, что очень удобно прописать где-нибудь в reset.css свойство box-sizing: border-box. Например, если один элемент вложен в другой и должен занимать ширину 100% от родительской и у него есть, скажем, левый и правый паддинги, то не нужно беспокоится о том, что он выйдет за пределы родителя.
Но какие здесь могут быть подводные камни?

Comments

[sireshko]

Кроме того, что IE версии меньше 9-ой не поддерживают box-sizing.

[nurise]

IE8-ка поддерживает

Answer 1

[Игорь Воротнёв]

Использование данного решения - вопрос привычки. Мозг начинает по-другому считать, к этом надо привыкнуть. Назад к "классической" модели возвращаться не захочется) Использовать ли? Мой выбор - да. Упрощает жизнь, ибо логичнее и понятнее. Поддержка во всех современных браузерах есть. Для старых (включая IE) есть полифил, или же старым вообще выдавать упрощенную версию.

Answer 2

[Crash]

Нет, старые браузеры это не поддерживают

Comments

[rumkin]

Для них можно сделать упрощённую верстку.

[Игорь Воротнёв]

@Bandicoot https://github.com/Schepp/box-sizing-polyfill

Answer 3

[rumkin]

Много где используется этот подход для сетки и форм. Но на все элементы навешивать не стоит, это лишь повлечет трудности в дальнейшем. Ну и важно понимать айдиторию проекта.
Я занимался разработкой front-end для достаточно крупного проекта, аудиторией которого были гики или продвинутые пользователи, нифронтенд бекенд в IE даже не видел (вообще ни разу, за чуть более чем год работы). Доработать под IE пришлось небольшую часть, но не html, а — js. Жалоб не было, а проект растет быстрее, чем разрабатывается, не стали париться.

Comments

[Юрий Даниленко]

Можете уточнить, когда стоит применять Flexible Box и когда нет?

Answer 4

[Иван Старков]

Зачем использовать? Теряется "магия html", тот самый пикантный момент когда верстка едет в неизвестных направлениях при незначительных правках незначительного элемента :-)
А вообще да - вопрос привычки. Я предпочитаю не использовать, но согласен - сильно упрощает жизнь

Answer 5

[exdeniz]

Всегда использую:

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

Comments

[sireshko]

С точки зрения производительности css не рекомендуется использовать универсальный селектор *.

[exdeniz]

www.paulirish.com/2012/box-sizing-border-box-ftw - посмотрите секцию Performance

[Реверс]

Валидатор ругается на префиксы вендоров.