Как красиво верстать такое (без дублирования кода)?

Всем привет!

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

В лендингах часто встречается такая конструкция (не поленился нарисовать):

f28e6d8d58054623b1ad3f0271fa2fba.png

Интересуют несколько вещей, которые хочется сделать красиво, так сказать DRY:

1) Заголовок и текст после этого заголовка вроде бы повторяется в секциях (обвёл красным), но то цвет у них другой, то черта после заголовка, то ширина текста разная, то у заголовка отличается font-style... В общем есть различия. Какими блоками/классами их обрамить в каждом конкретном случае, чтобы написать красивый недублируемый css?

2) Вопрос по секциям с повторяющимся серым фоном: добавить класс bg-grey с соответствующим backgroudn-color? Как-то не красиво

3) Вопрос по последней секции: допустим в лендинге такая секция одна единственная, хотя вообще ничем не отличается от других, кроме как padding-bottom и padding-top. Тут вроде бы css инлайн направшивается сам собой, но за такое принято отрывать руки. Как тут сделать красиво? Заводить ради одной секции особенный класс?

Данные вопросы волнуют меня довольно давно, верстаю такие ситуации как попало, по настроению, так как знаю, что css наука не точная. Кроме того знаком (поверхностно) с BEM, OOCSS и SMACSS, но как то не довелось окончательно в них углубиться.

Также думаю, у меня вообще какой-то кривой подход к вёрстке, раз меня мучают такие вопросы...

В общем буду рад любым советам!
Спасибо!

UPD: моё извращённое понимание БЭМа в данной ситуации. codepen.io/anon/pen/qdVKqy
Понимаю что криво, пожалуйста, ткните носом, в чём мои ошибки?
  • Вопрос задан
  • 1872 просмотра
Решения вопроса 3
Serj-One
@Serj-One
i'm sexy and i know it
На все вопросы один ответ - блок__элемент--модификатор
Полная документация БЭМ
Краткая статья на тему
Ответ написан
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
Почитайте про БЭМ. Для выделенных элементов у вас будет один блок, в котором есть элементы:

.intro {}
.intro__heading{}
.intro__text{}
.intro__call-to-action{}


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

различия в оформлении в этом случае делаются через модификаторы:

.intro--gray {background-color: #efefef}
.intro--wide {padding: 100px 0; }


смысл примерно такой.
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Перекрывающий класс описываете и подключаете поверх базового когда необходимо
делов то)
.mybox{ display:inline-block; color:#EEE; margin:20px;padding:20px}
.mybox.red{  color:#E22;}

Пишем стиль
<div class="mybox red">Как-то так!</div>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы