Complex BEM classes (lots of divs)

[grimski]

So I decided to see what the BEM naming convention was all about. Finding it quite difficult to get my head around – especially since I’ve always been an advocate of clean, simple mark-up with as little divs and classes as possible – so it’s quite a change!

I also couldn’t of picked a worse site to start on as there are so many different ‘unique’ layouts and multiple navigation elements.

The website is for selling music tracks. Though I’m having a few problems, this one’s specifically to do with the track list/index (essentially a list of products). It has quite a complicated layout and uses many divs. I’m not experiences at all on this practice, so I was hoping I could get some help/advice from others.

I’m aware people use this method in different ways. I liked the sound of Harry Roberts approach (for reference: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax)

Also trying to use this as a guide: http://cssguidelin.es

Main problem is I can’t find any examples of BEM quite as complicated as my mark-up!

Speaking of the mark-up, here it is:

<div class="track-index">

    <ul class="track-index__head">
        <li class="track-index__title track__item--play"></li>
        <li class="track-index__title track__item--name">Track name</li>
        <li class="track-index__title track__item--composer">Composer</li>
        <li class="track-index__title track__item--duration">Duration</li>
        <li class="track-index__title track__item--bmp">Tempo <abbr>(bpm)</abbr></li>
        <li class="track-index__title track__item--loops">Loops</li>
        <li class="track-index__title track__item--edits">Edits</li>
        <li class="track-index__title track__item--options">Options</li>
    </ul>

    <!-- Start TRACK -->
    <div class="track">

        <!-- Start PRIMARY -->
        <div class="track__primary">
            <div class="track__item track__item--play">
                <a title="TITLE TEXT" class="track__btn track__btn--play"></a>
            </div>
            <h2 class="track__item track__item--name"><a href="#" title="TITLE TEXT">Name of Track</a></h2>
            <h3 class="track__item track__item--composer"><a href="#" title="TITLE TEXT">Composer name</a></h3>
            <div class="track__item track__item--duration">02:00</div>
            <div class="track__item track__item--bmp">120</div>
            <div class="track__item track__item--loops">7 loops</div>
            <div class="track__item track__item--edits">6 edits</div>
            <div class="track__item track__item--options">
                <a href="#" title="TITLE TEXT" class="track__btn track__btn--expand">Expand</a>
                <a href="#" title="TITLE TEXT" class="track__btn track__btn--share">Share</a>
                <a href="#" title="TITLE TEXT" class="track__btn track__btn--playlist">Add to playlist</a>
                <a href="#" title="TITLE TEXT" class="track__btn track__btn--favourite">Add to favourites</a>
                <a href="#" title="TITLE TEXT" class="track__btn track__btn--download">Download</a>
                <a href="#" title="TITLE TEXT" class="track__btn track__btn--basket">$80.00</a>
            </div>
        </div>  
        <!-- End PRIMARY -->                    
        <!-- Start SECONDARY -->
        <div class="track__secondary">
            <div class="track__item track--item__info">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                <dl class="dl-horizontal">
                    <dt>Genres</dt>
                    <dd><a href="#">Lorem</a>, <a href="#">ipsum</a>, <a href="#">dolor</a>, <a href="#">sit</a>, <a href="#">amet</a>, <a href="#">consectetur</a>, <a href="#">adipiscing elit</a></dd>
                    <dt>Mood/emotions</dt>
                    <dd><a href="#">Lorem</a>, <a href="#">ipsum</a>, <a href="#">dolor</a>, <a href="#">sit</a>, <a href="#">amet</a></dd>
                    <dt>Keywords</dt>
                    <dd><a href="#">Lorem</a>, <a href="#">ipsum</a>, <a href="#">dolor</a>, <a href="#">sit</a>, <a href="#">amet</a>, <a href="#">consectetur</a>, <a href="#">adipiscing elit</a></dd>
                </dl>
            </div>
            <div class="track__item track__item--loops">
                <ul class="track-list">
                    <li class="track-list__item"><a href="#">Loop 1</a></li>
                    <li class="track-list__item"><a href="#">Loop 2</a></li>
                    <li class="track-list__item"><a href="#">Loop 3</a></li>
                    <li class="track-list__item"><a href="#">Loop 4</a></li>
                    <li class="track-list__item"><a href="#">Loop 5</a></li>
                </ul>
            </div>
            <div class="track__item track__item--edits">
                <ul class="track-list">
                    <li class="track-list__item"><a href="#">Edit 1</a></li>
                    <li class="track-list__item"><a href="#">Edit 2</a></li>
                    <li class="track-list__item"><a href="#">Edit 3</a></li>
                </ul>
            </div>                  
        </div>  
        <!-- Send SECONDARY -->                 
    </div>
    <!-- end TRACK -->              

</div>

Here’s also a wireframe of the layout on different devices. As you can see, it is quite complex and the many divs are needed for alignment of each section and how the display on different screen widths.

http://i264.photobucket.com/albums/ii195/grimaldi360/Web%20design%20issues/wireframe-2.jpg

Thanks, really hope someone can help (if needed) here!

[Author]

Posts