CSS-фреймворки? К черту! Я сам всё напишу!

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

Он почитал пару статей на хабре, поделился со мной. Ну и тут понеслось 😆.

Изначально фреймворки (не только css) создавались, чтобы облегчить жизнь разработчикам. Однако, что-то пошло не так...Основным аргументом противников css-фреймворков является следующий тезис:
“Очень много классов - я не хочу тратить время на их изучение”.

Ребята топят за то что приходится изучать специфику, документацию каждого фрейма, который они юзают, и их многочисленные классы.А ведь действительно, есть фреймы, которые далеко ушли от простого помощника, накидать структуру шаблона, кнопок и инпутов. Например: Semantic UI и Uikit.

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

Мы подобрались ко второму аргументу, который звучит так:
“Все дизайны на css-фреймворках одинаковы”.

В итоге все сводится к тому что “да ну нафиг это, напишу-ка я все сам!”.

Что же, давайте попытаемся раскрыть все положительные стороны фреймов и опровергнуть доводы противников.

Предлагаю сразу отмести громоздкие фреймворки такие, как Semantic UI и Uikit. Сюда бы я кстати отнес и Materialize. Этот фрейм, как и следует из названия, предлагает компоненты в стиле Material, который так активно пропагандирует Google.

Брать эту троицу, выкидывать из них всё и верстать под свой дизайн пожалуй глупо. Разумнее поставить их в группу фреймворков для админки, как какой-нибудь системный функционал, интерфейс которого не играет серьезной роли, “быстро что-то накидать”.

Существует на рынке еще семейство мини-фреймворков, такие, как: Pure, Picnic CSS, Chota. Честно говоря, никогда не пользовался ими 🙂.

Pure и Chota не имеют исходников в виде SASS/SCSS в отличие от Picnic CSS.

Возможно есть смысл взять Picnic CSS за основу вашей будущей темы.

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

Ну и наконец, на арену выходят такие силачи как: Bootstrap, Bulma, Foundation.

Foundation я пробовал использовать несколько лет назад, тогда он мне показался каким то слишком “инженерным”.По cути, эти фреймворки смогли найти баланс между нагроможденностью и пустотой, но говорить мы будем про Bootstrap. Кстати, я его терпеть не мог до определенного времени, как и всё хайповое.

Итак, почему же противники фреймворков ошибаются когда утверждают об их ненадобности?Bootstrap — самый популярный css-фреймворк. Я не могу говорить о точном процентном соотношении, но уверен, что 80% тем написаны на Bootstrap. Для любого JS-фреймворка есть библиотеки Bootstrap, и не одна.

Таким образом, потратив чутка времени на изучение основных компонентов Bootstrap, вы в будущем сэкономите немало времени на понимание чужого кода и написания своего. При чем тут свой код? Ответ прост. При каждом запуске проекта, при каждой верстке мы начинаем именовать стили по-разному. Это неизбежно, так как мы постоянно учимся, и так же меняются наши вкусы. И вот у нас набирается десять проектов, и в каждом из них разное именование классов кнопок, форм, колонок и т.д.

Фреймворк (каркас) - держит нас в определенных рамках, и это хорошо!

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

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

И наконец, про то что все дизайны одинаковые по причине использования css-фреймворков.

Да, если фреймворк подключить через CDN или просто полный, со всеми потрохами css файл и потом пытаться стилизовать, может быть и так. И то, любой стиль можно переопределить.А если их использовать как положено, через препроцессоры, брать только те компоненты которые реально нужны, переопределить переменные, мы можем добиться любого дизайна согласно макетам.

На сегодня все! Хорошего тебе дня!

Ну и по традиции моя телега

⬇⬇⬇