Когда переходить на другой фреймворк
Pico специально сделан маленьким: он оформляет HTML и почти ничего не добавляет сверху. Для блога, документации или портфолио этого хватает. Но у проекта может появиться задача, которую проще решить большим фреймворком, — важно вовремя это заметить.
Чего в Pico нет
| Нужно | В Pico |
|---|---|
| Вкладки, слайдер, всплывающие уведомления | Нет, только своим кодом |
| Бейджи, плашки предупреждений | Нет готовых классов |
| Сетка с колонками разной ширины | Только равные колонки grid |
| Утилиты для отступов, цветов, выравнивания | Нет |
| Уникальный дизайн по макету | Придётся переопределять многие переменные |
Признаки, что пора переходить
- Своего CSS стало больше, чем разметки, и он в основном спорит со стилями Pico.
- Вы пишете третий самодельный компонент, который в Bootstrap есть готовым.
- Дизайнер прислал макет, где кнопки, поля и карточки совсем не похожи на Pico.
- Над интерфейсом работает команда, и нужны общие правила, а не договорённости.
Куда переходить
| Фреймворк | Когда выбрать |
|---|---|
| Bootstrap | Нужны готовые компоненты с JavaScript: окна, вкладки, уведомления |
| Tailwind CSS | Свой дизайн по макету, полный контроль через утилитарные классы |
| daisyUI | Хочется готовых компонентов, но на основе Tailwind |
Все три курса есть на сайте в разделе фреймворков HTML и CSS. Семантическая разметка, к которой приучает Pico, пригодится при любом выборе.
Постепенный переход
Переписывать сайт целиком не обязательно. У Pico есть условная сборка pico.conditional.min.css: она оформляет только то, что лежит внутри элемента с классом pico. Старые разделы остаются на Pico, а новые вы верстаете другим фреймворком:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.conditional.min.css">
<div class="pico">
<h3>Блог на Pico</h3>
<button>Подписаться</button>
</div>
<div>
<h3>Новый раздел без Pico</h3>
<button>Обычная кнопка браузера</button>
</div>В превью верхний блок оформлен Pico, а нижний выглядит как страница без стилей: серая кнопка браузера по умолчанию. Так два набора стилей не мешают друг другу, пока вы переносите страницы по одной.
Частая ошибка
Подключить Pico и Bootstrap на одну страницу целиком. Оба задают стили тегам <button>, <input>, <table>, и результат зависит от порядка файлов: кнопки получают смесь двух дизайнов. Если фреймворки должны жить вместе, ограничьте Pico условной сборкой.