Почему правила именования BEM не использует теги и атрибуты?

#css #бэм

Как известно, BEM состоит из блоков, элементов и модификаторов.

Возьмем блоки. Их предлагают отмечать отдельным классом.

Крайне разнообразные



Чем плох этот подход? Почему его не применяют? Мне кажется BEM идеально соответствует
идеям обыкновенных тегов. Возможно я чего-то не знаю? Может быть возникают какие-то
проблемы с селекторами? 
    

Ответы

Ответ 1

Всё просто: совместимость. С ней пока всё очень ненадёжно, Custom Elements Specification
всё ещё в статусе working draft, и браузерами поддерживается очень плохо.

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



React лишь инкапсулирует конструкции из "примитивных элементов" (которые в HTML5
специфицированы) и позволяет составлять из них более сложные HTML-подобным языком разметки
(JSX).

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

UPD: есть такой, posthtml, как сообщает @Guria, и в той же организации есть полифилл
posthtml-custom-elements.


Ответ 2

БЭМ в том числе ориентировался на максимизацию производительности. Один класс - это
очень быстро. Один тег - тоже. А вот атрибуты - это уже гораздо медленее.

А так, по самой идеологии проблем не вижу.

Ещё по поводу валидности разметки - кастомные теги должны содержать дефис.

Стоит ли использовать БЭМ [закрыт]

#яндекс #бэм

        
             
                
                    
                        
                            Закрыт. Этот вопрос не по теме. Ответы на него в данный
момент не принимаются.
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            Хотите улучшить этот вопрос? Update the question so it's
on-topic for Stack Overflow на русском.
                        
                        Закрыт 4 года назад.
                                                                                
           
                
        
Добрый день!
Стоит ли использовать БЭМ (Блок Элемент Модификатор (Яндекс)) и, что означает независимый
блок в контексте БЭМ?    

Ответы

Ответ 1

БЭМ, это соглашение о наименованиях. Не MVC, и не исключает совместное использование
с каким-нибудь MVC.

БЭМ помогает решить ряд определенных проблем:


Исключить зависимые имена классов. При разработке долгоиграющих проектов или при
большой команде это приводит к разъезжающимся страницам
Существенно уменьшить усилия на изучение проекта для нового разработчика. Все части
вёрстки разложены по файлам и папкам с интуитивно понятными именами
Избавиться от копипаста в рамках страницы/сайта/портала. Блок это готовая часть вёрстки,
его можно и нужно повторно использовать. Элементы и модификаторы позволяют точечно
вносить изменения для каждого случая использования этого блока, избегая взаимное влияние
использования модифицированных блоков на одной странице
Избавиться от копипаста, если необходимо внести изменение в определенный компонент
вёрстки. Не нужно делать правки в 100500 местах, правки вносятся в одном месте


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

Про АНБ в контексте БЭМ хорошо сказано здесь https://ru.bem.info/forum/issues/-46/

По сути это два правила:


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


Ответ 2

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

Вопросы по верстке - по БЭМ

#css #вёрстка #бэм

Привет.

Вопросы по верстке по БЭМ. 


Написано в документации, что "Блок не должен влиять на свое окружение, т. е. блоку
не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры)
и позиционирование." Как же тогда задавать те же паддинги, маргины...?
Зачем нужен микс. Не понимаю. Есть блок, есть модификатор. Зачем еще микс? Приведите,
пожалуйста, пример понятный.

    

Ответы

Ответ 1

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

Если известно, что независимо от того, где данный блок потребуется, он будет иметь
одинаковую высоту, ширину и рамку, то width, height и border можно смело оставлять.
А вот margin, position и float с большой долей вероятности будет плохой идеей — нет
гарантий, что в другом месте блок по-прежнему будет требовать таких же отступов и позиционирования.
Разумеется бывают исключения, универсальное правило — руководствоваться здравым смыслом.
Прием, позволяющий использовать разные БЭМ-сущности на одном DOM-узле.

Миксы позволяют:


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


Пример микса:



    
    




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


Простейшая реализация:



/*
Вообразим что это прекрасный блок формы
Он может быть переиспользован в другом месте, но вид у него дефолтно такой
*/
.search-form{
  display: inline-block;
  cursor: pointer;
  background: rgba(0,149,255,1);
  color: #00ff5c;
  padding: 10px 30px;
}

/*
Вообразим что это прекрасный блок шапки
Он знать ничего не знает о других блоках, однако, его элементы должны приводить содержимое
в нужную форму
*/
.header{
  color: blue;
}

/*
Элемент формы шапки
Он не знает про блок формы, но знает что в шапке у формы должен быть margin от текста
ниже формы
И плавная смена цвета при наведении
*/
.header__search-form{
  margin-bottom: 10px;
  transition: all .5s;
}
.header__search-form:hover{
  background: #0e13b5;
}


  
  
Форма
  
Это шапка

БЭМ именование и структура

#css #бэм

Помогите разобраться.

1) Можно ли в БЭМ делать вложенности class в class?

.class {
  .class1 {}
  .class2 {}
}


2) Бывают случаи, когда необходимо добавить padding или margin одному элементу или
к нескольким. Как именовать в таком случае?

block
  block__elem
  block__elem_mod
  block__elem_mod
  block__elem_mod # Этому, к примеру, нужно дополнительно добавить margin


Как поступить в этом случае, если mod для всех общий. Добавлять еще mod? block__elem_mod_mod?



По просьбе Виталия Емельянцева. Уточняю случаи ко второму вопросу:

 .car {
      .car__header {
        .car__header_title {}
        .car__header_img {}
        .car__header_name {}
        .car__header_description {
          .car__header_description_span?
          // Как именовать? Уточним что у span-ов есть разные свойства и общие
        // Текст много текста Текст
Текст
        }
      }
      .car__main {
        .car__main_description {}
      }
      .car__footer {
       .car__footer_description{}
     }
  }


Или:

.header
  .header__menu
    .header__menu_nav
      .header__menu_nav_link ?
        .header__menu_nav_link_active ? .header__menu_nav_link-active?

    

Ответы

Ответ 1

Можно ли в БЭМ делать вложенности class в class?

О чем идет речь в вопросе?


Можно ли в верстке, или можно ли в стилях?
class в class или БЭМ-блок в БЭМ-блок? Или элемент и модификатор в блок?


Можно ли в верстке..

Да, конечно. Ваш html - это дерево нод, которым вы вольны присваивать любые классы.
И следовательно "вкладывать" одни классы в другие.

То же касается БЭМ-блоков. Одни блоки вы можете использовать в составе других, свободно,
например:

form.form
  .form-group
    label.label
    input.input type="text"
  .form-group
    button.button.button_blue type="submit"


Блоки .label, .input, и .button "вложены" в блоки .form-group, которые "вложены"
в блок .form.

Можно ли в стилях..

Можно. Во-первых, удобно вкладывать элементы в одноименный блок:

.promo-section
  .promo-section__title
  .promo-section__text


А модификатор этого блока лучше располагать на одном с ним уровне:

# promo-section.css

.promo-section
  .promo-section__title
  .promo-section__text

.promo-section_wide
  .promo-section__title
  .promo-section__text


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

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

# input.css

.input
  # Общие стили блока инпута .input


# form.css

.form
  .input
    # Уточняющие стили для любого инпута, находящегося внутри формы .form




Как добавить padding/margin одному или нескольким элементам блока

Например такой код:

.promo-section
  .promo-section__title
  .promo-section__text Один абзац
  .promo-section__text Второй абзац
  .promo-section__text Третий абзац


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

Стилизовать последний..

Может подойти селектор :last-child. Например:

.promo-section
  .promo-section__text
    margin-bottom: 10px

  .promo-section__text:last-child
    margin-bottom: 0


Стилизовать второй по-особому..

Добавьте второму дополнительный класс. Какой? Зависит от задачи:


Можно модификатор элемента вида .promo-section__text_special;
Можно блок, чтобы получился микс из элемента и блока (.promo-section__text.text-right).




"Уточняю случаи ко второму вопросу"

Первый ваш пример оторван от реальности. Уже писал об этом в комментариях, упомяну
и здесь. В вашем приведенном примере странно названы модификаторы. "Шапка машины" -
очевидно, элемент. "Шапка машины заголовочная", "шапка машины рисуночная", "шапка машины
описательная"? Странное название для модификаторов. По смыслу больше подходит на элемент
внутри элемента внутри блока.

Второй ваш пример подтверждает догадки - внутри "меню шапки" (элемента) вы пытаетесь
расположить "ссылку" и "ссылку активную" (элемент внутри элемента внутри блока).

Такие ситуации решаются двумя способами:

Именование элементов без вложенности

.header
  .header__link
  .header__link_active
  .header__menu
  .header__menu_nav
    .header__link
    .header__link_active


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

Разбиение на отдельные блоки

.link
.link_active

.header
  .header__menu
  .header__menu_nav
    .link
    .link_active


.link здесь - отдельный БЭМ-блок. А внутри блока .header вы ее дополнительно стилизуете,
для ситуаций, когда она встречается внутри .header__menu_nav.

Стоит ли использовать БЭМ [закрыт]

Добрый день! Стоит ли использовать БЭМ (Блок Элемент Модификатор (Яндекс)) и, что означает независимый блок в контексте БЭМ?

Ответ

БЭМ, это соглашение о наименованиях. Не MVC, и не исключает совместное использование с каким-нибудь MVC.
БЭМ помогает решить ряд определенных проблем:
Исключить зависимые имена классов. При разработке долгоиграющих проектов или при большой команде это приводит к разъезжающимся страницам Существенно уменьшить усилия на изучение проекта для нового разработчика. Все части вёрстки разложены по файлам и папкам с интуитивно понятными именами Избавиться от копипаста в рамках страницы/сайта/портала. Блок это готовая часть вёрстки, его можно и нужно повторно использовать. Элементы и модификаторы позволяют точечно вносить изменения для каждого случая использования этого блока, избегая взаимное влияние использования модифицированных блоков на одной странице Избавиться от копипаста, если необходимо внести изменение в определенный компонент вёрстки. Не нужно делать правки в 100500 местах, правки вносятся в одном месте
Ценой этого является высокий порог входа к использованию БЭМ. Это принять БЭМ в сердце, разобраться с инструментами сборки, применимыми к вашему случаю, донести БЭМ до окружающих коллег. Стоит ли заплатить эту цену, решать вам.
Про АНБ в контексте БЭМ хорошо сказано здесь https://ru.bem.info/forum/issues/-46/
По сути это два правила:
Всем элементам внутри блока надо задать классы, т.е. не опираться в CSS на имена элементов Все классы, на которые накладываются стили этого блока, должны быть уникальными, например, начинаться с имени класса корневого элемента