CSS — это неотъемлемая часть любого сайта. Однако чистый css-код порой заставляет писать слишком много лишнего, и множество библиотек готовы взять рутинную работу на себя.
SASS/SCSS
Да, это не библиотека, а препроцессор. Но он настолько крут, что на мой взгляд, если в статье есть CSS, то без SASS никак. Чем же он крут? А вот чем.
Он расширяет функционал обычного CSS: позволяет разбивать стили на отдельные файлы и потом «женить» их в один. Есть возможность использовать переменные, вложенности, миксины и т. п. Всё то, о чем начинает мечтать разработчик в начале второго года своей работы, воплотили в SASS.
Почему препроцессор и что это значит?
Вы пишете на особом CSS синтаксисе, и в фоновом режиме сборщик SASS превращает ваши sass-файлы в css. На первый взгляд звучит сложно. Но если ваших знаний компьютера хватило на то, чтобы открыть эту статью, я уверен, с SASS вы тоже справитесь!
Bootstrap
Кто-то его не любит (например я), а кто-то тащится. Однако, стоит признать, что используют его все. Bootstrap — набор уже готовых UI элементов, гридов, форм, галерей и прочее, Найти всё необходимое можно, проскролив официальный сайт Bootstrap и скопировав код нужного элемента, а затем добавить его себе на страницу.
Bootstrap превращает процесс разработки в обычную игру в пазл с надфилем, так как любой элемент вы можете подогнать и привести к нужному виду. Это сильно упрощает рутинную вёрстку и избавляет от ошибок, которые можно допустить.
Минусы у этого чудо инструмента все же есть. Если вы хотите сделать дизайн, который очень сильно не похож на Bootstrap (такое бывает редко), то вам придется сильно переделывать стили. В этом случае проще сделать элементы заново.
Еще один минус, который явно бросается в глаза — это любовь к Bootstrap со стороны начинающих разрабов. В начале Bootstrap противопоказан, так как «он тебя сожрет». Если вы понимаете, о чем я. Он должен быть инструментом исключительно для экономии времени. Начать пользоваться им можно только в тот момент, когда вы четко понимаете, что способны сверстать макет и без него. В начальных этапах использовать его не стоит.
Animate.css
В наше время уже сложно чем-то удивить. Блестящие и переливающиеся фоны из прошлого десятилетия, приводящие к эпилептическим припадкам, уже не могут оставить клиента на сайте. Сейчас важную роль играет анимация. Приятные переходы и переключения элементов формы, кнопок и любых частей страницы, с которыми взаимодействует пользователь, делают процесс работы на сайте куда более приятным. Данная библиотека позволит не утопать в дебрях css-анимации, а использовать уже готовые кросс-браузерные решения.
Foundation
Я сомневался, включать ли эту библиотеку в подборку или нет. Тот факт, что в процессе работы и обучения вы наверняка с ней столкнетесь, сделали Foundation четвертым пунктом. Во многом Foundation можно заменить на Bootstrap, так как эти две библиотеки крайне похожи и отличаются лишь незначительными синтаксическими особенностями.
Исторически сложилось, что Bootstrap по ряду причин, о которых можно лишь догадываться, приобрел большую популярность и используется более активно. Но ориентируясь на функционал и качество, сложно сказать, какая библиотека лучше. Уж слишком они похожи.
Fontawesome
Это последний в списке, но никак не по значимости. Крайне полезный инструмент, который позволяет сильно экономить разработки, а также сокращает объём памяти, занимаемой проектом. Подключив данный инструмент, у вас появится возможность использовать огромное множество иконок, не подгружая их в виде картинок. Иконки подключаются с помощью добавления того или иного класса, тем самым сильно упрощая разработку.
Можно ли его отнести к CSS библиотеке? Достаточно условно, но вещь крайне полезная. Если вы интересуетесь разными библиотеками, то и Fontawesome не стоит оставлять без внимания.
Коротко о том, почему вам не стоило читать эту статью.
Библиотека — это прекрасная вещь, которая сокращает время разработки и дает стабильное качество кода. Но использовать их на этапе изучения верстки — крайне плохая затея (SASS и Fontawesome использовать можно).
Библиотеки CSS, как и любые другие, стоит использовать только тогда, когда вы точно уверены, что сможете обойтись без них. Только так вы обретёте твердые знания. И если однажды вас попросят что-то исправить в написанном коде, то вы не упадете в обморок, а легко решите эту задачу.
PS.
В HackerU разработана длительная практико-ориентированная программа, которая позволит вам получить профессию full stack-разработчика. Около 60 ак.часов вы посвятите изучению CSS и SASS. Проконтролируют процесс и поделятся лайфхаками действующие разработчики.
Запись на консультацию и ознакомительный интенсив:
