Что такое CSS фреймворки и зачем они нужны.
Что такое CSS фреймворки и зачем они нужны? Давайте попробуем разобраться в этом вопросе.
CSS или каскадные таблицы стилей — мощный инструмент, который позволяет изменять внешний вид вашего сайта. С его помощью вы можете сказать как будет выглядеть тот или иной элемент на веб-сайте. Каким он будет цветом или размером, какие будут отступы и.т.д.
Но, главная проблема с которой придется столкнуться при работе вплотную с технологией CSS, когда вы решите каким-либо образом оформить какой-то элемент на веб-сайте, появляется проблема написания большого количества кода.
Конечно, написание большого количества кода может не представлять для вас большого количества трудностей. Но, когда элементов на веб-сайте становиться много, кода тоже становиться очень много. Писать такое большое количество кода может быть не очень приятно.
Особенно это ощущается когда вы создаете какие-то веб-страницы с нуля, верстаете макет какого-то сайта и размещаете там большое количество элементов, которые должны выглядеть определенным образом. Если писать код CSS с нуля, можно наткнуться на очень большой объем работы.
Для того, чтобы избежать этого большого количества работы и ускорить процесс верстки веб-страниц, были созданы специальные библиотеки или CSS-фреймворки. По сути, CSS-фреймворк — это просто файл CSS, который вы стандартным образом подключаете к вашей веб-странице.
Этот CSS файл просто содержит уже написанный за вас набор стилей, которые вы сможете применять к элементам на вашем веб-сайте, после того, как эта библиотека будет подключена к вашей веб-странице.
После того, как этот файл фреймворка будет подключен к веб-странице, вы можете добавлять к вашим элементам ни какие-то конкретные стили CSS, а просто добавлять классы.
Добавив класс вы говорите каким образом CSS фреймворк должен оформить тот или иной веб-элемент.
Например, добавив класс box вы оформите какой-то блок div как «коробку с рамкой» (см. видео). https://bulma.io
Используя CSS фреймворки вы мыслите уже не каким-то конкретным кодом, а классами, которые можно добавлять к HTML-элементам.
Наиболее популярные CSS фреймворки:
И главное, для чего стоит использовать фреймворки — это экономия времени. Добавить для какого-то элемента определенный класс намного проще, чем если вы напишите десятки строк кода.
Второе преимущество — стандартизация вашего кода. Если вы хотите сделать кнопку, вы уже знаете какой класс вам для нее нужно присвоить. Это не зависит от того с каким сайтов вы работаете. Везде все работает одинаково.
Вот такой удобный и жизненно нужный инструмент, который я рекомендую вам внедрить в свою практику работы в веб-разработке. Для того, чтобы ускорить вашу работу и сделать ее более приятной.
Дмитрий Ченгаев 💎
Занимаюсь заказной веб-разработкой. Подписывайтесь на телеграм канал https://t.me/dchengaev 😉
2020-12-06
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Автор: Валентин Пыркин 11/09/2022 05:09:22
CSS фреймворки это зло и не оптимизированный хлам, забыли добавить. Используя БЭМ к примеру можно писать лаконичный читаемый html. Но когда начинается использование даже того bootstrap, tailwind и прочий хлам, начинаются проблемы и строки кода растут во много раз. Что бы описать фреймворком css стиль блока, нужно ввалить даже и 10 классов с фреймворком или один класс может с модификатором если не использовать css Фреймворк
Автор: Дмитрий Ченгаев 11/09/2022 05:09:32
Согласен с Вами, Валентин. Тоже пришел к такому мнению )
Но, иногда бывает полезно, когда нужно что-то быстро развернуть.
Особенности использования CSS-фреймворков
Слово «фреймворк» на русский язык можно перевести как «каркас». В программировании таковым называют заранее подготовленный (разработанный командой, человеком, компанией) код, который ложится в основу программы, которую вы создаете.
Фреймворки призваны облегчать разработку.
Главным в CSS-фреймворке, или каркасе для веб-дизайна, является файл с расширением .css, в котором описано множество классов под разные задачи. Таким образом для заголовка сайта, боковых панелей, различных вариантов списков, ссылок в меню, основного содержимого и многого другого у вас уже имеются готовые стили.
Веб-дизайнеру их не надо разрабатывать самому. Вместо этого он использует готовые как своего рода элементы конструктора.
Кроме того, современные библиотеки созданы с учетом Mobile First подхода и нет нужды самому решать, где будут контрольные точки, и писать под них @media-запросы.
С одной стороны, это позволяет начинающим создавать современные веб-интерфейсы, не вдаваясь в тонкости верстки. С другой стороны, фреймворк накладывает свою специфику и ограничения.
Для их разрешения ничего не мешает дополнительно к использованию css-фреймворка создавать собственные таблицы стилей. Однако в этом случае могут быть конфликты, решение которых делает код менее ясным. Поэтому профессиональные веб-дизайнеры нередко отказываются от использования css-библиотек в пользу собственных наработок.
При использовании css-фреймворка часто не создают макет с нуля, а выбирают из множества уже готовых шаблонов для сайта, разработанных на базе этого фреймворка. В любом случае шаблон можно подкорректировать или оставить как есть, не вдаваясь в особенности не только CSS, но и самой библиотеки.
Наверно одной из самых популярных css-платформ является Bootstrap. Мы же в этом уроке рассмотрим пример создания шаблона с помощью более простой библиотеки – W3.CSS (w3schools.com/w3css/default.asp). Готовые шаблоны можно посмотреть здесь.
Используя W3.CSS, попробуем создать с нуля свой шаблон, аналогичный макету, который мы верстали на двух прошлых уроках.
Для того, чтобы использовать данный css-фреймворк добавим в наш index.html ссылку на основной .css и файл цветовой темы:
link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
Файлы можно скачать, положить в каталог с index.html и в тегах ссылаться на них просто по имени.
Не будем удалять подключение к нашей собственной таблице стилей. Ссылку на ее разместим ниже библиотечных файлов, чтобы наши правила имели более высокий приоритет. Содержимое нашего style.css будет таким:
body { font-size: 1.2em; margin: 0; } main { margin-left: 250px; } footer { font-size: 14px; } @media (min-width: 1480px) { .text { margin-left: -250px; } } .w3-sidebar { z-index: 3; width: 250px; top: 43px; bottom: 0; height: inherit; }
Здесь правила для main и .text необходимы, чтобы изменить заданное во фреймворке иное размещение.
В библиотеке w3.css есть класс w3-sidebar (панель, размещаемая сбоку). Однако ее стиль нам тоже не совсем подходит. Поэтому вносим коррективы.
В w3.css есть класс w3-overlay . Скорее всего у него проставлен z-index , равный двум. Поэтому где-бы мы на странице не размещали оверлей, он будет выше сайдбара. Чтобы поднять последний, мы назначаем ему индекс не меньше двух. Достаточно 2, если nav в коде будет ниже, чем overlay .
В результате код HTML будет выглядеть так:
Вид макета на широких экранах:
Для большинства элементов HTML мы вынуждены использовать сразу несколько классов, каждый их которых придает элементу свои свойства, что увеличивает объем исходного html-кода. Разработчику требуется знать не столько язык CSS сколько свойства классов используемого фреймворка.
При этом нам почти не пришлось писать свой css-код.
Введение в веб-разработку и создание сайтов