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-itemis the block for this particular article preview on the Guardian homepage. Above there are three examples of an
- There are many elements named with
fc-item__contentmanaging the image and text of the block respectively.
- There are a number of modifiers used to adapt the initial block. For example:
- 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>