Может ли блок наследовать свойства или он должен быть полностью самодостаточным?

Question

[Muvka]

Здравствуйте. У меня есть блок title, который описывает, как должен выглядеть заголовок. Но проблема в том, что в каких то блоках текст в нём прижат к левому краю, в других он по центру, а в третьих он по центру только на определенном разрешении. Так вот, как правильно поступать в таком случае - писать миллион модификаторов для блока title или смешивать стили блока title и блока, в котором title является элементом? Просто вроде блоки должны быть самодостаточными.

Answer 1

[Realetive]

Раз родительский элемент управляет отступами, это явно свойства ( элемента ) родительского блока.
Когда возникают такие дилеммы, нужно просто задать блоку / элементу вопрос: «А кто назначил тебе это правило?» и всё становится понятно — какие-то свойства отъезжают в модификатор, какие-то — в элемент внешнего блока.

Общие стили:

.title { display: block }
.title_align_left { text-align: left }
.title_align_right { text-align: right }
.title_align_center { text-align: center }

Элемент прижат к левому краю (модификатор .title_align_left добавил для наглядности):

.card
  .card__title.title.title_align_left

— card__title „говорит“: «внутри меня лежит блок title с модификацией align в значении left»

Элемент прижат к правому краю:

.card
  .card__title.title.title_align_right

— card__title „говорит“: «внутри меня лежит блок title с модификацией align в значении right»

Элемент выровнен по центру:

.card
  .card__title.title.title_align_center

— card__title „говорит“: «внутри меня лежит блок title с модификацией align в значении center»

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

.card__title { text-align: right }
@media (min-width: 720px) {
  .card__title { text-align: left }
}

.card
  .card__title.title

— card__title „говорит“: «внутри меня лежит блок title, но я сам управляю его align»

Надеюсь, аналогия ясна.

Comments

[Muvka]

Ну вы опять же предложили оба варианта, что я перечислил. А хочется выбрать один, более правильный)

[Realetive]

Muvka, правильного варианта нет (как и ошибочного) — всё зависит от ситуации. Поэтому я и привёл оба примера — у вас в каждом конкретном случае какой-то из них. Если хватает модификатора title_align_* — используйте его. Если нужно бо́льшей «динамики» (дополнительные правила на брейкпоинтах, переопределение и добавление CSS-свойств) — используйте сочетание CSS-каскада и миксов (последний пример). Это и есть правильное решение.

[Muvka]

Realetive, Спасибо вам за ответ!