Правильно задать отступы между элементами в статье

[Svetlana_P]

Добрый день!
В верстке мало опыта. Ищу универсальный и лаконичный способ описания вертикальных отступов в статье. Имею ввиду margin у заголовков, абзацев и списков. Поддерживая сайты со своей и чужой версткой часто сталкивалась, что где-то не доработано, и приходилось плодить новые правила.

Чтобы итоговая верстка проходила по критериям:

• отступы у h1, h2, ..., p, ul, ol и всех их комбинаций между собой предсказуемы и правильны, с соблюдением принципа внутреннего и внешнего;
• тег первого идущего в статье заголовка можно легко заменить на другой (например, h1 на h2), не испортив дизайн;
• набор классов у элементов статьи сведен к минимуму;
• набор правил CSS относительно лаконичен.

Хочется найти "золотую середину". Чтобы и код не раздувать, но при этом описать все, что надо.

Исследовала вопрос, погуглив и посмотрев код разных сайтов, где, по идее, должно быть сделано аккуратно. Пришла к выводу, что нет одного "правильного" способа. Везде реализовано по-своему. Где-то больше классов задействуют, где-то меньше. На одном аж у каждого элемента подобный набор классов "graf graf--p graf-after--h3". Может, это фреймворк какой, и там уже все описано.

Прошу уважаемых коллег поделиться своими способами.

[Nibaluiso]

Верстайте по БЭМу и не заморачивайтесь)

[Schamil74]

Попробуйте фреймворк по БЭМ - https://getmdl.io/

 

[Svetlana_P]

Всем спасибо! Так и поступлю.