Поскольку здесь больше пространства, расскажу подробнее.
Иногда, особенно в последнее время часто вижу как применяется наследование, то есть повторяются одни и те же классы, перед тем как прописать иной класс. Чтобы лучше донести до вас свою мысль, приведу простые примеры. Сам же вопрос находится в самом низу.
Есть код в HTML, например такой:
<section class="advantage">
<div class="container">
<div class="advantage__main">Бла-бла-бла</div>
<div class="title">Бла-бла-блаБла-бла-блаБла-бла-бла</div>
<div class="row">
<div class="col-md-6">
<div class="advantage__round">
<div class="advantage__circle">
<img src="что-то там" alt="что-то там" class="advantage__img">
</div>
<div class="advantage__header">
<div class="advantage__title">Бла-бла-блаБла-бла-блаБла-бла-блаБла-бла-бла</div>
<p class="advantage__subtitle">Бла-бла-блаБла-бла-блаБла-бла-блаБла-бла-блаБла-бла-блаБла-бла-блаБла-бла-блаБла-бла-бла и так далее</p>
</div>
</div>
</div>
</div>
</section>
В CSS происходит стилизация кода. Например такой:
.advantage {
min-height: 800px;
padding: 250px 0 190px 0;
}
.advantage .advantage__main {
margin: 0 auto;
width: 112px;
height: 24px;
background-color: #000000;
text-align: center;
line-height: 35px;
color: #ffffff;
font-size: 15px;
font-weight: 300;
text-transform: uppercase;
}
.advantage .title {
margin: 60px 0 24px 0;
text-align: center;
color: #ffffff;
font-size: 70px;
font-weight: 900;
text-transform: uppercase;
}
.advantage .advantage__round {
display: flex;
justify-content: center;
align-items: center;
margin-top: 19px;
}
.advantage .advantage__circle {
display: flex;
justify-content: center;
align-items: center;
border-radius: 43%;
width: 400px;
height: 232px;
background-color: #777777
}
.advantage .advantage__round .advantage__header {
color: #202020;
margin-left: 42px;
width: 625px;
font-size: 15px;
font-weight: 300;
}
.advantage .advantage__round .advantage__header .advantage__title {
color: #67f30a;
font-size: 17px;
font-weight: 400;
}
.advantage .advantage__round .advantage__header .advantage__subtitle {
font-weight: 600;
line-height: 30px;
}
Сам же мой вопрос касается смысла повторения классов, и какой в смысл в этом? Дело в том, что я попробовал писать без подобного наследования, и вроде как всё нормально работало. То есть, писать не так, как приведено выше, а вот так:
.advantage {
min-height: 800px;
padding: 250px 0 190px 0;
}
.advantage__main {
margin: 0 auto;
width: 112px;
height: 24px;
background-color: #000000;
text-align: center;
line-height: 35px;
color: #ffffff;
font-size: 15px;
font-weight: 300;
text-transform: uppercase;
}
.title {
margin: 60px 0 24px 0;
text-align: center;
color: #ffffff;
font-size: 70px;
font-weight: 900;
text-transform: uppercase;
}
.advantage__round {
display: flex;
justify-content: center;
align-items: center;
margin-top: 19px;
}
.advantage__circle {
display: flex;
justify-content: center;
align-items: center;
border-radius: 43%;
width: 400px;
height: 232px;
background-color: #777777
}
.advantage__header {
color: #202020;
margin-left: 42px;
width: 625px;
font-size: 15px;
font-weight: 300;
}
.advantage__title {
color: #67f30a;
font-size: 17px;
font-weight: 400;
}
.advantage__subtitle {
font-weight: 600;
line-height: 30px;
}
Или, может быть я просто чего-то не понимаю? Сколько думаю на тему, даже в интернете пытался найти ответ, но из-за неспособности задать правильный вопрос, не могу получить нормальный ответ.
Средний
