m_ig Oct 17 at 09:15

Как использовать любой CSS-фреймворк в вашем проекте — Часть 2

Easy

5 min

5.7K

CSS * Angular * Website development * HTML * Interfaces *

Tutorial

Translation

Comments 7

Elendiar1 Oct 17 at 14:40

С современным css лучшее что можно сделать, так это перестать множить сущности и отказаться от css-фреймворков.

m_ig Oct 17 at 14:57

А что использовать вместо них?
Все равно же нужны какие-то компоненты, которые можно переиспользовать от проекта к проекту?

dlartagnan Oct 18 at 08:32

Важный момент: удалите все флаги !default после копирования файла.

Надо просто импортировать свои переопределения до импорта переменных bootstrap. Это написано в документации bootstrap https://getbootstrap.com/docs/5.3/customize/sass/#importing

m_ig Oct 19 at 07:28

И да, и нет :)
Все равно придется импортировать сначала как минимум Bootstrap функции - bootstrap/scss/functions потому что они используются внутри файла с переменными. Но вариант должен быть рабочим.
---
Хотя сам Bootstrap в документации настаивает на удалении default флага. Это оттуда же:
> Copy and paste variables as needed, modify their values, and remove the !default flag.

dlartagnan Oct 19 at 07:36

Просто вы предлагаете странный порядок. Не надо копировать все переменные и подключать их после bootstrap переменных. Лучше вынести только нужные вам переменные и подключить их перед переменными bootstrap.

Так вы видите, что вы конкретно переопределели. Ну, и конечно в этом файле вам нужно убрать default.

m_ig Oct 19 at 15:01

Такой вариант тоже возможен и я не раз пробовал его. Но он хорош когда количество таких переопределенных переменных меньше 100, а еще лучше пара десятков. Если таких переменных больше, то лучше копировать сразу все. Вот основные моменты из моего опыта:

1) если активно использовать переменные, то постоянно надо обращаться к оригинальному файлу с ними, чтобы их копировать оттуда к себе и переопределять. Проще сразу забрать все.

2) если работаете с командой над одним проектом, то некоторые разработчики вообще забивают на них и сразу пишут нужный им css вместо того чтобы найти нужную переменную которую можно использовать. Если держать все переменные в одном месте, то выше шанс что они будут использованы.

3) ну и структура оригинального файла. Если ее сохранить и скопировать целиком к себе, то потом будет гораздо проще понять через сравнение с оригинальным файлом, то было изменено через переменные, а что в кастомных файлах.

dlartagnan Oct 19 at 15:04

Да, с такой точки зрения, действительно лучше скопировать все.