В современном вебе, где сайты в среднем отправляют 500КБ сжатого JavaScript и 1,5 МБ изображений, работая при этом на Android-устройстве среднего уровня через 3G с лагом в 400мс, производительность CSS-селекторов является, наверное, наименьшей из существующих проблем.

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

В этом руководстве будут раскрыты различия, плюсы и минусы, а также выработаны рекомендации по использованию float, inline-block, display: table и flexbox при построении отзывчивых (responsive) CSS-макетов. Вот некоторые из методов, описанных в руководстве:

  • Выравнивание элементов, следующих бок о бок (друг за другом)
  • Последовательное расположение
  • Горизонтальное центрирование
  • Вертикальное центрирование
  • Выравнивание высоты элементов ряда
  • Передовые техники с использованием flexbox