CSS методологии.

БЭМ, SMACSS, ECSS�

Почему CSS-код выходит из-под контроля?

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

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

Чаще всего выбор методологии, наиболее подходящей под ваши нужды – это интерактивный процесс, начинающийся с ознакомления с тем, что уже есть в сети.

БЭМ

БЭМ расшифровывается как Блок-Элемент-Модификатор. Методология CSS-архитектуры, созданная в Yandex.

БЭМ. Цель методологии

«разрабатывать сайты, которые необходимо быстро запустить и долго поддерживать. Методология помогает создавать расширяемые и повторно используемые компоненты интерфейса.»

Основная концепция – легкая поддержка проектов со временем и повторное использование компонентов.

Главная стратегия БЭМ состоит в организации CSS-кода в повторно используемые модули с помощью умной системы именования. Давайте познакомимся с ней ближе поближе.

​

БЭМ. Блок

Блок это: «Функционально независимый компонент страницы, который может быть повторно использован. В HTML блоки представлены атрибутом class.»

При нахождении блока спросите себя, можете ли вы легко удалить этот кусок кода и использовать его где-то еще. Например, блоком будут хедер и футер сайта.

Блоки можно спокойно вкладывать друг в друга. Например, в блок хедера можно поместить блок меню

​

БЭМ. Блок

Блоки можно использовать в любом месте на странице, поэтому в CSS-коде для блоков не должно быть никаких внешних отступов и правил позиционирования.

И наконец, при выборе имени убедитесь, что оно описывает назначение блока, а не его внешний вид или состояние. Другими словами, имя должно отвечать на вопрос: Что это? �(например, хедер, меню и т.д.). ��Вопрос не должен быть типа «как это выглядит» (!)�(например, фиксированный хедер, маленькое меню и т.д.).

БЭМ. Элемент

По методологии БЭМ элемент это: «Составная часть блока, которая не может использоваться в отрыве от него.»

Принципы применения элементов:

• элементы живут только в блоках;
• элементы не могут принадлежать другим элементам, они могут лишь быть в блоках;
• можно создавать вложенные элементы;
• имена элементов описывают их назначение, а не внешний вид;
• при именовании элементов необходимо придерживаться стиля block__element.

​

БЭМ. Модификатор

Модификатор: «Cущность, определяющая внешний вид, состояние или поведение блока либо элемента.»

​

Например, блок хедера может быть зафиксирован в верхней части страницы, блок аккордеона может открываться и закрываться, �блок кнопки может быть отключен и т.д.

​

Стиль именования модификаторов в БЭМ: �block__element__modifier.

​

Плюсы БЭМ

• новые разработчики могут быстро понять связь между компонентами в разметке и CSS;
• методология способствует повышению производительности в команде. Преимущества особенно заметны в крупных проектах;
• система именования снижает риски коллизий с классами и утечку стилей;
• CSS несильно привязан к разметке в определенном месте на странице;
• CSS становится повторно используемым.

​

SMACSS

​

Масштабируемая и модульная архитектура CSS. �Создатель Jonathan Snook.��В ядре лежит способ разделения CSS-правил на категории. Категории порождают шаблоны, т.е. повторяющиеся элементы в дизайне, вокруг которых можно выработать правила написания обслуживаемого и повторно используемого CSS.

​

Рассмотрим базовые категории SMACSS…

SMACSS Base

Base – в эту категорию входят правила, которые определяют внешний вид элементов по умолчанию. ��одиночные селекторы элементов, �селекторы атрибутов, �селекторы псевдоклассов, �смежные селекторы и т.д. ��Например: html, body, a, a:hover и т.д.

SMACSS Layout 

Layout – категория для стилей, с помощью которых страница разделяется на секции.

SMACSS Module

Модули – это повторно используемые части дизайна, как в лего. ��Например: �меню, �диалоговые окна, �поисковой блок �и т.д.

SMACSS State

К этой категории относятся стили внешнего вида макета или модулей в определенном состоянии �например: �видимый, �скрытый, �раскрытый или закрытый��или в определенном виде �например: �главная страница или внутренняя страница.

SMACSS Theme

Категория похожа на State, но в нее входят стили, отвечающие за внешний вид макетов и модулей. �Эта категория опциональная.

Система именования SMACSS

К правилам Layout, State и Module добавляется префикс с осмысленным именем или сокращением.

Для правил Layout можно использовать префикс layout-, grid- или l- Для правил State необходимо добавлять префикс состояния is- Например, is-hidden, is-visible и т.д. �Для модулей используйте сами имена компонентов�Например, .menu, .dialog и т.д.

​

Для стилей диалогового окна можно использовать селекторы типа .dialog.is-open

Система именования SMACSS

Связанные элементы внутри модуля и вариации модуля должны использовать базовое имя модуля в качестве префикса.

Старайтесь не использовать id, элементные селекторы и вложенные селекторы.

Например, чтобы выбрать пункт меню в модуле menu, используйте что-то типа .menu-link или .menu-item, а не .menu li a.

В отличие от БЭМ, SMACSS не предписывает слишком строгое соглашение об именовании. Jonathan Snook дал четко понять: «… не думайте, что нужно жестко придерживаться этих правил. У вас есть соглашение, задокументируйте и придерживайтесь его.»

Преимущества SMACSS

• подход предлагает правильные рекомендации для модульного и поддерживаемого CSS-кода, избегая при этом излишних предписаний;
• SMACSS быстро выучить (и научить);
• система именования SMACSS менее подробна и в чем-то проще БЭМ;
• система достаточно гибкая, чтобы работать с крупными и маленькими проектами.

Enduring CSS (eCSS)

Enduring CSS (выносливый CSS) или eCSS это: «Руководство к написанию стилей для больших, быстро меняющихся, долгоживущих веб-проектов.»

Концепция eCSS

Центральная концепция eCSS – изоляция.

Изоляция значит, что все компоненты представляют собой изолированную единицу кода без зависимостей, контекста. Эту единицу можно использовать повторно и удалять без риска утечки стилей.

Изоляция в eCSS

• это достигается за счет
• инкапсуляции всего кода, не только CSS, а всех технологий, необходимых для постройки всех компонентов в своих общих папках;
• создания совершенно нового компонента каждый раз, когда нужен компонент, похожий на уже существующий, но в котором будут некоторые изменения, даже если изменения незначительны;
• использования строгой системы именования.

DRY в eCSS

eCSS радикально отходит от таких методологий, как БЭМ и SMACSS, которые расширяют и абстрагируются от существующих компонентов, тем самым избегая или пытаясь как можно сильнее избежать повторения кода.

​

Значит ли это, что eCSS утяжеляет файлы стилей?

Ben Frain пришел к выводу, что из-за того, что gzip невероятно эффективно сжимает повторяющиеся строки, разница в весе файла между eCSS и другими методологиями крошечная.

Преимущества eCSS

Что вы получите, если примете методологию eCSS и закроете глаза на повторения:

• изоляция всех визуальных шаблонов облегчает обслуживание CSS-кода;
• несмотря на повторяющиеся свойства и значения, размер файла в долгосрочной перспективе почти не увеличится. Это происходит потому, что модули являются автономными, изолированными единицами, которые можно быстро удалить без страха поломать дизайн, если они больше не нужны;
• все языковые/технические файлы, необходимые для создания модуля, расположены в одной папке, что сильно упрощает редактирование и физическое удаление.

​

А что по ситуации на российском рынке?