Методология бэм: Методология / БЭМ |

Posted:

Дек 31, 2022

Comments:

Методология бэм: Методология / БЭМ

Содержание

Методология БЭМ: именование классов и идентификаторов

Photo by Nathan da Silva on Unsplash

Существует множество методологий веб-разработки, направленных на уменьшение нагрузки на CSS, организацию сотрудничества в команде и поддержку большой кодовой базы. Сайт proglib.io рассказал о наиболее популярной из них – БЭМ.

Введение

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

Методологии

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

Наиболее известны среди них следующие:

OOCSS

Характеризуется разделением контейнеров и содержимого с помощью «объектов» CSS.

SMACSS

Руководство по стилю написания CSS с пятью категориями правил.

SUITCSS

Структурированные имена классов и значимые дефисы.

ATOMICCSS

Разбиение стилей на атомарные или неделимые части.

Независимо от того, какую методологию вы выберете для использования в проектах, вы получите выгоду от более структурированного CSS. В статье речь пойдет о наиболее популярной среди них методологии БЭМ, созданной специалистами Яндекса. Причина, по которой я предпочитаю ее прочим вариантам: меньшая запутанность по сравнению с той же SMACSS при возможности обеспечить хорошую архитектуру с узнаваемой терминологией. Гибкость методологии БЭМ позволяет настраивать рутинные повседневные процессы и делает работу над проектом, приятным делом.

«До БЭМа в каждом проекте, я придумывал что-то новенькое, а потом открывал код годичной давности и удивлялся – какой идиот это написал?» — Вадим Макеев, веб-евангелист Opera Software

Методология БЭМ

БЭМ – это сокращение от составляющих методологии: блока, элемента и модификатора.

Блок – независимый компонент веб-страницы, который можно использовать повторно. Его название задается через атрибут class и должно характеризовать смысл, отвечая на вопрос: «что это?». Оно не может обозначать состояние («какой?»). Например, меню – menu, или ссылка – link, а не синий – blue, или маленький – small.

Примеры названий блоков:

<!-- Верно. Семантически правильный блок-->
<div></div>
<!-- Неверно. Описывается внешний вид -->
<div></div>

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

Элемент – не имеющая отдельного значения и семантически привязанная к своему родителю часть блока. К нему применимы те же правила именования, при этом название элемента отделяется от названия блока двумя подчеркиваниями (__).

Пример:

<!-- Блок “sidebar” -->
<div>
	<!-- Элемент “ul” блока “ sidebar “ -->
	<ul>
    	<!-- Элемент “li” блока “ sidebar “ -->
	<li>first</li>
	</ul>
</div>

Здесь также можно использовать любую вложенность, но надо помнить, что элемент всегда является частью блока и не может быть частью другого элемента:

<!-- Так неправильно -->
<div>
	<!-- Элемент “ul” блока “ sidebar “ -->
	<ul>
    	<!-- Элемент “li” блока “ sidebar “ -->
	<li>first</li> <!— не верно -->
</div>

Блок создается для повторного использования кода, а потому он не должен зависеть от других компонентов страницы. Если же участок кода не может быть использован без блока-родителя, мы именуем его как элемент. Элементы – это внутренняя реализация блока, но они должны быть не у всех блоков.

Модификатор – маркер, который отделяется от имени блока или элемента двойным дефисом (—), либо одним нижним подчеркиванием (_).

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

Пример:

<!-- Блок “sidebar” -->
<div>
	<!-- Элемент “ul” блока “ sidebar “ -->
	<ul>
    	<!-- Элемент “li” блока “ sidebar “ -->
	<li>first</li>
	</ul>
</div>

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

Пример:

<!-- Верно. “Элемент ` sidebar__item` имеет модификатор `lite` -->
<!-- Блок “sidebar” -->
<div>
	<!-- Элемент “ul” блока “ sidebar “ -->
	<ul>
    	<!-- Элемент “li” блока “ sidebar “ -->
	<li>first</li>
	</ul>
</div>

<!-- Неверно. Отсутствует модифицируемый класс ` sidebar__item ` -->
<!-- Блок “sidebar” -->
<div>
	<!-- Элемент “ul” блока “ sidebar “ -->
	<ul>
    	<!-- Элемент “li” блока “ sidebar “ -->
	<li>first</li>
	</ul>
</div>

Можно сделать микс: метод, позволяющий использовать различные компоненты БЭМ на одном DOM-узле. Таким способом можно соединить поведение и стилевое оформление нескольких сущностей без повторения кода, а также сделать семантически новые компоненты веб-страницы на основе уже имеющихся.

Пример:

<!-- Блок `header` -->
<div>
	<!-- К блоку `search-form` примиксован элемент `search-form` блока `header`-->
	<div></div>
</div>

Здесь мы сгруппировали поведение и стили блока search-form и элемента search-form блока header. Такой подход позволяет нам задать внешнюю геометрию и позиционирование в элементе header__search-form, а сам блок search-form оставить универсальным. Его можно использовать в любом другом окружении, потому что у блока нет никаких специфических отступов и границ. Составление независимых блоков разными способами и их разумное повторное использование сокращает объем кода CSS, который вам придется поддерживать.

Заключение

Созданная в Яндекс методология БЭМ помогает решать проблемы веб-разработки, отвечая на следующие вопросы:

Как облегчить рефакторинг?
Как сделать ваш код самодокументируемым и информативным?
Как повторно использовать участки вашего кода и не допустить влияния его компонентов друг на друга?

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

Простые правила разметки • Как писать классы по БЭМ?

БЭМ расшифровывается как «Блок Элемент Модификатор». На самом деле, это целый стэк технологий, из которого мы воспользуемся только соглашением по именованию классов.

Почему БЭМ?

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

Подробнее можно почитать в разделах Быстрый старт и
Часто задаваемые вопросы на сайте bem.info.

Ниже показаны примеры кода.

Простой пример: Блок + Элемент #
Допустим, у вас есть блок с заголовком, текстом и кнопкой внутри, например, это всплывающее окно — попап. Разметка:
```
<div>
  <h4>Заголовок</h4>
  <div>Текст</div>
  <button>Кнопка</button>
</div>
```
Добавляем класс содержащий назначение элемента: .popup:
```
<div>
  <h4>Заголовок</h4>
  <div>Текст</div>
  <button>Кнопка</button>
</div>
```
Теперь попробуем добавить классы вложенным элементам:
```
<div>
  <h4>Заголовок</h4>
  <div>Текст</div>
  <button>Кнопка</button>
</div>
```
Классы удобные, но не уникальные. Если на странице будут ещё элементы с классами .title и .text, их стили могут затронуть элементы в попапе. Селектор типа .popup .title может в будущем создать проблемы со специфичностью. Можно придумать другие классы, но чем больше похожих по смыслу элементов, тем сложнее придумывать новые классы.
А теперь применим БЭМ-нотацию: каждому элементу внутри блока добавим префикс с классом родителя, например, для заголовка это будет popup__title:
```
<div>
  <h4>Заголовок</h4>
  <div>Текст</div>
  <button>Кнопка</button>
</div>
```
Теперь эти классы легко решают сразу две задачи: во-первых, благодаря уникальным классам стили для них никогда не пересекутся с другими подобными элементами на странице, а во-вторых, по таким классам сразу видно, что это элементы блока .popup.
Пример посложнее: Блок + Элемент + Модификатор #
Для примера возьмём сервисное сообщение на сайте. Обычно такие сообщения бывают разных видов, например, сообщение об успешном завершении действия или об ошибке.
```
<div>
  <h4>Заголовок сообщения</h4>
  <div>Текст сообщения</div>
</div>
```
Логично использовать одну и ту же разметку, но с разными цветовыми темами. Именно здесь очень пригодятся модификаторы.
```
<div>
  <h4>Заголовок сообщения</h4>
  <div>Текст сообщения</div>
</div>
<div>
  <h4>Заголовок сообщения</h4>
  <div>Текст сообщения</div>
</div>
```
Обоим элементам можно добавить одинаковые стили используя общий класс .message и так же легко можно добавить отдельные стили для каждого из них, используя уникальный класс с модификатором:
```
.message {
  border: 1px solid gray;
}
  .message--success {
    border-color: green;
  }
  .message--error {
    border-color: red;
  }
```
Оба сообщения будут иметь рамку толщиной один пиксель, но для сообщения об успешной операции она будет зелёной, а для сообщения об ошибке — красной.
Ещё сложнее: что делать, если хочется сделать элемент элемента? #
Например, на странице есть блок новостей:
```
<div>
    <h4>Новости</h4>
    <ul>
      <li></li>
      <li></li>
    </ul>
</div>
```
Заголовок блока логично получает класс .news__title, список — .news__list, а отдельная новость — .news__item:
```
<div>
    <h4>Новости</h4>
    <ul>
      <li></li>
      <li></li>
    </ul>
</div>
```
Тут никаких проблем возникнуть не должно. Теперь добавим разметку отдельной новости:
```
<div>
    <h4>Новости</h4>
    <ul>
      <li>
        <h5>Заголовок новости</h5>
        <p>Текст новости</p>
      </li>
      <li></li>
    </ul>
</div>
```
Нам нужно добавить класс заголовку новости. Первым делом приходит в голову .news__title, но такой класс уже занят. Предположим, что второй элемент будет не .title, а .subject, тогда в CSS получается такое:
```
.news__title { ... }
.news__subject { ... }
```
Без дополнительных комментариев будет совершенно невозможно понять какой из них является заголовком всего блока, а какой — отдельной новости. Не пойдёт.
Следующий вариант — .news__item__title, но в БЭМ нельзя создавать элемент элемента, и это понятно, потому что получается каша. Ещё вариант: .news__item-title — тоже не годится, потому что может быть неочевидным как title соотносится с item. Как же быть?
Решение простое: на уровне элемента .news__item можно объявить новый блок (например, .news-item), и строить вложенные классы уже от него. Да, это не самостоятельный переиспользуемый блок, здесь объявление блока нужно только для того, чтобы разгрузить селекторы. Что получается:
```
<div>
    <h4>Новости</h4>
    <ul>
      <li>
        <h5>Заголовок новости</h5>
        <p>Текст новости</p>
      </li>
      <li></li>
    </ul>
</div>
```
Проблема решена: нам больше не нужно использовать монструозные классы, при этом класс точно описывает элемент, и в CSS будет сразу понятно какой класс за что отвечает:
```
.news__title { ... }
.news-item__title { ... }
```
Простой и удобный выход из неудобной ситуации.

Больше примеров разметки можно увидеть здесь.

Ещё одно хорошее руководство по использованию БЭМ есть здесь.

Что такое метод оценки биоразнообразия (BAM)?

Что такое метод оценки биоразнообразия (BAM)?deltaassociates20 февраля 2020 г. 20 февраля 2020 г.

Метод оценки биоразнообразия (BAM) описывает, как аккредитованное лицо оценивает воздействие на биоразнообразие на объектах застройки и объектах управления.

BAM — это научный документ, который обеспечивает:

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

BAM поддерживается онлайн-инструментом BAM , что позволяет аккредитованным оценщикам (как правило, экологическим консультантам) вводить полевые данные и определять количество и класс кредитов биоразнообразия. Инструмент BAM также поможет с подготовкой стандартизированных отчетов для рассмотрения органами по согласию.

Аккредитованный оценщик должен применить BAM. Оценщик документирует результаты оценки биоразнообразия в Отчете об оценке развития биоразнообразия (BDAR).

BDAR определяет:

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

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

Ознакомьтесь с Методом оценки биоразнообразия (PDF, 1,2 МБ).

Запросить сейчас

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

Мы можем помочь в поиске подходящих кредитов для:

Разработчики и менеджеры проектов
Правительственные департаменты штата
Местные советы
Инфраструктурные поставщики
Accented Essessors
Mines
Factory Extending Factory
Shiefble. условия и цены кредита, которые соответствуют рынку. Ваш проект может захотеть получить кредиты сегодня по сегодняшним ценам кредитов, имея при этом гибкость отсрочки расчетов или опционного соглашения.
Для получения дополнительной информации ознакомьтесь с нашими часто задаваемыми вопросами ниже или запросите онлайн-консультацию и обзор ваших потребностей в биобанкировании.
Запросить сейчас
Свяжитесь с нами сегодня для получения дополнительной информации о ценах и наших гибких условиях контракта для кредитов экосистемы или видов.
Методология | Лучшие мастера архитектуры
Методология BAM основана на корректировке различных показателей, предназначенных для сравнения ведущих мировых университетов, архитектурных школ и выбранных магистерских программ Рейтинг БАМа 2022 . Благодаря методологии BAM мы можем установить критерии для объективного сравнения учебных планов, которые, несмотря на различия, все ориентированы на академическое развитие лучших архитекторов.

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

Перед Экспертным комитетом была поставлена задача разработать список из 10 показателей эффективности образования и 45 подпоказателей на всех этапах исследования BAM Ranking 2022. Эти показатели ежегодно обновляются, чтобы соответствовать современным проблемам, связанным с архитектурной академией.

Каждый основной индикатор состоит из различных субиндикаторов, которые имеют соответствующую оценку. Сумма баллов по всем основным показателям дает итоговую оценку программы по шкале от 1 до 100.

Офисам магистерских программ предлагается предоставить всю необходимую информацию для оценки с помощью методологии BAM. Как только сотрудники программ отправляют запрошенную информацию, каждая программа оценивается и получает окончательный балл, который определяет порядок рейтинга.
ПОКАЗАТЕЛИ 2022
01. Консолидация во времени
Возраст магистерской программы свидетельствует о ее успехе благодаря постоянному спросу и новым абитуриентам в каждом программном цикле. Преемственность во времени означает, что программа обучения стабильна и вызывает доверие у новичков. Это также доказывает свою актуальность для профессионалов, которые участвовали в прошлом.

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

Кроме того, положительно оценивается история и престиж Архитектурной школы, в которой реализуется магистерская программа.

Релевантность: 6,7 / 100
02. Обмен и интернационализация
Положительно оценивается то, что магистерская программа напрямую связана с другими университетами на международном уровне из-за постоянной связи, которую она подразумевает, и возможности заключать образовательные соглашения, которые приносят пользу как студентам, так и выпускникам.

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

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

Релевантность: 8,9 / 100
03. Подход к обучению и программа
Оптимальное качество означает создание наилучших преимуществ, доступных для всего студенческого контингента после окончания курса, что способствует успешному развитию их профессиональной карьеры. Этот вопрос проверяется через сбалансированное соотношение между теорией и практикой, стремясь охватить различные области знаний целостным и содержательным образом.

Чтобы набрать наибольшее количество баллов, магистерские программы должны иметь сбалансированную образовательную систему между теоретическими занятиями и практическими занятиями. Специализация программ с точки зрения уроков (предметов/курсов) также проверяется, и мы признаем сбалансированный уровень специализации положительным моментом.

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

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

Также учитываются другие аспекты, связанные с продолжительностью программы, количеством и типом предметов.

Релевантность: 17,8 / 100
04. Возможности трудоустройства и создание сетей
Положительно оценивается то, что программа последипломного образования поддерживает развитие карьеры участников с точки зрения возможностей трудоустройства и налаживания связей между нынешними студентами, профессорами, выпускниками и другими специалистами в этой области.

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

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

Релевантность: 8,9 / 100
05. Факультет Интернациональность и разнообразие
Интернациональный и разнообразный преподавательский состав способствует более широкому и мультикультурному образовательному опыту, который способствует профессиональному обогащению студентов.

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

В этом разделе положительно оценивается состав преподавателей разных полов.

Релевантность: 8,1 / 100
06. Компетентность профессорско-преподавательского состава
Академическая и профессиональная компетентность профессорско-преподавательского состава высоко ценится для обеспечения высокого качества преподавания и профессионализма на уроках. Эта тема измеряется достигнутой докторской степенью. исследования текущего факультета и количество профессоров, занимающихся соответствующими практиками, связанными с архитектурой.

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

Ставка «профессор-студент» была включена для того, чтобы определить, получают ли студенты персонализированный опыт обучения от своих профессоров.

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

Кроме того, положительно оценивается тот факт, что большое количество преподавателей закончили лучшие архитектурные вузы (согласно QS Ranking by Subject)

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

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

Многополый студенческий состав также оценивается положительно.

Релевантность: 6,7 / 100
08. Публикации и коммуникации
Очень ценится, что магистерские программы делают и участвуют в соответствующих публикациях, связанных с профессией в исследованиях, практических работах или любых других. Количество разработанных публикаций свидетельствует о выполнении работы, разработанной студентами в рамках программы. Также учитывается количество публикаций, разработанных штатными преподавателями программы, поскольку это может определить актуальность преподавательского состава.

Чтобы получить баллы в этом разделе, программа должна продемонстрировать, что они выпускают как минимум одну публикацию в год. Просьба предоставить список публикаций, в которых участвовала программа (печатных и электронных). Кроме того, программа должна отправить список штатных профессоров с указанием разработанных ими публикаций.

Дополнительные баллы начисляются, если программа постоянно сообщает о результатах и развитии через свой веб-сайт или социальные сети.

Релевантность: 6,7 / 100
09. Школьные помещения и услуги для студентов
При разработке программы принимается во внимание наличие эксклюзивного и подходящего пространства для студентов. Также считается, что учащиеся имеют доступ ко всем инструментам и материалам, необходимым для успешного выполнения требуемых заданий. Для получения хорошего балла в этом плане учебный план должен предлагать следующие помещения: непрерывное пространство для мастерских, открытые общественные места, специальные помещения для построения физических моделей и общие помещения.

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

Актуальность: 14,1 / 100
10. Дополнительные баллы
Сотрудничество школ архитектуры является обязательным условием для запуска рейтинга BAM из года в год. Выбранным магистерским программам предлагается заполнить онлайн-форму, чтобы отправить нам необходимую информацию для их оценки с помощью нашей методологии. Чтобы получить баллы здесь, программа должна отправлять всю запрошенную информацию вовремя и в соответствии с расписанием.

BAM Ranking использует рейтинг QS University Ranking by Subject 2022 в качестве эталона для выбора программ для изучения. Из-за важности этого рейтинга для BAM дополнительные баллы начисляются первым 10 университетам, включенным в рейтинг QS по предмету 2022 (архитектура / искусственная среда)

Мнение наших экспертов является ключевым фактором при принятии решения о том, какие программы будут оцениваться.
This entry was posted in Популярное