Да, всё верно! Есть пару советов, основанных уже на личном опыте:
1. Абсолютно справедливо наблюдение про вынесение текстовых закономерностей в самостоятельный блок. Блок
text отлично подходит. Но если семантически (и в дизайне) этот текст соответсвует
заголовку (жирность, бо́льший размер шрифта, можно использовать тег
<h1-h6>), то я завожу отдельный блок
heading. Если используется шаблонизатор (React, Pug, Handlebars, etc.), то задание тега удобно ещё положить в
…/heading/heading.<jsx | tsx | pug | html | yet-another-templater>
. Тогда микс будет более «семантичным» тоже:
/* …/heading/heading.css */
.heading {
font-weight: bold;
}
/* …/heading_size/heading_size.css */
.heading_size_s {
font-size: 18px;
}
.heading_size_m {
font-size: 24px;
}
.heading_size_x {
font-size: 28px;
}
Ну и просто для наглядности:
/* …/header/header.css */
.header {
padding: 4px;
text-size: 20px;
}
/* …/header/__text/header__text.css */
.header__text {
margin-bottom: 20px;
}
<div class="header">
<h3 class="header__text heading heading_size_x">
Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
</h3>
</div>
/* …/presentation/presentation.css */
.presentation {
padding: 6px;
background-color: #000;
color: #ffff;
}
/* …/presentation/__text/presentation__text.css */
.presentation__text {
margin-bottom: 20px;
color: #123;
}
<div class="presentation">
<h4 class="presentation__text heading heading_size_m">
Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
</h4>
</div>
/* …/description/description.css */
.presentation {
padding: 11px;
border: 1px solid #000;
border-radius: 4px;
}
/* …/description/__text/description__text.css */
.presentation__text {
margin-bottom: 16px;
text-transform: uppercase;
}
Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
NB! У каждого
heading оказался свой размер (модификация
heading_size_*) и свой тег (
<h1-h6>), но вполне может быть и
<h1 class="heading heading_size_s">Самый главный заголовок, но мелким шрифтом</h1>
<h6 class="heading heading_size_xl">Заголовок под-под-подраздела, но крупным шрифтом</h6>
2. Если же это просто текст (подзаголовок, описание раздела, мета-информация), то просто модификация текста тоже сработает:
/* …/text/text.css */
.text {
padding: 11px;
border: 1px solid #000;
border-radius: 4px;
}
/* …/text/_weight/text_weight.css */
.text_weight_bold {
font-weight: bold;
}
/* …/text/_style/text_style.css */
.text_style_italic {
font-style: italic;
}
/* …/text/_decoration/text_decoration.css */
.text_ transform_uppercase {
text-transform: uppercase;
}
<div class="header">
<div class="header__text text text_weight_bold">
Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
</div>
</div>
<div class="presentation">
<div class="presentation__text text text_style_italic">
Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
</div>
</div>
<div class=" description">
<div class=" description__text text text_weight_bold text_ transform_uppercase">
Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Illo sunt iure aperiam sint dolor suscipit aut, delectus nesciunt officiis assumenda iusto quisquam libero similique, ex culpa porro vitae? Enim, qui.
</div>
</div>
Средний
