Какой дать класс для позиционирования элементов с одинаковыми стилями, которые позиционируются по-разному в зависимости от страницы?

Question

[Атланта]

В именовании классов по БЭМ важен блок-контейнер для элемента. А есть какой-нибудь аналогичный принцип только для элементов на разных страницах? Т.е. элементы с одинаковыми стилями позиционируются по-разному в зависимости от страницы, на которой они находятся. Как мне прописать классы, чтобы это не было плохой практикой?
Думаю, мне нужно что-то вроде этого:

.index__button {
    margin: 20px 30px;
}
.contact__button {
    margin: 40px auto;
}

Comments

[sim3x]

Используйте препроцессоры и не морочьте себе голову

[BigSmoke]

У вас эта кнопка в разных блоках на этих двух страницах находится?

[Атланта]

BigSmoke, они расположены в .content. Я понимаю, как решить это проблему, если бы они располагались в разных блоках)

[Атланта]

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

[sim3x]

Atlanta_Boston,

Требуется уточнение - блоки различаются на разных страницах?
Что такое contact__button index__button ?

[Атланта]

sim3x, .content - это class блока, где расположена кнопка. Но она есть на разных страницах, страница contact.html и index.html. Поэтому я предположила, что если кнопки отличаются только страницами, то это различие и можно указать в классе, я понимаю, что так не пишут, но мне надо как-то решить этот момент с позиционирование одинаковых элементов на разных страницах.

[sim3x]

Atlanta_Boston,

модификатор -

.someblock__btn
  // btn base styles for all pages
  &--indexpage
    // modification btn for index page

Answer 1

[BigSmoke]

Наверное в вашей ситуации нужно задать родителю(блоку) два класса-микса.

Выглядить это будет так:

.button <-- это ваша кнопка
	какие-то стили
	этой кнопки        
	
.content <-- это блок, в котором она будет находится на обеих страницах
	какие-то стили
	этого блока
	
	&__contact-button
		margin 40px auto
		
	&__index-button
		margin 20px 30px

Далее в index.html вставляете эту кнопку так:

<button class="button content__index-button">a</button>

А в contact.html так

<button class="button content__contact-button">b</button>