CodeHub
Сегодня поговорим о том, как можно сделать работу с CSS проще и удобнее, подключив препроцессоры и фреймворки.
Немного о CSS
CSS – это язык разметки, который позволяет настроить визуальное оформление веб-страницы или приложения, а также расположить объекты на экране в определенном порядке и плоскости. Это основной механизм, отвечающий за то, как выглядят сайты и программы, построенные на базе веб-технологий.
Но этот язык имеет ряд недостатков, а также недостаточно функционален, чтобы эффективно решать задачи программистов. Поэтому разработчики придумали несколько вариантов надстроек, модифицирующих CSS.
Что такое препроцессор и зачем он нужен?
CSS-препроцессор – это программа, позволяющая генерировать CSS-код, используя уникальный синтаксис, присущий только конкретному препроцессору.
По сути, препроцессоры – это отдельные скриптовые языки, у каждого из которых свое представление о том, как должен работать CSS, и свой стек возможностей (хоть и довольно часто пересекающихся между собой).
Они нужны, чтобы сделать CSS чище и в заметной степени сократить количество кода, которое приходится писать для оформления сайта. А в некоторых случаях, чтобы добавить в CSS функции, по умолчанию отсутствующие в языке.
Что такое фреймворки и для чего они нужны?
CSS-фреймворк – это набор технологий, включающий в себя усовершенствованный синтаксис CSS, дополнительные функции, а также ряд шаблонов для быстрой развертки сайта без необходимости все элементы стиля прописывать самостоятельно.
Фреймворки сильно отличаются друг от друга и имеют разные подходы, но у них общие цели:
-
Ускорить процесс разработки, за счет уничтожения привычных для CSS сложностей с визуальным оформлением страниц.
-
Добавить в сайт или приложение кроссбраузерность.
-
Вынудить команду разработчиков следовать определенным правилам дизайна.
-
Корректно выровнять все элементы на странице.
-
Сделать подключаемые к приложению стили более удобными с точки зрения поддержки.
Особенности препроцессоров
У каждого препроцессора есть свой набор возможностей, но мы рассмотрим общие для всех них функции, чтобы проверить, на что способны эти расширения для CSS.
Примеры показаны на базе препроцессора LESS, но в других синтаксис отличается не принципиально.
Переменные
Да, они есть и в «чистом» CSS, но реализованы менее удобно.
@colorForButton: #76AB04 button { background: @colorForButton; }
Вложенность
Благодаря препроцессорам не нужно каждую строку прописывать отдельно. В них действуют элементарные правила вложенности, как и в структуре HTML.
div { dispaly: flex; anotherDiv { margin: 20px 0px; } @media (max-width: 720px) { position: absolute; } }
Mixins
Миксины – это шаблоны с готовым CSS-кодом, легко подставляемые к любому из элементов сайта или приложения. Достаточно вписать их название в блок оформления селектора. Миксины отчасти похожи на функции, так как умеют принимать аргументы при использовании.
@flex ($justify, $align) { display: flex; justify-content: $justify; align-items: $align; flex-flow: column; } div { .flex(center, stretch); }
Математические выражения
С помощью препроцессоров можно добавлять на сайт более продвинутые, динамически меняющиеся стили, используя привычные математические операторы и функции.
@basicHeight: 85vh; .heightOnThisPage { height: calc(40% + (@basicHeight - 40px)) }
If/Else-выражения
В некоторых препроцессорах поддерживаются логические операции.
@variable: true; @color: blue; if (@variable, @color: red)
Функции
У всех препроцессоров есть набор функций, с помощью которых можно оперировать стилями. Некоторые позволяют менять цвета объектов, некоторые добавляют в них анимацию и т.п.
И это только часть возможностей препроцессоров. Подробнее ознакомиться с ними можно в официальной документации каждого.
4 популярных CSS-препроцессора
Есть несколько распространенных дополнений к CSS, используемых чаще остальных:
-
SASS – самый популярный и часто используемый. Отличается от остальных наиболее сложным синтаксисом. Требует более четко прописывать визуальные стили и все же заставляет вводить больше кода, чем хотелось бы. Но при этом SASS обладает функциями, недоступными у конкурентов, поэтому он и лежит в основе многих фреймворков.
-
LESS – более простой с точки зрения синтаксиса препроцессор, но более ограниченный с функциональной точки зрения. При этом имеет более качественную поддержку в большинстве IDE и отлично подходит для новичков и несложных сайтов.
-
Stylus – интересный язык, в заметной степени меняющий представление о том, как оформляется CSS. Он напоминает Python, где отсутствуют многие скобки и спецсимволы.
-
PostCSS – мощный препроцессор с автоматической проверкой на ошибки, подстановкой нужных префиксов и генерацией названий для селекторов.
Краткий обзор лучших CSS-фреймворков
Фреймворки не просто модифицируют синтаксис и добавляют пару дополнительных опций. Здесь несколько иные масштабы, и с ними нередко полностью меняется подход к оформлению страниц.
Bootstrap
Самый популярный CSS-фреймворк, который на слуху, наверное, у каждого, кто хоть немного изучал веб-разработку. Это крупный проект, представляющий собой целый набор предустановленных компонентов для быстрой развертки собственного сайта на основе существующих шаблонов.
Прелесть Bootstrap заключается в том, что вам не нужно использовать конструкторы в духе WordPress и самому разбираться с визуальным оформлением сайта. Используя Bootstrap, можно получить лучшее из двух миров, продолжая самостоятельно писать логику приложения и не тратить время на его оформление.
Правда, нужно понимать, что Bootstrap, как и любой другой набор шаблонов, наверняка включает в себя десятки компонентов, которые вам не нужны. С их наличием придется смириться.
Foundation
Более громоздкий и универсальный продукт, подходящий для оформления не только сайтов и приложений, но и почтовых рассылок. Foundation предлагает семантическую верстку, чтобы упростить восприятие кода. Все компоненты, встроенные во фреймворк, изначально создавались для мобильных устройств, поэтому проблем с адаптацией под различные разрешения экранов не возникает.
Foundation более сложный с точки зрения структуры. Включает в себя CSS-, HTML- и JavaScript-файлы, работает на базе SASS. Для установки и настройки используется фирменная консольная утилита.
И что важно, в Foundation заранее учтена адаптация веб-сайтов и приложений под требования людей с ограниченными возможностями.
Bulma
Это очередной аналог Bootstrap, предлагающий быстро собрать сайт на шаблоне, но он отличается от своего конкурента упрощенной структурой файлов, так как полностью написан на CSS и не требует подключения JavaScript для нормальной работы.
Из интересных функций стоит отметить наличие компонента для быстрой реализации темной темы на сайте. Также Bulma поддерживает препроцессор SASS.
В Bulma, как и в Bootstrap, есть набор готовых визуальных решений. Можно выбрать любое и слегка адаптировать под свой ресурс, не тратя дни на создание собственных компонентов.
TailwindCSS
Стремительно набирающая обороты технология, практически исключающая CSS-синтаксис из приложений и сайтов. Благодаря TailwindCSS можно прописывать стили прямо в HTML-классы. Да, это похоже на то, как работают inline-стили, но не совсем, потому что TailwindCSS, помимо прочего, предлагает собственный синтаксис.
Например, вместо background-color: white используется сокращение bg-white. И таких вариаций много. Благодаря сокращенном директивам удается достичь опрятного вида при прописывании стилей прямо в HTML-классы.
А сами директивы оформляются в отдельном конфигурационном файле, где можно заменить значение каждой из них. Например, создать переменную bgw и использовать ее для окраски фона в белый цвет.
TailwindCSS избавляет от необходимости генерировать дополнительные файлы и возиться с селекторами. При этом не лишает свободы творчества и не сказывается на производительности приложения.
Skeleton
Минималистичный CSS-фреймворк, основная цель которого быстро собрать стильный сайт без необходимости мудрить с визуальным оформлением.
Skeleton по умолчанию адаптивный и идеально выглядит на экране любого размера. Но какой-то роскоши с точки зрения дизайна ожидать не стоит. Разработчики сделали все, чтобы предельно упростить стили в Skeleton. Здесь всего три цвета: белый, серый и голубой. Один вариант оформления списков, один вариант оформления кнопок.
Как и другие фреймворки, Skeleton поддерживает семантическую верстку. Вместо конкретных значений в духе grid-column-start: 3 можно написать grid-third, и объект расположится в нужном месте.
Идеально подходит тем, кому нужно быстро собрать сайт и кому не нравится стандартный синтаксис CSS.
Pure
Похожий на Skeleton фреймворк, в основе которого лежит та же идея – создать минималистичный плацдарм для всего визуального стиля сайта или приложения. Принципиальная разница заключается в том, что Skeleton навязывает свой дизайн, а Pure – предлагает создать свой.
В Pure уже прописана большая часть необходимых свойств, отвечающих за поведение, размеры и расположение объектов. Но часть решений все же остается за разработчиком. Например, нужно будет самостоятельно выбрать цвет, степень прозрачности, процент закругленности граней и т.п.
Pure отлично подходит в качестве стартового варианта, потому что не вынуждает переписывать уже готовый CSS, а действительно работает как шаблон и предлагает быстро создать что-то свое.
Вместо заключения
Как видите, способов упростить работу с CSS много, и вы можете выбрать тот подход, который вам по душе. Не нравится синтаксис? Установите препроцессор или TailwindCSS. Не хочется с нуля придумывать дизайн? Установите Skeleton или его аналог. Хочется с ходу получить готовое решение? Тогда Bootstrap в помощь.
Либо комбинируйте эти технологии между собой, ведь это значительно упростит работу с CSS, и вы уже не сможете вернуться к классическому варианту разметки.
