Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS BEM Markup for Nested Accordion

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #246237
    rhsyg03
    Participant

    Hey BEM’ers,

    What way would be best to handle the following?

    I want to slightly modify the styles for accordion_link and accordiom__icon in the submenu.

    • Using accordion__link–level-2 seems strange as it’s a permanent fixture of the accordion.
    • New class accordion__link-level-2 seems a waste since only the padding is different.
    • Creating a new block doesn’t seem right as the sub-menu will only be used in this menu.
    <div class="accordion">
        <a class="accordion__link">
            <span class="accordion__title"></span>
            <div class="accordion__icon"></div>
        </a>
        <!--sub menu -->
        <div style="display:none;">
            <a class="accordion__link">
                <span class="accordion__title"></span>
                <div class="accordion__icon"></div>
            </a>
        </div>
    </div>
    
    #246243
    Krish1980
    Participant

    New class accordion__link-level-2 seems a waste since only the padding is different.

    But it would be chained with the class accordion__link, and therefore only have the padding difference in the css (and therefore, the modifier part in the class name). And I don’t think BEM users care much about additional classes since the trade-off is re-usability and scalability.

    If the idea doesn’t appeal to you for the scenario described (considering that this difference in styling would appear only in one component), you could always style the submenu using plain-ol context styling. I doubt BEM proponents are a pedantic lot, and imo , practicality should always prevail over purism.

    Please Note:

    I’d separate the modifier using -- (double hyphens) instead of just a single hyphen to distinguish it from the element.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.