Как стилизовать блок контента?

Question

[Дмитрий]

Хочу спросить совета у бывалых верстальщиков: вот структура страницы сайта prntscr.com/gg2v5g . В блоке .main есть абзацы с line-height=15 и line-height=22, есть заголовки с отступами и 20px и 50px на разных страницах. Подскажите, для такой разношерстной стилизации вы внутри .main создаете вложенные классы для каждой страницы, или добавляете еще один класс к .main. А к чему такой вопрос? Верстаю сайт и на странице "О компании" абзацы серые с font-size=12px,line-height=16px, а на странице записей font-size=16px, font-size=22. В результатах поиска карточка товара высотой 250px, а в каталоге товаров - 270px, в остальном карточки идентичны. Подскажите, как организовать этот момент. Спасибо.

Comments

[ой всё]

вы хотите, чтобы вам посоветовали, не видя кода?

[Дмитрий]

AnneSmith, я думал скрина должно хватить, что бы подсказать логику. К примеру, задать один общий стиль для заголовков и абзацев, а потом к .main добавить еще один класс и переопределять стили для каждой странице, соответствующей классу. Я думаю для этого код не нужен.

[Ankhena]

Дмитрий, добавлять классы к конкретным элементам.

я думал скрина должно хватить, что бы подсказать логику.

скрин обалдеть какой информативный, я думала там макет, а там кэп порисовал.

[Дмитрий]

Я так понял практической помощи не стоит ожидать, а БЭМ я изучил

[Ankhena]

Дмитрий, Какой практической? Названия классов за вас выдумать? Так вопрос не в этом был, а на ваш вопрос ответили.

[Дмитрий]

Ankhena W, вопрос в том,создать ли новый блок,вложенный в .main, или лучше добавить еще один клас к .main и таким образом переопределить стили.

[Ankhena]

Дмитрий, вроде по-человечески написала

добавлять классы к конкретным элементам.

странице записей font-size=16px, font-size=22.

<p class="main-text"></p>
<p class="normal-text"></p>

.normal-text {font-size=16px}
.main-text {font-size=22px}

Если так нельзя, то естесственно еще один класс к main, а не городить лишнюю бессмысленную обертку.

[Дмитрий]

Ankhena W, вооооот, спасибо большое за понимание)

[Дмитрий]

Ankhena W, перепешите это в ответы и я отмечу решением

Answer 1

[Андрей Кварцов]

Если я правильно понял.. Не проще ли делать так:

<section class="main">
 <div class="*">

 </div>
</section>

* вместо звёздочки на каждой странице меняйте класс с нужными стилями

Comments

[Дмитрий]

Вы именно так верстаете?

[Андрей Кварцов]

Если просто блоки то:

<section class="name">
 <div class="name__wrap">
   // Контент секции
 </div>
</section>

Если страницы генерируются CMS:

хедер
<section class="content">
 <div class="content__wrap">
   <div class="page-name">
      // контент страницы
   </div>
 </div>
</section>
футер

Answer 2

[Сергей Горячев]

Изучай БЭМ, не выноси мозг себе и окружающим.