На сегодняшний момент почти не осталось организаций, которые не имеют веб-сайт. Основной задачей первых веб-сайтов раньше было отображение информации и обеспечение легкости ориентирования в ней [1]. Однако сейчас это уже далеко не так. Для некоторых организаций сайт является визиткой, на которой описана полезная информация, которая должна отражать деятельность данной организации. Для других организаций сайт нужен не только как визитка, но и как место для сбыта товаров. А для того, чтобы организация смогла пробиться сквозь сотни конкурентов и заинтересовать пользователей содержанием своего сайта, нужен дизайн, который выделяет эту организацию среди других. Дизайн сайта, в большей степени, создается с помощью CSS – формального языка описания внешнего вида документа, написанного с использованием языка разметки [3]. Разработчик Бен Фрейн однажды заметил: «Писать CSS-код легко. Масшабировать и поддерживать его — нет» [2]. Поэтому для упрощения организации кода используются различные методологии.
Одной из таких методологий является БЭМ. Данная методология была разработана в Yandex. На данный момент БЭМ является одной из самых популярных методологий во всём мире. Основная идея БЭМ заключается в том, что типовые проекты должны разрабатываться быстро, но жить долго.
БЭМ расшифровывается как Блок-Элемент-Модификатор. Блок — часть страницы, являющаяся логически независимой от остального наполнения. Элемент – часть блока, отвечающая за отдельную функцию, он может находиться только в составе блока и не имеет смысла в отрыве от него. Модификатор — свойство блока или элемента, отвечающее за его внешний вид или поведение, описывает состояние блока или элемента.
Пример кода, написанный с использованием методологии БЭМ, представлен на рисунке 1.
Рис. 1. Код проекта с использованием методологии БЭМ
Преимущества БЭМ:
- разработчики могут быстро понять связь между компонентами в разметке и CSS;
- методология способствует повышению производительности в команде;
- система именования снижает риски совпадений классов и утечку стилей;
- CSS несильно привязан к разметке в определенном месте на странице;
- CSS становится повторно используемым [4].
Недостатки БЭМ:
- довольно громоздкие названия классов;
- удобен только для средних и больших проектов.
Результат работы с использованием методологии БЭМ показан на рисунке 2.
Рис. 2. Результат работы с использованием методологии БЭМ
Таким образом, БЭМ является достаточно удобной методологией для использования в больших проектах, однако, если использовать её для небольших проектов, то БЭМ сделает код только сложнее. Примером использования БЭМ в больших проектах является, к примеру, Яндекс.Маркет.
Другой методологией является OOCSS. OOCSS означает объектно-ориентированный CSS [6]. Основная идея OOCSS заключается в многократном использовании написанного кода. В эту методологию заложены две основные идеи:
¾ разделение структуры и оформления;
¾ разделение контейнера и содержимого [4].
Пример кода, написанный с использованием методологии OOCSS:
.list {…}
.list-header {…}
.list-body {…}
Преимущества OOCSS:
- нет определенных правил;
- низкий порог вхождения.
Недостатки OOCSS:
- появляется слишком много классов.
Можно сделать вывод, что методология OOCSS, в сравнении с БЭМ, является более удобной, если использовать её в небольших проектах. Однако для больших проектов она непригодна. Примером использования OOCSS в небольших сайтах является «дневник» разработчика по имени Nicolas Gallagher.
Ещё одной методологией является MCSS. MCSS – это Multilayer CSS (многослойный CSS). Основная идея заключается в распределение стилей по уровням. Многослойная система организации CSS основана на принципах OOCSS и БЭМ [5]. MCSS использует:
- фундамент – корневые малоизменяемые стили, располагаемые в самом начале;
- базовый слой – стили многократно используемых на сайте элементов (кнопки, поля для ввода текста);
- проектный слой – отдельные модули, а также модификации элементов в зависимости от браузера клиента, устройства;
- косметический слой – простые, маловлияющие стили, созданные по принципу OOCSS.
Преимущества MCSS:
- хорошо изолированные модули;
- строго определенная логика.
Недостатки MCSS:
- немного непривычное расположение классов;
- сложная логика распределения по слоям и правил взаимодействия между слоями.
Таким образом, MCSS является довольно сложной методологией, которая подойдет под любой проект. Данная методология использовалась для создания социальной сети «Одноклассники»
Другая методология называется SMACSS. SMACSS – это способ изучить ваш процесс проектирования, а также способ приспособить эти жесткие рамки под гибкий мыслительный процесс. Это попытка документирования последовательного подхода к разработке сайта с использованием CSS [3]. Основной идеей является разделение стилей на 5 составляющих. Базовые категории SMACSS:
- Base – в эту категорию входят правила, которые определяют внешний вид элементов по умолчанию. Одиночные селекторы элементов, селекторы атрибутов, селекторы псевдоклассов, смежные селекторы и т.д. Например, html, body, a, a:hover и т.д.
- Layout – категория для стилей, с помощью которых страница разделяется на секции.
- Module – стили модулей - блоков, которые могут использоваться несколько раз на одной странице
- State – к этой категории относятся стили внешнего вида макета или модулей в определенном состоянии (например, видимый, скрытый, раскрытый или закрытый) или в определенном виде (например, домашняя страница или внутренняя страница).
- Theme – категория похожа на State, в нее входят стили, отвечающие за внешний вид макетов и модулей. Эта категория нужна не во всех проектах, но знать про нее необходимо.
Преимущества SMACSS:
- подход предлагает правильные рекомендации для модульного и поддерживаемого CSS-кода, избегая при этом излишних предписаний;
- SMACSS быстро выучить;
- система именования SMACSS менее подробна и в чем-то проще БЭМ;
- система достаточно гибкая, чтобы работать с крупными и маленькими проектами [3].
Недостатки SMACSS:
- нужно чётко соблюдать правила;
- поначалу непривычно использовать.
Таким образом, можно сделать вывод о том, что SMACSS также, как и MCSS, является подходящей методологией как для малых проектов, так и для больших. Однако, следует отметить, что поначалу её довольно непривычно использовать из-за четкого распределения стилей.
Итак, подводя итоги, можно констатировать следующее: среди проанализированных методологий нет идеальных. Каждая из представленных имеет свои достоинства и недостатки. БЭМ лучше всего использовать для крупных проектов, а методологию OOCSS для малых проектов. Методологии MCSS и SMACSS являются универсальными и их можно использовать, как в крупных, так и в небольших проектах.