CSS методологии. CSS БЭМ, SMACSS, ECSS

CSS методологии. CSS БЭМ, SMACSS, ECSS

От автора: в этой статье я расскажу вам про три успешных подхода к CSS-архитектуре, про их принципы, цели и преимущества. Это методологии CSS БЭМ, SMACSS и ECSS.

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

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

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

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

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

БЭМ

CSS методологии. CSS БЭМ, SMACSS, ECSS

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

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

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

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

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

Что такое блок?

Нахождение блоков – решающий фактор применения методологии БЭМ. Блок это: «Функционально независимый компонент страницы, который может быть повторно использован. В HTML блоки представлены атрибутом class.» — Документация БЭМ

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

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

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

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

Что такое элемент?

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

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

элементы живут только в блоках;

элементы не могут принадлежать другим элементам, они могут лишь быть в блоках;

можно создавать вложенные элементы;

имена элементов описывают их назначение, а не внешний вид;

при именовании элементов необходимо придерживаться стиля block__element.

Что такое модификатор?

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

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

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

Это ядро методологии БЭМ. Также БЭМ предлагает принципы организации структуры файлов, набор инструментов и живое сообщество с поддержкой.

Плюсы БЭМ

У БЭМ есть несколько преимуществ

новые разработчики могут быстро понять связь между компонентами в разметке и CSS;

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

система именования снижает риски коллизий с классами и утечку стилей;

CSS несильно привязан к разметке в определенном месте на странице;

CSS становится повторно используемым.

SMACSS

CSS методологии. CSS БЭМ, SMACSS, ECSS

Масштабируемая и модульная архитектура CSS или SMACSS – методология веб-разработки для организации и написания CSS-кода. Создатель Jonathan Snook описывает ее так:

«SMACSS – это способ изучить ваш процесс проектирования, а также способ приспособить эти жесткие рамки под гибкий мыслительный процесс. Это попытка документирования последовательного подхода к разработке сайта с использованием CSS.» — Сайт SMACSS

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

Базовые категории SMACSS:

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

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

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

State – к этой категории относятся стили внешнего вида макета или модулей в определенном состоянии (например, видимый, скрытый, раскрытый или закрытый) или в определенном виде (например, домашняя страница или внутренняя страница).

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

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

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

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

Например, для стилей диалогового окна можно использовать селекторы типа .dialog.is-open. Связанные элементы внутри модуля и вариации модуля должны использовать базовое имя модуля в качестве префикса. Старайтесь не использовать id, элементные селекторы и вложенные селекторы. Например, чтобы выбрать пункт меню в модуле menu, используйте что-то типа .menu-link или .menu-item, а не .menu li a.

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

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

Несколько преимуществ подхода SMACSS при написании CSS:

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

SMACSS быстро выучить (и научить);

система именования SMACSS менее подробна и в чем-то проще БЭМ;

система достаточно гибкая, чтобы работать с крупными и маленькими проектами.

ECSS

CSS методологии. CSS БЭМ, SMACSS, ECSS

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

Меня действительно заинтересовала эта CSS-методология с точки зрения первоначальной проблемы, которую затронул автор Ben Frain. И эта проблема – работа с CSS в масштабе.

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

В основном это достигается за счет

инкапсуляции всего кода, не только CSS, а всех технологий, необходимых для постройки всех компонентов в своих общих папках;

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

использования строгой системы именования.

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

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

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

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

изоляция всех визуальных шаблонов облегчает обслуживание CSS-кода;

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

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

Заключение

Написание обслуживаемого и хорошо организованного CSS-кода связано со своими трудностями. В этой статье я рассказала вам про три методологии, которые могут помочь с этой задачей. Это не полный список, и ни один из этих подходов не решает всех проблем, с которыми вы можете столкнуться в проекте.

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

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

Автор: Maria Antonietta Perna

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: