CSS фреймворки
CSS-фреймворков очень много. Мы используем Berry CSS, но в своей практике тебе придётся сталкиваться и с другими разработками. Более того, скорее всего для своих проектов ты захочешь придумать свой вариант и это нормально.
По большому счёту все фреймворки по сути предоставляют возможность верстать с помощью своих css-классов. Поэтому любой фреймворк — это не что иное, как обычный набор классов. Существует лишь несколько нюансов, которые отличают фреймворки друг от друга.
Есть два принципиальных подхода. Первый, с которым ты уже знаком — Atomic CSS, где каждый класс описывает как правило только одно css-свойство. Такие фреймворки обладают хорошей семантикой и очень гибкие. Часто такие фреймворки называют utility-first, а их классы утилитарными, что позволяет их использовать совместно с другими фреймворками.
Лично я не встречал ни одного более-менее серьёзного фреймворка без утилитарных классов, поскольку без них очень сложно кастомизировать вёрстку: отступы, цвета — это всё утилитарные классы.
Другой подход — компонентный. В таких фреймворках вёрстка производится также с помощью готовых классов, но в каком-то строго предопределённом html-коде. Вот пример из Bootstrap.
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
Глядя на этот код невозможно понять его назначение. Мы никогда в жизни не догадаемся, какие css-свойства используются в классах jumbotron, lead и display-4.
Для компонентных фреймворков как раз и характерна подобная несемантичность, поэтому работа с ними обычно строится только с помощью документации: скопировал предлагаемый код, после пытаешься его изменить с помощью других классов. Если это не получается, то необходимо будет менять исходные css-классы.
Из-за этой особенности подобные фреймворки часто называют UI-фреймворки, то есть предлагающие готовые для использования дизайн-элементы. Это упрощает работу верстальщика (что может быть проще — скопировать готовый код?), но не позволяет полноценно его подстроить под свой дизайн.
Из наиболее популярных наверное стоит выделить:
Возможно ты и не будешь с ними работать, но ознакомиться, хотя бы понять что они из себя представляют, необходимо любому верстальщику.
Как работает CSS-фреймворк
Любой фреймворк — это набор css-классов. В Berry CSS мы верстали одиночными классами. Например:
<div class="t-bold t140 t-gray600 w600px-max pad40-tb">...
Вместо этого можно заменить все эти классы одним my-block (название произвольно).
<div class="my-block">...
и определить его так:
<style>
.my-block {
font-weight: bold;
font-size: 1.4rem;
color: #858585;
max-width: 600px;
padding-top: 40px;
padding-bottom: 40px;
}
</style>
Когда мы верстали блоки, то почти всегда классы нужно было прописывать у всех его элементов. Если, скажем, у my-block будут вложенные блоки, то для каждого из них нужно будет создать свои css-классы. Именно так и устроены компонентные фреймворки.
То есть если тебе нужно будет сделать какой-то «фиксированный» блок, то можно для него сделать свой css-класс. Вместо множества утилитарных классов будет достаточно указать только один.
Сбросы
Фреймворк состоит из классов, которые имеют разное назначение. Технически каждый дизайн-элемент обычно представляет собой отдельный файл стилей. Это позволяет не смешивать все стили в одну кучу. После этого выполняется компиляция этих файлов в один, который уже и подключается к странице.
Делается это с помощью css-препроцессоров. Сейчас в основном используется только Sass.
Но перед тем как подключать свои css-файлы, подключаются reset-файлы — это стили, которые приводят браузеры к одному поведению.
Сейчас браузеры довольно близки друг к другу, но так было не всегда. Несколько лет назад они имели сильные различия и страница в одном могла выглядеть совсем не так же как в другом. Чтобы избежать этих проблем вначале вводится сброс стилей, а уже потом основная вёрстка.
Когда-то давно был популярен сброс resets.css, но сейчас используется normalize.css, который приводит только различия между браузерами к одному отображению.
Поэтому, когда ты будешь использовать свои стили, то вначале следует подключить normalize.css.
Однако есть ещё одна проблема — несколько необычная блочная модель браузеров. Так исторически сложилось, что браузеры по умолчанию считают размеры блоков не так, как мы привыкли.
Например, если задать ширину блока 300px, потом добавить справа 20px и нарисовать справа бордюр 5px, то реальный размер будет 325px, хотя мы жестко указали, что вся ширина 300px. Такое поведение создавало много проблем верстальщикам, особенно при относительных единицах - попробуй определить реальный размер 50% с бордюром 1px?
Для этого был придуман сброс border-box:
*,
*:before,
*:after {
-moz-box-sizing: border-box; // для старых браузеров FireFox
box-sizing: border-box;
}
Он переводит блочную модель в привычное для нас понимание, где ширина — это ширина, а всё остальное уходит как бы «внутрь».
Таким образом normalize.css и сброс border-box по сути являются обязательным для любого фреймворка или своего проекта.
Как сделать свой css-фреймворк
Как ты уже понял, вначале подключаются сбросы, а после размещается свой css-код. Например дизайнер предоставил тебе в работу какой-то макет. Первое, что нужно сделать — это html-разметку. Поскольку классов ещё нет (мы же не используем другие фреймворки!), то лишь намечаем предполагаемое поведение. Понятно, что визуально на странице макет выглядит не так, как нужно.
После этого проставляются классы для блоков, начиная с контейнера. Имя классов может быть произвольным, но желательно сделать это так, чтобы примерно понимать его назначение. Вместо my-block, лучше что-то вроде header-top. Будет понятно, что этот блок имеет отношение к шапке сайта.
После этого открывается css-файл и там прописываются необходимые стили этого класса. Дальше углубляемся — прописываем классы для вложенных блоков и пишем стили для них. Таким образом делаем до тех пор, пока блок не будет готов.
Плюс такого подхода в том, что итоговый css-код будет содержать лишь те классы, которые реально востребованы на странице. Это отличается от утилитарного подхода, который предполагает наличие большого количества классов «про запас». Из-за этого размер css-файла будет многократно больше.
Не зависимо от твоих желаний, нужно уметь создавать свои css-файлы без сторонних фреймворков. Здесь вопрос лежит в плоскости понимания того, как вообще работает CSS. Одно дело, когда ты используешь готовые разработки в виде «черного ящика» и другое, когда сам создаёшь нужный css-код. Только так у тебя появится профессиональный рост.
CSS-препроцессор Sass
Sass можно рассматривать как расширение синтаксиса CSS. Хотя по сути Sass — это целый язык программирования, которые позволяет автоматизировать очень много операций с CSS.
Наверное будет правильным не публиковать здесь описание и все «плюшки» Sass, поскольку их объём очень уж значителен, а просто предложить тебе ознакомиться с ним самостоятельно.
Этот курс рассчитан на новичков и если ты читаешь эти строки, значит ты его уже прошёл. С полученными знаниями тебе будет проще понять как работать с компонентными фреймворками, а также начать писать css-код с помощью Sass.
Более того, все современные фреймворки используют именно Sass (намного реже Less.js) для того, чтобы иметь возможность настраиваться под конкретную задачу.
В Sass есть переменные, которыми можно управлять размерами, цветами и т.д. Например в Berry CSS можно отключить неиспользуемый файл или целый модуль, после скомпилировать и итоговый css-файл будет меньше. Точно также можно настроить все цвета, их группы, размеры для классов ширины, высоты, flex, точки адаптивного дизайна и т.д.
Всё это благодаря Sass, поэтому следующий твой уровень — изучение этого препроцессора.
Что дальше?
Лучший способ развивать своё мастерство — это практиковаться. Мы рассматривали достаточно простые приёмы вёрстки, хотя они и наиболее часто используемые. Попробуй взять какой-нибудь простой лендинг и сверстать его вначале с помощью Berry CSS, а потом полностью на собственном css-коде. Чем больше ты будешь практиковаться, тем лучше и быстрей у тебя будет получаться работа.
Не стесняйся обращаться к справочникам HTML, CSS, Berry, потому что объём информации очень большой и не стыдно забыть как пишется то или иное свойство или класс. Главное, чтобы ты мог быстро находить нужную информацию.
Вёрстка — это один из навыков профессии. Следующий уровень — это какой-то язык программирования. Если тебя больше заинтересует дизайн и непосредственно вёрстка, то для этого начни изучать JavaScript. Если ты уже знаком с обычным программированием, то возможно тебе больше понравится PHP — на нём работают почти все сайты. В общем выбор за тобой!
Если тебе понравился этот курс, поделить ссылкой на него со своими друзьями. При желании ты можешь оказать любую финансовую помощь автору . :-)