Фреймворки CSS. Что это и для чего нужны.

Фреймворк CSS – это, как правило, файл со стилями, который подключается к заголовку проекта, отдельно от основных стилей и служит помощником для верстальщика в разработке. Также в набор фремворка могут входить шрифты, прелоадер, java-скрипты.

Основные достоинства в использовании фреймворков CSS

Простота в использовании. 

Подключаемый файл фреймворка это по сути те же стили CSS, но уже имеющие определенную структуру, классы, стили. Как правило легко подключаются к любому сайту, имеют возможность работать с препроцессорами CSS.

Так например, чтобы отцентрировать текст раньше приходилось для выбранных элементов устанавливать класс, а потом в стилях этого класса прописывать стиль: text-align:center;

С фреймворком, например, Boostrap, чтобы добиться того же эффекта нужно просто присвоить нашим элементам предопределенный класс, в данном случае это: textcenter и все элементы с этим классом по умолчанию будут выровнены по центру.

Адаптивность.

Наверное, самый большой плюс в использовании фреймфорков это адаптивность для всех устройств. Как правило, файл фреймворка по умолчанию имеет стили для адаптивного дизайна. Нужно только правильно использовать его классы в проекте.

Фреймворки CSS адаптивность

Например, чтобы одна и та же колонка на планшете занимала всю ширину, а на полной версии только половину в фреймворке Bootstrap будут использоваться 2 класса: сol-12 (для всей ширины) и col-md-6 (для половины ширины начиная с размера планшета и больше). Таким образом можно адаптировать абсолютно все блоки вашего сайта.

Кроссбраузерность.

Если вы используете какой-то современный фреймворк, то можете не беспокоится о совместимости стилей даже со старыми браузерами, но при добавлении своих кастомных стилей придется все равно постараться, особенно если ваш клиент использует древний Internet Exploer, например.

Бесплатные.

Немаловажный фактор при выборе фреймворка это его цена. На рынке CSS фреймворков все популярные фреймворки бесплатные. Может поэтому они такие популярные. Бери, как говорится, и пользуйся.

Недостаки фреймворков CSS

Если бы фреймворки были бы без недостатков все бы давно пользовались только ими, поэтому давайте поговорим, в чем основные сложности в использование CSS фреймворков.

1. Много лишних стилей.

Как следует из вышесказанного фреймворк – это набор предопределенных стилей, которые охватывают все возможные из часто используемых пользователями вариантов. Это ведет к тому, что количество стилей, которые вы будете подключать к проекту будет очень большим. Если ваш сайт достаточно маленький, не магазин, не портал, то вы не будете использовать порядка 80-90% от стилей фреймворка.

2. Уменьшает скорость загрузки сайта.

Это следует из предыдущего пункта. Чем больше ваш файл CSS, тем дольше он будет подгружаться к вашему сайту при просмотре, тем дольше скорость загрузки сайта. Чего мы не хотим.

Низкая загрузка сайта

Решение этих 2х пунктов: после завершения стадии разработки, перед тем как запускать сайт нужно удалить неиспользуемые стили фремворка. Так вы спасетесь от ненужных вам стилей и увеличите скорость загрузки сайта. К сожалению этот совет подойдёт только для продвинутых верстальщиков.

3. Не применимы для сложного дизайна.

Для того, чтобы использовать фремвокри необходимо иметь дизайн спроектированный по сетке. Если дизайн будет очень сложным или неправильно разработанным, то смысла использовать тот или иной фреймворк просто не будет. Он только затруднит верстку вашего макета.

Решение: не использовать фреймворки для сложных дизайнов.

4. Нужно знать документацию.

Каждый фреймворк имеет свои классы, свои специфические особенности. Чтобы свободно и быстро верстать на одном из фремворков нужно изучить документацию и знать хотя бы основные классы. На начальном этапе придется все время подглядывать в список классов, что может замедлить процесс.

Но постепенно, работая с одними и теми же классами и правилами, вы привыкните, как когда-то привыкли ко всем стилям CSS.

5 популярных фреймворков

Оставлю вам список 5 популярных фреймворков на сегодняшний день: Bootstrap, Foundation, Bulma, MaterializeCSS, Skeleton.
Из всего этого списка уже долгое время бьет рекорды по популярности Bootstrap 3 и 4. У него больше сообщество с множеством примеров и документации, как официальной, так и пользовательской.

Если вы только начинаете учиться верстать, выучить один из вышеперечисленных фреймворк хорошее решение для вас.

Все о Bootstrap 4 здесь: getbootstrap.com

Автор

Оставляйте комментарии на @_pro_web