@KaizDA

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

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

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

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


Или, может быть я просто чего-то не понимаю? Сколько думаю на тему, даже в интернете пытался найти ответ, но из-за неспособности задать правильный вопрос, не могу получить нормальный ответ.
  • Вопрос задан
  • 170 просмотров
Решения вопроса 1
SkiperX
@SkiperX Куратор тега CSS
наследование было в smacss
в беме от него ушли
почитайте про методологии
https://html5.by/blog/bem-amcss-oocss-atomiccss-op...
https://ru.bem.info/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@VegasChickiChicki
Если я правильно понял, то вот пример:
.header .active{ color: red; }
.main .active{ color: white;}

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы