Как лучше модифицировать блок в html(pug)/css(scss)?

Question

[freeman0204]

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

У меня вариант такой .c1.c2 – элементы одновременно с двумя классами c1 и c2 дописать до копии блока(родительского) еще один класс и в модифицируемых стилях уже писать 2 класса рядом и изменять стили.

Что предложите? Главной что бы код был читаемым и чистым.

Answer 1

[Александр Беляков]

Попробуйте создать базовый класс. Он будет задаваться всем блокам, там будут храниться общие свойства. Затем создайте подклассы которые будут дополнять базовый и при необходимости переопределять приоритет, если будет наслоение. Хотя при грамотной логике такого быть не должно. Это с использованием чисто html/css.

Answer 2

[Евгений Карпов]

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

.t1,.t2{
...
}
.t1{
...(t1)
}
.t2{
...(t2)
}
а было бы более правильно применить общие классы через вызов общего класса как для первого, так и для второго класса в html

Answer 3

[Skrolea]

Я дописываю еще один класс дополнительный
codepen.io/TsarS/pen/aJpKmN

+card({__class:'card news__card',image:'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg'})
     +card({__class:'card article__card',image:'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg'})