Почему амперсанд не компилирует вложенность?

Question

[Никита Кит]

Все мои компоненты вёрстки пишутся на БЭМ, каждый новый блок я начинаю примерно с такого кода:

.footer{
  width: 100%;
  position: relative;
  &__plate{
    position: relative;
    z-index: 3;
    @extend %plate;
  }
}

По идее стили для footer__plate должны компилироваться с вложенностью:

.footer{
  width: 100%;
  position: relative;
}
.footer .footer__plate{
  position: relative;
  z-index: 3;
 ...
}

Но компилятор почему-то делает так:

.footer{
  width: 100%;
  position: relative;
}
.footer__plate{
  position: relative;
  z-index: 3;
 ...
}

Я заметил это недавно - оно особо не мешает, ибо БЭМ классы никогда не повторяются. Однако тем не менее это отходит от правил методологии. Ведь если в каком-то левом блоке появтися footer__plate, то стили к нему применятся. К тому же частенько приходится наследовать элементы каркасов, которые повторяются. Я выношу их в тихий класс, чтоб сам элемент каркаса не падал в компил. Если я наследую элемент каркаса с модификатором в элемент блока приходится пользоваться !important как раз из-за этого недочёта. Есть ли способ сказать компилятору что надо создать вложенность, если она есть в коде независимо об амперсанда?

Comments

[sim3x]

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

[Алекс Глебов]

Вся суть бема в независимости блоков от своего положения. И вложенность в там не допускается.

[Никита Кит]

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

[Никита Кит]

sim3x: plate - это указание позиции? Интересно. position: plate это что-то новенькое....

[Ярослав Иванов]

Никита Кит: что ? Какая ещё тарелка ?

[Артем Каюн]

Никита Кит: Вы подписаны как Middle User Interface Web Developer...задумайтесь о понижении вашего статуса).
Что вы привязались к амперсанту вот доки sass-lang.com/documentation/file.SASS_REFERENCE.ht... и работает от правильно, как и должен. Вам уже 2 человека это написали. Причем тут вообще БЭМ, непонятно. БЭЕМ методология верстки, может быть реализована как на Sass/SCSS, так и на любом другом припроцессоре, более того, на чистом css, SCSS - конкретный препроцессор.

[Ярослав Иванов]

Никита Кит: wut ? Философия БЭМ - независимость.

[sim3x]

Никита Кит: footer

[Никита Кит]

Ярослав Иванов: что? это философия американцев. Стиль элемента должен лежать в блоке. Элемент ЗАВИСИТ от блока. Вне блока он не должен иметь смысла. Поюзай какнть bemtools с postcss pobem plugin - увидишь как должны компилиться стили по БЭМу

[Никита Кит]

sim3x: а footer не может быть автономным блоком? С чего бы...

[sim3x]

Никита Кит: может

Теперь подумаем, как будет смотреться класс футер в хеадере, меню справа, меню слева

[Никита Кит]

sim3x: а зачем мне его в хедер писать? Хедер такой же отдельный блок как и футер. А как ещё описывать хедер и футер на БЭМ? block1 и block2?

Answer 1

[dom1n1k]

Все работает так, как и должно. Откуда взято это "по идее"?

Comments

[Никита Кит]

от того, что я сделал вложенность в исходном коде. И она должна сохраниться

.footer{
  width: 100%;
  .plate{
    max-width: 1170px;
  }
}

...создаёт вложенность.

.footer{
  width: 100%;
  &__plate{
    max-width: 1170px;
  }
}

... не создаёт вложенность.

[dom1n1k]

А, в этом смысле... Ну может быть, какой-то смысл в таком поведении и есть в теории.
Однако же текущее поведение во-первых, документировано, а во вторых (поверьте) удобнее на практике, потому что это против БЭМ-а.
Если вложенность нужна обязательно (хотя, повторюсь, БЭМ это запрещает), то:

.footer{
  width: 100%;
  & &__plate{
    max-width: 1170px;
  }
}

[Никита Кит]

dom1n1k: БЭМ не запрещает вложенности. Блок не может быть в блоке. Вот что запрещает БЭМ. Все элементы и модификаторы должны быть вложены в блок. И если у тебя есть footer__plate - селекторы стилей должны быть .footer .footer__plate

[dom1n1k]

Я неточно выразился. Не вложенности вообще, а вот такой вложенности классов:
.block .block__element
То есть сами элементы конечно вкладываются. А вот стили в CSS-файле - нет. Потому что это получается уже избыточный каскад, с которым как раз и боролись, добавив в начало класса имя блока.

[Ankhena]

Никита Кит: БЭМ за уменьшение каскада. Если .footer__plate без .footer не существует, зачем каскад сдался?

[Артем Каюн]

Никита Кит: Нет. Вот тут РУССКИЙ Яндекс пишет про свою технологию https://ru.bem.info/methodology/quick-start/ Там все подробно и понятно, как и с амперсантом.

[Никита Кит]

dom1n1k: да, фокус с двойным амперсандом решает вопрос. Сейчас буду перепиливать. И, да, ты прав. Строго следуя методологии нужно элементы вкладывать в блок. Правда, как оказалось, объяснить подобное налетевшей толпе холиварщиков оказалось непросто)))

[Сергей delphinpro]

Никита Кит: Никитос, не надо ничего перепиливать! У тебя всё правильно сейчас. По Бэму и по феншую. Не порть код.

[Никита Кит]

Сергей: нет, на самом деле элементы нужно вкладывать в блоки, к которым они принадлежат. Я понимаю, что вряд ли в моей разметке появится .header > .footer__plate , но блин, с блочной вложенностью я буду дышать ровнее)))) И всем советую))) Ибо если .header > .footer__plate всё таки каким-то раком появится, в .footer__plate не должны упать стили элемента plate блока footer. Об этом говорит методология. Достаточно внимательно прочитать определение элемента.

[Сергей delphinpro]

Никита Кит: Вряд ли я вас смогу переубедить, но все-таки это вам нужно внимательнее перечитать методологию. Там черным по белому написано - одноуровневый css. В качестве селектора выступает только класс. Вложенность допускается при стилизации элемента при наличии модификатора на блоке.
У вас всё правильно было. Опасения ваши мне непонятны. Возможно вы еще не усвоили все тонкости методологии.

[Никита Кит]

Вложенность допускается при стилизации элемента при наличии модификатора на блоке.

Вот именно. Стилизации элемента. plate в данном случае элемент. Все элементы вложены в блок.

[Никита Кит]

Сергей: и, нет. Все тонкости я усвоил. Уже полтора года на БЭМе пишу. Скоро планирую начать писать на enb + bemtools. Отказаться от sass в пользу postcss + pobem. Уже пробую в песочнице. Тренькаюсь

[Сергей delphinpro]

Никита Кит:

Все тонкости я усвоил. Уже полтора года на БЭМе пишу.

Не верю (с)
Впрочем похуй. =)

[Никита Кит]

Сергей: не верь. Мне в принципе тоже пох =) Главное, что разница была заметна, когда я начал использовать БЭМ в проекте. Вся жопная боль багов от кода как будто вылетела в трубу. Методология сделала своё дело - она заслужила внимательного чтения доков)))) К тому же БЭМ не панацея. Как хочешь так и следуй.