Когда Bootstrap не нужен и советы для продакшена
Bootstrap экономит время, но у готовых решений есть цена: лишний код, узнаваемый вид, борьба с чужими стилями. Перед новым проектом стоит честно ответить, подходит ли он, а перед публикацией — проверить несколько вещей, которые на учебной странице не важны.
Когда лучше обойтись без него
| Ситуация | Почему Bootstrap мешает |
|---|---|
| Уникальный дизайн от дизайнера | Почти каждый компонент придётся переопределять, и своих стилей станет больше, чем пользы |
| Одна простая страница | Сетку и пару кнопок проще написать на флексбоксе и гриде из учебника |
| Важен каждый килобайт | Даже урезанная сборка тянет базовые стили, которые могут не понадобиться |
| Проект на React или Vue со своими компонентами | Скрипты Bootstrap меняют DOM напрямую и конфликтуют с фреймворком |
Альтернативы: чистый CSS с гридом и флексбоксом, утилитарный фреймворк Tailwind CSS, библиотеки компонентов под конкретный фреймворк. Для админ-панелей, внутренних инструментов и прототипов Bootstrap по-прежнему один из самых быстрых путей.
Фиксируйте версию
В адресе CDN всегда указывайте точную версию, как в курсе: bootstrap@5.3.3. Адрес без версии однажды подгрузит новую, и вёрстка может сломаться без единого изменения с вашей стороны. В npm-проекте версию фиксирует package-lock.json — добавьте его в Git.
Подключайте только нужное
Через CDN подключают весь файл — около 30 КБ CSS после сжатия. В проекте на Vite можно оставить только нужные части через Sass, как в уроке о настройке. Скрипты тоже можно импортировать по одному:
// src/main.js
import Collapse from 'bootstrap/js/dist/collapse';
import Modal from 'bootstrap/js/dist/modal';Если на сайте есть только меню-бургер и окна, в сборку не попадут код карусели, подсказок и остальных компонентов.
Проверьте доступность
Bootstrap даёт хорошую основу, но не всё делает за вас. Перед публикацией пройдитесь по списку:
- у картинок осмысленный
alt; - у кнопок-иконок есть
aria-label; - у каждого поля формы есть
<label>; - страница проходится клавишей Tab, фокус виден;
- цвет не единственный носитель смысла.
Свой стиль
Если оставить всё по умолчанию, сайт выглядит «как Bootstrap» — люди это замечают. Минимум, который меняет впечатление: свой $primary, свой шрифт, другое скругление. Это три строки Sass или несколько CSS-переменных.
Частая ошибка
Переопределять стили Bootstrap через !important и длинные селекторы вроде .navbar .nav-item .nav-link.active. Каждое такое правило приходится перебивать следующим, ещё более длинным, и через месяц стили невозможно поддерживать. Сначала ищите переменную Sass или CSS-переменную компонента и меняйте её — это обычно одна строка.