Для чего нужно наследование, если можно обойтись без него?

Question

[Даниил Кочкин]

Поскольку здесь больше пространства, расскажу подробнее.

Иногда, особенно в последнее время часто вижу как применяется наследование, то есть повторяются одни и те же классы, перед тем как прописать иной класс. Чтобы лучше донести до вас свою мысль, приведу простые примеры. Сам же вопрос находится в самом низу.

Есть код в 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;
}

Или, может быть я просто чего-то не понимаю? Сколько думаю на тему, даже в интернете пытался найти ответ, но из-за неспособности задать правильный вопрос, не могу получить нормальный ответ.

Comments

[WapSter]

Это какой-то е*анутый БЭМ. Предполагаю, это из-за того, что БЭМ становится популярным, и некоторые верстальщики используют его не позаботившись о том, чтобы прочесть документацию и понять ее.

[Rustam Bainazarov]

.advantage .advantage__round .advantage__header .advantage__subtitle {

}

Это — не BEM. Он призван избавиться от вложенности там, где это возможно, а у вас всё наоборот.

[Andrey Vasilev]

Тимур Турсунбаев, Е-БЭМ?

[Ankhena]

Для чего нужно наследование, если можно обойтись без него?

В такой формулировке - ни за чем не нужно.

Такое наследование получается от неверного использования препроцессора или просто каши в голове.

Answer 1

[Алекс Глебов]

наследование было в smacss
в беме от него ушли
почитайте про методологии
https://html5.by/blog/bem-amcss-oocss-atomiccss-op...
https://ru.bem.info/

Comments

[sim3x]

в беме от него ушли

бем произошел от Lego и в нем изначально намеренно избегали длинных цепочек классов в связи со спецификой ие6-7
Насколько я помню лего и smacss возникли в одно время независимо друг от друга

Answer 2

[VegasChickiChicki]

Если я правильно понял, то вот пример:

.header .active{ color: red; }
.main .active{ color: white;}

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

P.S. Так лучше не делать, в комментариях объяснили почему :)

Comments

[WapSter]

Как раз в больших проектах, так лучше не делать)

[VegasChickiChicki]

Тимур Турсунбаев, Почему, объясните, может я перестану так делать, я пока не вижу проблем.

[Rustam Bainazarov]

VegasChickiChicki, так делать — плохо, LOL. Где-то случайно добавили такой класс (который должен быть модификатором), забыли про наследование — и всё поломали.

[WapSter]

VegasChickiChicki, если не видите, значит не поддерживали большой проект, ну или даже не видели больших.

[Алекс Глебов]

Плохо в том, что если класс active понадобится в другом месте - то его не перенесешь, так как он привязан к родителю. Еще если есть в другом месте класс .active {} то он будет действовать на .main .active{ color: white;} хотя это не очевидно.
В общем если масштабировать такую верстку, то это сплошная боль, надо все такие места распутывать.
и изменив что то в одном классе не знаешь где это унаследуется и что то поломается.

[Виталий Першин]

VegasChickiChicki, Потому что как раз при расширении или пере использовании ваш проект начинает трещать по швам, вместо того чтобы просто где-то добавить новый элемент или модификатор, вы начинаете городить кучу костылей по собственной глупости. Простой пример, который часто встречается в меню. Предположим у вас есть список пунктов:

<ul class="menu">
    <li class="item active">Плохо</li>
    <li class="item">Плохо</li>
<ul>

.menu .active {color: red}
Есть и хорошо, но, теперь нам надо добавить вложенный список:

<ul class="menu">
    <li class="item active">
        Плохо
        <ul>
            <li class="item active">еще хуже</li>
            <li class="item">еще хуже</li>
        <ul>
    </li>
    <li class="item">Плохо</li>
<ul>

Но цвет внутренних пунктов активных классов должен быть другой. Тут уже сама ситуация заставит выкручиваться. Выкрутиться не сложно, но в этом месте начинаются лишние движения, время нервы и не очевидные проблемы. Обычно начинается что-то вроде этого:

.menu .active {color: red}
.menu ul li  .active {color: green}

Это же просто прекрасный код, которому место на помойке, но ладно едем дальше.
Вдруг мы решили перенести наше меню из header в sidebar, а там уже прописано что-то типа:
.sidebar div .active {color: blue}
Думаю нет смысла продолжать, кто знает, тот поймет. Это просто адская забава из кастылей и палок.