Css бьет блок внутри блока именование

Question

HTML компоновке

<div class="site-header"> 
    <ul class="site-header__social social"> <!-- block --> 
    <li class="social__li">social icon here</li> 
    <li class="social__li">social icon here</li> 
    </ul> 
</div> 

<div class="post"> 
    <ul class="post__social social"> <!-- block --> 
    <li class="social__li">social icon here</li> 
    <li class="social__li">social icon here</li> 
    </ul> 
</div> 

<div class="site-footer"> 
    <ul class="site-footer__social social"> <!-- block --> 
    <li class="social__li">social icon here</li> 
    <li class="social__li">social icon here</li> 
    </ul> 
</div> 

Компоновки просто пример, мы добавим social класса к каждому из социального списка.

Каждый социальный блок имеет разный стиль, мы не можем просто использовать класс social в файле css.

Так что мне не нужно добавлять класс блока в социальный класс и использовать только класс элемента site-header__social, но что, если я хочу, чтобы он был блочным классом? любые предлагают назвать его блочным классом? Благодарю.

Answer 1

Вы все еще можете назвать это social, а также добавить модификатор, чтобы описать различия в стилизации. Так было бы так:

<div class="site-header"> 
    <ul class="site-header__social social social_type_header"> <!-- block --> 
    <li class="social__li">social icon here</li> 
    <li class="social__li">social icon here</li> 
    </ul> 
</div> 

<div class="post"> 
    <ul class="post__social social social_type_post"> <!-- block --> 
    <li class="social__li">social icon here</li> 
    <li class="social__li">social icon here</li> 
    </ul> 
</div> 

<div class="site-footer"> 
    <ul class="site-footer__social social social_type_footer"> <!-- block --> 
    <li class="social__li">social icon here</li> 
    <li class="social__li">social icon here</li> 
    </ul> 
</div>