Я использую Bootsrap4, его упростили, сейчас легче комбинировать разные компоненты.
Но чтобы ощутить все прелести фреймворка, как тут уже выше писали его нужно использовать именно как фреймворк, а не как ядро. Т.е. не надо переопределять свои стили поверх бутстраповских, надо работать с переменными бутстрапа, переопределять их, и тогда не будет ни грамма мусора. Где надо SASS файлы писать свои взамен.
И вот тут возникает загвоздка, возникает необходимость использования некой систематизации в названиях новых дополнительных переменных и построения файловой системы. Иначе в какой-то момент может крыша съехать, перестанешь понимать что ты вообще делаешь.
Смысл такой: название переменной SASS должно совпадать с названием CSS класса. Ну или хотя бы частично совпадать. Дал название переменной, сразу прописал класс с таким же названием в HTML. В итоге имеем такую идеальную картину - при разработке шаблона работаем только с одним файлом, с файлом переменных, в котором у вас весь сайт перед глазами по сути. Вы смотрите на переменные и сразу по их названиям понимаете что это и где это будет на сайте. Отпадает необходимость даже браузер открывать, смотреть где какой класс. Браузер только в конце открывается чтобы посмотреть итоговый результат. С таким подходом шаблоны можно печь как горячие пирожки, в HTML залазить только чтобы классы сетки поменять.
Как всегда умные люди уже все за нас придумали. Есть систематизация BEM и SMACSS. BEM хорош тем что очень подробно даются названия классам, и названия переменных SASS точно совпадают с CSS классами. Но в целом как по мне BEM cлишком уж туп, потому что базовые стили вообще исключаются, нужно каждому блоку по сто раз одни и те же стили прописывать. Bootsrap использует упрощенный SMACSS, мне именно такой бутстраповский подход больше нравится, хотя там и названия переменных не полностью с названиями классов совпадают, я еще не до конца разобрался как классы прописываются, но главное хотя бы понимать что переменная изменит, за что отвечает.
Вот бутстраповская рекомендация в файле с переменными:
// General variable structure
//
// Variable format should follow the `$component-modifier-state-property` order.
Я конечно не знаю как нужно руку себе набить чтобы не открывая браузер сделать шаблон, но если я правильно понял главное предназначение SASS фреймворков именно в этом, точнее конечная цель когда ты можешь смело заявить что достиг 99 level. Но это конечно не самоцель браузер не открывать, система структурирования просто удобство дает, все на виду, все понятно, не надо лазить по CSS искать где что поменять надо, а просто нашел нужную переменную, поменял, скомпилировал, новое свойство сразу везде поменялось.
Голосование
30.01.2024, 23:47:50