Тридцатый восьмой урок. Методологии верстки. CSS-фреймворки

Современная вёрстка сайтов базируется на современных браузерах, современных стандартах HTML5 и современных возможностях CSS3. Это очень важно, поскольку всего несколько лет назад, приходилось идти на большие ухищрения, чтобы сверстать блок с тенью или скруглением, а модульная сетка вообще делалась в виде html-таблицы.

Сейчас такие вещи значительно упрощены и верстальщикам уже нет необходимости вдаваться в такие «дебри». Однако за всё это время было придумано очень много разработок, которые до сих пор доминируют среди верстальщиков. Например вы будете постоянно встречаться с использованием float-сетки, хотя сейчас нужно использовать flex-сетку. К следующему году для сложных сеток мы будем использовать grid-сетку, которая позволяет буквально творить чудеса.

Основной аргумент использования старых возможностей — это не полная поддержка новых css-свойств старыми браузерами. Скажем тот же grid никогда не будет поддержан IE 11 или Opera Mini. Вы должны понимать, что браузер — это обычная программа и если пользователь продолжает пользоваться (очень) старой версией (скажем IE 11 выпущен в 2013 году), то это должно быть его проблемой. Нельзя ориентироваться на таких пользователей, тем более, что вместо IE 11 можно вполне спокойно запустить FireFox, Chrome или Vivaldi — а значит нет никаких проблем воспользоваться современным качественным браузером. Это не должно быть проблемой верстальщика.

На сегодняшний день верстальщикамии были разработаны множество подходов к самой верстке. Тут нужно учитывать, что есть исторический аспект, когда какая-то разработка оказалась хорошим решением (на тот момент), а также популярность того кто продвигает свои решения. Кроме того, очень много решений возникли в процессе решения каких-то текущих задач.

Всё это привело к тому, что в среде верстальщиков распространено сразу несколько подходов. С моей точки зрения, при верстке лучше придерживаться хоть какой-то методологии (даже плохенькой), чем вообще никакой (хаотичная верстка).

Существует два принципиально разных подхода. Первый — для страницы/сайта пишется свой уникальный css/html-код. Второй — использование css-фреймворков с готовыми классами.

Первый вариант преобладал очень долго, поскольку имеет такие прмущества:

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

CSS-фреймворки решают сразу несколько задач, в первую очередь это сброс стилей, готовая типографика и предопределенный дизайн элементов. Почти все css-фреймворки имеют наборы хелперов, с помощью которых решаются простые «типовые» задачи.

Не зависимо от самого подхода, при верстке всегда существует одна проблема — это именование css-классов. Как правило верстальщик придумывает классы по ситуации, например div.header описывает шапку. Проблемы возникают когда нужно усилить детализацию или добавить какой-то похожий блок, что приводит например к div.header1. Понять чем именно эти блоки различаются невозможно, пока мы не изучим html/css-код.

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

<div class="header">
	<div class="menu"></div>
</div>

<div class="header1">
	<div class="menu"></div>
</div>

Очевидным решением будет использование каскадности css:

.header .menu { }
.header1 .menu { }

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

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

<div class="header">
	<div class="header-menu"></div>
</div>

<div class="header1">
	<div class="header1-menu"></div>
</div>

.header-menu { }
.header1-menu { }

Данный подход не использует каскадность CSS (что само по себе уже странно) и усложняет сам код, как на уровне css, так и на уровне html. К сожалению, такую методику активно продвигает компания яндекса в виде БЭМ (блок-элемент-модификатор), и многие верстальщики её также используют в своей работе. На самом же деле, БЭМ годится только для автоматической верстки, когда классы расставляет специальная программа (под XML/JSON структуру) или рассчитаными на работу с JS-кодом. Также БЭМ применяется там, где верстку выполняет сразу несколько верстальщиков и программистов в большой компании (как раз тот случай, когда правая рука не ведает что творит левая) и нужно хоть как-то договариваться о едином именовании классов.

В обычной верстке использование БЭМ — одна из самых худших практик (я бы даже назвал её «извращением» CSS), старайтесь её избегать. Используте только нормальную CSS-каскадность: с учетом разнообразия селекторов с этим проблем никогда не бывает. Если вы пытаетесь решить проблему верстки с помощью БЭМ, значит ваш код «грязный» — подумайте как можно решить проблему нормальными способами.

Из всего разнообразия CSS-фреймворков я хочу выделить:

Чтобы поднять свой профессиональный уровень, вы можете начать изучать эти фреймворки. Единственный момент — никогда на зацикливайтесь и не вступайте в холивар по поводу какой из них лучший. Все они имеют как плюсы, так и минусы, но основная их задача — предоставить готовые куски кода для быстрого приготовления использования. Основная сложность всех подобных фреймворков — довольно сильная завязка на собственную типографику, наборы цветов и дизайн элементов, а также js-код, без которого элементы просто не работают.

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

Вообще UIKit, с моей точки зрения, один из самый качественных фреймворков, который стоит посмотреть хотя бы как пример кода на который можно равняться.

Если вы планируете работать верстальщиком (фронтендером), то обязательно сделайте десяток лендингов на Bootstrap'е. Он не блещет качественным кодом, но из-за своей популярности довольно распространен. Если вы научитесь с ним работать (только лэндинги, на большее он не годится), то это добавит очков в вашем резюме. Естествено, изучение любого фреймворка дело не простое и времязатратное. Но в будущем это окупится.

Отдельно стоит отметить CSS-фреймворки атомарного уровня как UniCSS. Они не конфликтуют с другими, поэтому могут использовать произвольно, вплоть до отдельного scss-файла. Из других подобных атомарных фреймворков, можно упомянуть разве что Atomic CSS. Использовать его синтаксис в общем-то нерально, тем более, что он сработает только со своей программой обработчиком Atomizer (т.н. функциональная нотация). Но здесь интересно то, что результирующий css-код формируется автоматически и ровно тот, который используется на странице. Это как будто бы перенести написание css-кода из css-файла в html. То есть здесь идея «атомного дизайна» выведена в абсолют. Но вообще задача любого атомного css-фреймворка в том, чтобы не создавать свой css-код, а использовать готовый. Собственно, как это мы делали с UniCSS в течение этого курса.

В своей практике, не зависимо от используемого фреймворка (или без него), вы все равно будете сталкиваться с проблемой именования css-классов, как это описано выше. В UniCSS используется довольно простая схема именования, но вы можете придумать и свой вариант, или воспользоваться другим атомарным фреймворком. Главное, что вам следует сразу уяснить, это то, что любой код требует последующей поддержки. При использовании невнятного именования, в будущем код будет очень сложно поддерживать, а после и вовсе будет непоняно его назначение. И речь идёт не только о каком-то постороннем вебмастере, но и о вас. Вы просто забудете что это за класс и зачем вы его создали.

Поэтому, пока у вас мало опыта, используйте чужие наработки. Пусть это будет UniCSS, UIkit или Bootstrap — у них есть полноценная документация и поддержка разработчиками, а значит любой другой вебмастер сможет понять что и зачем вы использовали.

Задание

Задания доступны только после авторизации.