От автора: почти 10 лет назад был впервые представлен Bootstrap. Вскоре, после этого, он регулярно значился в резюме разработчиков в списке технических навыков. В то время я работала full-stack разработчиком, и большинство моих проектов следовали схожим требованиям: малый бюджет и высокие амбиции.
Bootstrap, казалось, удовлетворял именно этим потребностям. Это позволило разработчикам с небольшими знаниями внешнего интерфейса создавать великолепные веб-сайты в кратчайшие сроки. Приложив немного усилий, сайты даже работали на мобильных устройствах. Bootstrap работал, Bootstrap продавался — по крайней мере, в глазах клиентов и, вероятно, в глазах большинства пользователей веб-сайтов.
И, по прошествии десяти лет, ничего не изменилось. Согласно Wappalyser, существует почти 3,5 миллиона веб-сайтов, которые все еще основаны на Bootstrap. Даже большие проекты, такие как paypal.com, etsy.com и gitlab.com, используют его.
Во многих случаях в этом нет ничего плохого. Но, как и новая тенденция быстрой разработки веб-сайтов, таких как Wix или Squarespace, Bootstrap был предназначен для быстрого создания веб-сайтов с минимальными знаниями внешнего интерфейса или без них. Внимание никогда не было акцентировано на создании доступного контента или поддерживаемого кода. В результате было легко попасть в ловушку создания раздутых веб-сайтов, из-за которых разработчики получали много проблем, если им когда-либо приходилось что-то менять в макете.
1. Система сеток
Самая популярная и все же самая легко узнаваемая функция Bootstrap — это, вероятно, система сеток. Ее относительно просто использовать: посмотрите на дизайн, разделите его на столбцы и поместите столбцы внутри тегов div. Для макетов, созданых для мобильных устройств, вы можете добавить дополнительные контрольные точки. Вы даже можете сделать так, чтобы столбцы менялись местами на мобильном устройстве.
Чтобы все это работало, bootstrap использует множество контрольных точек для экранов разного размера. Хотя эти брейкпоинты можно настроить, значения по умолчанию основаны на пикселях.
Проблема с контрольными точками на основе пикселей в том, что они плохо работают для обеспечения доступности. Единицы контрольных точек должны основываться на размере вашего шрифта, и этот размер шрифта должен быть относительной единицей, например, EM или REM.
Обычно пользователи с нарушениями зрения изменяют размер шрифта браузера по умолчанию. Относительные брейкпоинты гарантируют, что дизайн по-прежнему работает, если настройки шрифта браузера изменены. Это означает, что макет будет меняться в разных точках для разных пользователей, в зависимости от их настроек.
Кроме того, сетка Bootstrap добавляет на страницу много накладных расходов и ненужной разметки. Поскольку IE постепенно теряет поддержку, CSS-сетка становится гораздо более легким вариантом. А если вам нужно поддерживать устаревшие браузеры, существует множество легких миксинов flexbox.
2. Опасайтесь !important
До bootstrap 5.0 использовались классы с плавающей запятой для выравнивания содержимого. Они достаточно просты, прикрепите плавающий-правый или плавающий-левый к любому элементу, чтобы выровнять его по любой стороне экрана.
Любой разработчик, которому в колледже приходилось создавать веб-сайт портфолио / резюме, не имея возможности использовать какие-либо инструменты, помнит, как было сложно заставить изображение правильно расположится на странице. Правильное размещение элементов — это уже навык.
Итак, Bootstrap решил немного упростить задачу. Если вы наложите на элемент «плавающий класс», вам почти всегда гарантировано, что он появится там, где вы хотите. Вот как это выглядит под капотом:
@mixin float-left { float: left !important;
}
@mixin float-right { float: right !important;
}
@mixin float-none { float: none !important;
}Всего в Bootstrap 4 используется 146 экземпляров !important. Использование операторов !important в CSS считается плохой практикой и затрудняет поддержку или корректировку кодовой базы в дальнейшем.
К счастью, с Bootstrap 5 количество использований сокращено до 19, а вышеуказанные классы с плавающей запятой заменены гибкой системой.
Однако я сомневаюсь, что многие из миллиона веб-сайтов работают на Bootstrap 5. Например, Etsy.com , все еще использует Bootstrap 2.0.
Для веб-сайтов, построенных по системе float /pull, это, вероятно, слишком рискованно и, по-видимому, их не нужно обновлять.
3. Пусть кнопки будут кнопками
Прелесть использования Bootstrap для создания макетов заключается в том, что все выглядит так, как должно выглядеть, с помощью всего одного класса. Практически не имеет значения, какой элемент вы пытаетесь стилизовать, если вы хотите, чтобы он выглядел как кнопка, вы можете сделать его похожим на кнопку.
Все вышеперечисленные элементы выглядят одинаково и ведут себя одинаково, пока вы не попытаетесь получить к ним доступ с клавиатуры. Пользователи клавиатуры будут использовать клавишу TAB для переключения между фокусируемыми элементами — в этом примере div никогда не получит фокус. И кнопки, и элементы ahref могут быть сфокусированы, но при взаимодействии с ними с клавиатуры они немного отличаются.
Заключение
Конечно, в наши дни Bootstrap — это намного больше, чем упомянутые выше примеры. Он также содержит ряд компонентов JavaScript для часто используемых элементов.
И в этом заключается ответ: любой фреймворк может быть настолько хорош, насколько хорош разработчик, его реализующий. Конечно, с помощью Bootstrap можно создавать быстрые, отзывчивые и доступные веб-сайты.
Но вот что я увидела: как только вы начнете разбирать Bootstrap на части, пытаясь понять, как использовать его только там, где это необходимо, сделать его доступным и легким в обслуживании, вы, вероятно, на полпути к созданию своего собственного «фреймвокра».
Фронтенд не обязательно должен быть волшебной загадочной коробкой. Доступность не должна быть болезненной. Ограниченный бюджет не должен влиять на удобство использования веб-сайта.
Иногда полезно сделать шаг назад, чтобы проанализировать требования, прежде чем внедрять какой-либо фреймворк в проект. Во многих случаях может быть быстрее и эффективнее создать собственный набор стилей или компонентов.
Автор: Iris Winter
Источник: betterprogramming.pub
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен