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

Однако, прежде чем идти дальше, мы должны знать, что означает само слово «методология».


Что такое методология

Согласно Википедии, методология — это науки/методы, используемые для получения истины с помощью поиска с определенными процедурами для нахождения истины. Методология состоит из структурированных способов приобретения знаний.

Википедия — Методология

Как? Вы можете себе представить, если мы свяжем это слово «методология» с CSS?

Для уверенности подчеркнем.

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

Препроцессоры CSS, такие как Sass, Less и Stylus, упрощают работу, предлагая функции, упрощающие написание CSS. Но на самом деле это не решает проблем с масштабируемостью.

Вот почему методология является решением масштабируемости и масштабируемости в CSS.

Так…,

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

ВАЖНЫЙ! Не существует «лучшей» методологии CSS. Каждая методология имеет свои преимущества и недостатки. Различные подходы работают лучше для разных людей/команд/проектов.


1. OOCSS (объектно-ориентированный CSS)

Ключевыми концепциями OOCSS (объектно-ориентированного CSS), разработанного Николь Салливан в 2008 году, являются CSS идентификации объектов, разделение визуальных структур и стилей и отказ от стилей, основанных на местоположении.

OOCSS фокусируется на гибкости и модульности, принципе единой ответственности, разделении ответственности и других концепциях из парадигмы ООП.

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

Пример:

  • .button — обеспечивает базовую структуру кнопок
  • .grey-button — применять цвета и другие визуальные свойства

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

Пример:

  • <button class="button grey-button">

Плюсы:

  • Многоразовый код визуального стиля
  • Уменьшает дублирование одного и того же свойства в нескольких правилах стиля.
  • Коды местоположений становятся более гибкими
  • Сокращение глубоко вложенных селекторов

Против:

  • Без достаточного количества повторяющихся визуальных паттернов
  • Казалось бы, ненужное разделение кода структуры и визуального стиля.
  • Получение нескольких классов, которые могут быть сложными в обслуживании и управлении

Официальная документация:


2. БЭМ (Блок, элемент, модификатор)

Разработанные разработчиками Яндекса в 2009 году ключевые понятия для БЭМ (Блок, Элемент, Модификатор) включают в себя идентификацию блоков, элементов и модификаторов.
Идея БЭМ состоит в том, чтобы различать классы CSS, выполняющие разные роли. Это делается путем присвоения классам CSS имен, указывающих на их роль.

Пример:

  • .блокировать
  • .block__элемент
  • .block__element — модификатор

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

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

Пример: .search-form

Элементы
Элементы являются частью блока. Блок — это целое, а части — это элементы. Элементы помечаются добавлением двух разделителей подчеркивания. __ и имя элемента на имя его родителя.

Пример: .search-form__heading, .search-form__text-fieldа также .search-form__submit-button

Модификатор
Модификатор применяется к блоку или элементу, чтобы указать на изменение его представления или изменение его состояния. Они обозначаются добавлением разделителя и имени модификатора к блоку или элементу, к которому они адресованы.

В официальной документации сайта БЭМ разделителем модификаторов должен быть один символ подчеркивания. _. Однако в «БЭМ-подобном» соглашении по CSS-руководству Гарри Робертса используются две строки: --он более широко используется и известен, чем официальная конвенция БЭМ.

Пример: .search-form--advanced

Плюсы:

  • Его легко использовать, так как каждый тег будет иметь имя класса и глубокое сокращение селекторов CSS.
  • Можно избежать использования !important который является анти-шаблоном в css
  • Легко разрабатывать
  • Избегайте создания селекторов непосредственно для элементов

Против:

  • Чтобы названия выглядели нормально, БЭМ предлагает блокировать неглубокие вложенные элементы.
  • Для вложенного html более 2-3 уровней нам может быть сложно определить имя
  • Соглашения об именах непонятны неопытным разработчикам.


Сравнение БЭМ со стандартным CSS

ЧТО Ж:
• Дает нам более модульный код. Можем взять любую часть отдельно.
• Позволяет любому писать CSS. Нам не нужно опасаться написания стилей и пользовательских замен. В большой команде это хорошо.
• Устранить любые проблемы со специфичностью.
• Значительно более подробный.

Стандартный CSS (который основан на использовании селекторов потомков):
• Означает, что наш стиль зависит от контекста.
• Требуется каскадная осведомленность. Код в одном месте может влиять на код в другом. В маленьких командах это не проблема, а вот в больших командах будет серьезной проблемой.
• Может страдать от проблем со специфичностью, которые могут быть трудны для устранения начинающими разработчиками.
• Значительно плотнее.

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

Официальная документация:


Закрытие

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