Эта статья является частью серии, созданной в сотрудничестве с SiteGround . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.
В этой статье я собираюсь обсудить три успешных подхода к архитектуре CSS, их принципы, цели и преимущества.
Почему код CSS может выйти из-под контроля?
Общеизвестно, что поддерживать CSS-код простым, многократно используемым и обслуживаемым. Если вы не соблюдаете согласованное соблюдение каких-либо правил кодирования и организации, это может иметь место как для небольших, так и для крупных и крупных проектов, в которых работает более одного разработчика.
Там, где база кода велика, со временем претерпевает ряд изменений, а организации не хватает, часто случается, что команды предпочитают добавлять новые правила стиля в конце документа таблицы стилей, а не удалять его фрагменты или изменять то, что уже есть. , Основная причина часто заключается в том, что эффекты редактирования или удаления объявлений CSS могут быть непредсказуемыми и могут привести к нарушению дизайна где-то в проекте. Это проигрышная стратегия, которая может привести к дублированию кода, проблемам со спецификой, когда переопределение правил стиля превращается в битву, и к раздутию в целом.
Чаще всего выбор методологии, наиболее соответствующей вашим потребностям, является итеративным процессом, который начинается с ознакомления с тем, что уже есть.
Вот три методологических подхода, которые помогут вам справиться с сложными задачами.
BEM
БЭМ обозначает блок-элемент-модификатор . Это методология создания CSS, созданная Яндексом .
Целью методологии БЭМ является
разрабатывать сайты, которые следует запускать быстро и поддерживать в течение длительного времени. Это помогает создавать расширяемые и повторно используемые компоненты интерфейса.
Ключевыми концепциями здесь являются простота обслуживания проекта с течением времени и возможность повторного использования компонентов .
Основная стратегия БЭМ состоит в организации CSS-кода в повторно используемые модули с помощью соглашения об умном именовании. Давайте посмотрим поближе.
Что такое блок?
Идентификация блоков является важным этапом применения методологии БЭМ. Блок это
функционально независимый компонент страницы, который можно использовать повторно. В HTML блоки представлены атрибутом класса.
Решая, что считать блоком, спросите себя, можете ли вы легко удалить эту часть кода и использовать ее где-нибудь еще. Например, вы можете рассматривать заголовок или нижний колонтитул сайта как блок.
Вы можете безопасно вкладывать блоки, например, вы можете поместить блок меню внутри блока заголовка.
<header> <ul class="menu"> <!-- menu items here --> </ul> </header> Поскольку в принципе вы должны иметь возможность повторно использовать блоки в любом месте вашей страницы, ваш CSS для блока не должен устанавливать никаких полей или правил позиционирования.
Наконец, при выборе имени убедитесь, что имя описывает, для чего предназначен блок, какова его цель, а не его внешний вид или состояние. Другими словами, его имя должно отвечать на вопрос: что это? (например, заголовок, меню и т. д.), а не как это выглядит? (например, фиксированный заголовок, небольшое меню и т. д.).
Что такое элемент?
Согласно методологии БЭМ, Элемент
Часть блока, которая не имеет самостоятельного значения и семантически связана с ее блоком.
Вот несколько принципов, применимых к элементам:
- Элементы живут только внутри блока
- Элементы не могут принадлежать другим элементам, они могут быть только частью блока
- Вы можете создавать вложенные элементы
- Названия элементов описывают их назначение, а не их внешний вид.
- При именовании элементов вы должны следовать следующим соглашениям:
block__element
Что такое модификатор?
Модификатор
Сущность, которая определяет внешний вид, состояние или поведение блока или элемента.
Например, блок заголовка может быть зафиксирован в верхней части страницы , блок аккордеона может быть открытым или закрытым , блок кнопок может быть отключен и т. Д.
Соглашение об именовании БЭМ для модификаторов выглядит следующим образом: block__element_modifier .
Это ядро методологии БЭМ. Кроме того, BEM предлагает принципы организации файловой структуры , набор инструментов и живое сообщество для поддержки.
Плюсы использования БЭМ
Вот некоторые преимущества использования БЭМ в ваших проектах
- Новые разработчики могут быстро понять связь между компонентом в разметке и правилами CSS
- Это способствует продуктивности в командах. Преимущество особенно заметно при работе над большими проектами
- Соглашение об именах снижает риски конфликтов имен классов и утечек стилей
- CSS не тесно связан с разметкой в определенном месте внутри страницы
- CSS очень многоразовый
SMACSS
Масштабируемая и модульная архитектура для CSS или SMACSS — это методология веб-разработки для организации и написания кода CSS. Его создатель, Джонатан Снук, описывает это следующим образом:
SMACSS — это способ проверить ваш процесс проектирования и как способ приспособить эти жесткие рамки к гибкому мыслительному процессу. Это попытка документировать последовательный подход к разработке сайта при использовании CSS.
В его основе лежит способ категоризации правил CSS. Категоризация порождает шаблоны, т. Е. Вещи, которые вы видите повторяющимися в дизайне более одного раза, на основе которых вы можете разработать рекомендации по кодированию поддерживаемого и повторно используемого CSS.
Основные категории SMACSS:
- База — в эту категорию входят правила CSS, которые определяют внешний вид элементов по умолчанию. Селекторы включают в себя одноэлементные селекторы, селекторы атрибутов, селекторы псевдоклассов, родственные селекторы и т. Д. Например,
html,body,a, a:hoverи т. Д. - Макет — эта категория для стилей, используемых для разделения страницы на разделы.
- Модуль — Модули — это многократно используемые лего-подобные элементы дизайна, например, меню, диалог, окно поиска и т. Д.
- Состояние — эта категория включает в себя стили для описания того, как выглядит макет или модули в определенном состоянии (например, видимом или скрытом, развернутом или закрытом и т. Д.) Или в определенном представлении (например, домашней или внутренней странице).
- Тема — эта категория похожа на State в том смысле, что она включает правила CSS, которые заботятся о внешнем виде макетов и модулей. Не всем проектам нужна эта дополнительная категория, но приятно знать, что она есть.
Соглашение об именах SMACSS
В связи с категориями, описанными выше, SMACSS предлагает соглашение об именах, чтобы помочь с организацией кода и производительностью групп разработчиков.
Правила Layout, State и Module имеют префикс значащего имени или сокращения.
Для правил Layout приемлемыми префиксами являются что-то вроде layout- , grid- или даже просто l- .
Для правил государства, соглашение состоит в том, чтобы поставить перед префиксом состояние is- , например, is-hidden , is-visible и т. Д.
Что касается модулей, просто используйте имя компонента, который вы строите, например .menu , .dialog и т. Д.
Например, чтобы .dialog.is-open открытое диалоговое окно, вы можете использовать селектор типа .dialog.is-open в вашем CSS. Связанные элементы внутри модуля, а также варианты одного и того же модуля должны использовать базовое имя модуля в качестве префикса. Также старайтесь не использовать идентификаторы, селекторы элементов или вложенные селекторы. Например, чтобы выбрать пункт меню внутри модуля с именем menu , вместо того, чтобы писать свой селектор, как это: .menu li a , используйте что-то вроде этого: .menu-link или .menu-item .
В отличие от BEM, SMACSS не предписывает слишком строгое соглашение об именах. Джонатан Снук ясно говорит об этом:
… не думайте, что вы должны строго придерживаться этих рекомендаций. Имейте соглашение, зарегистрируйте это, и придерживайтесь этого.
Преимущества использования SMACSS
Некоторые преимущества подхода SMACSS к кодированию CSS:
- Он предлагает действующие руководящие принципы для модульных, поддерживаемых CSS, избегая при этом чрезмерно предписывающих
- Вы можете выучить (и научить) SMACSS быстро
- Соглашение об именах SMACSS менее многословно и в некоторых отношениях легче справиться, чем BEM
- Он достаточно гибкий, чтобы хорошо работать как для больших, так и для небольших проектов.
ECSS
Устойчивый CSS или eCSS — это
Руководство по написанию таблиц стилей для крупномасштабных, быстро меняющихся, долговечных веб-проектов.
Эта методология CSS действительно пробудила во мне интерес к оригинальной точке зрения ее автора Бена Фрейна на проблему работы с CSS в масштабе.
Центральная концепция eCSS — изоляция . Изоляция означает, что каждый компонент представляет собой изолированную единицу кода без каких-либо зависимостей, без контекстного багажа, многоразового использования и удаления без риска утечки стиля.
Это достигается в основном за счет
- Инкапсуляция всего кода, не только CSS, но и всех технологий, необходимых для создания каждого компонента в его собственных общих папках.
- Создание нового компонента каждый раз, когда вам нужен компонент, похожий на уже существующий, но с некоторыми изменениями, даже если изменения незначительны.
- Использование строгого соглашения об именах CSS
Исходя из второго пункта выше, кажется очевидным, что повторяющиеся свойства и значения не являются проблемой для eCSS. В этом отношении eCSS представляет собой радикальный отход от методологий, таких как BEM и SMACSS, которые расширяют или абстрагируют от существующего компонента, тем самым избегая или стараясь изо всех сил избегать повторения кода.
Означает ли это, что eCSS создает тяжелые файлы таблиц стилей? Не обязательно. После нескольких тестов, использующих сжатие файлов, Бен Фрейн пришел к выводу, что из-за того факта, что «gzip невероятно эффективен при сжатии повторяющихся строк», разница в размерах файлов между использованием eCSS и другими методологиями, которые предпочитают абстракцию по сравнению с повторением, была супер крошечный
Преимущества использования eCSS
Вот что вы можете получить, применяя методологию eCSS и принимая ее взгляд на повторение:
- Сохраняя каждый визуальный шаблон изолированным, CSS-код становится легче поддерживать
- Несмотря на то, что вы обнаружите повторяющиеся свойства и значения, увеличение размера файла в конечном итоге остается минимальным. Это так, потому что модули представляют собой автономные, изолированные блоки, которые вы можете быстро удалить, когда они вам больше не нужны, не опасаясь нарушить дизайн
- Все языковые / технологические файлы, необходимые для создания модуля, находятся в одной папке, что делает редактирование и физическое удаление того, что больше не требуется, чрезвычайно простым.
Вы можете прочитать все детали этой инновационной методологии в книге Фрейна « Прочный CSS» .
Вывод
Написание поддерживаемого и хорошо организованного кода CSS имеет свои проблемы. В этой статье я представил три методологии, которые могут помочь с задачей. Это ни в коем случае не исчерпывающий список, и ни один из этих подходов не решает всех проблем, с которыми вы можете столкнуться при работе над проектом.
Просто попробуйте их и посмотрите, что работает для вас. Вы также можете попробовать использовать BEM и SMACSS вместе или даже разработать свою собственную методологию на основе определенного набора проблем, которые вы ставите перед собой.
Каковы ваши золотые правила написания организованного, управляемого кода CSS? Как вы думаете, использование методологии для архитектуры CSS может облегчить боль? Нажмите на поле для комментариев, чтобы сообщить мне.