design2 – BEM Breakdown

Find a website that uses the BEM naming strategy for their classes. Within the site, chose and breakdown a particular component identifying the primary classes that are used for the component’s block name, elements, and modifiers. Your breakdown should include the following:

• A set of screenshots which identify the block and its primary elements. I recommend you use the Chrome element inspector to help with this screenshot/identification process.

• A description of the block, element, modifier naming pattern. You do not have to list every single class in your example, just some representative ones. From the above example:
  • fc-item is the block for this particular article preview on the Guardian homepage. Above there are three examples of an fc-item block.
  • There are many elements named with fc-item__media-wrapper and fc-item__content managing the image and text of the block respectively.
  • There are a number of modifiers used to adapt the initial block. For example: fc-item--has-image, fc-item--pillar-lifestyle, and fc-item--type-feature.
• A block of code that you’ve typed that gives the nesting of the tags with classes used. You don’t have to actually style with CSS any of these classes, only show the representative portions of HTML for your component and the BEM classes. Again for the above example:

    <div class="fc-item fc-item--has-image fc-item--pillar-lifestyle fc-item--type-feature
    fc-item--standard-mobile fc-item--third-tablet">
        <div class="fc-item__container">
            <div class="fc-item__media-wrapper">
                <div class="fc-item__image-container">
                    <img src="" alt="" class="responsive-img">
                </div>
            </div>
            <div class="fc-item__content">
                <div class="fc-item__header">
                    <h3 class="fc-item__title">
                        <a href="#" class="fc-item__link">
                            <span class="fc-item__kicker">How we met/</span>
                            <span class="fc-item__headline">
                                 'He said: "We could just get married." 
                                  I said: "Oh yeah, cool."'
                            </span>
                        </a>
                    </h3>
                    <div class="fc-item_standfirst-wrapper">
                        <div class="fc-item__standfirst">Carmena Su, 47, and James Wvinner, 64, live in
                            Blenheim, New Zealand, with their seven-year-old-daughter. They both work as
                            yoga teachers, and run a film production company.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>