Block, element, modifier
Block, Element, Modifier (BEM) is a tool for software development on the Internet , i.e. a design pattern to display a website to users via the frontend . With its naming convention, the BEM method simplifies the development of user interfaces ( web interfaces ) in larger projects. In addition, BEM increases the performance of the web browser by making the image synthesis reusable in the HTML renderer .
BEM was developed between 2007 and 2009 by the Russian search engine operator Yandex .
concept
In BEM, the Hypertext Markup Language , the usual HTML of a website , is divided into blocks and elements. Elements only exist within a block, blocks can also exist in other blocks. The modifiers change the representation of the elements and blocks.
An example is Pinterest , an online pinboard for graphics and photographs with an optional social network and visual search engine.
block
The block is an HTML unit that exists regardless of where it is used. Usually blocks HTML elements included to navigation (nav) to header ( header ), footer ( footer ) or unordered lists <ul>. Further blocks can be defined if they have properties that are used in a specific application.
element
The elements also consist of HTML, but are bound to a block, e.g. B. the list elements <ul> or <ol> and <li>. Whether a certain object becomes an element or a block on the web page depends on the context. If the object is to be used independently of the surrounding block, it should not be an element, but a block. Conversely, if the object is not reused and can only be used in the context of a block, it is created as an element.
Modifier
Modifiers are used for small changes in the design of blocks and elements. These instructions belong to the HTML elements and they determine the appearance of the website. For example, they affect the format of a button , the color variant or the size. They are implemented using Cascading Style Sheets (CSS). Good modifiers are an essential part of BEM.
Naming convention
The naming convention in BEM is at the core of the design pattern. It is used to create a flat CSS hierarchy. CSS classes are structured as follows in BEM:
.block{}
.block--modifier{}
.block__element{}
.block__element--modifier{}
The separators between block and element, as well as between block / element and modifier, are freely selectable. If they deviate from the standard, a separator must be selected that does not appear in the normal class designation.
BEM-based frameworks
There are a variety of CSS frameworks based on BEM. A well-known implementation is inuit.css by Harry Roberts.
Application example
The example shows the restructuring of the code of the Pinterest homepage.
A mosaic-like composite graphic is a tile graphic , the individual blocks and elements are called tiles. The standard tile looks like this:
.tile-grid__item{}
.tile{}
.tile__description{}
.tile__author{}
.tile__image{}
.tile__author-title{}
.tile__author-description{}
.tile__author-image{}
The blocks and elements as well as their modifiers of a featured tile are:
.tile-grid__item{}
.tile{}
.tile__author--featured{}
.tile__author-title{}
.tile__author-description--featured{}
.tile__author-image--featured{}
.showcast{}
.showcast__big-image{}
.showcast__small-image{}
.button--white{}
.text-link{}
.flat-button--white{}
The class name shows that the blocks were written for reusability. The Block Showcast can also be used in a completely different context, for example in a blog article.
The following example shows the complete HTML markup for the Featured Tile and for the Standard Tile including the grid. The tile-grid serves as an interface and wrapper software for all tiles, which simplifies their positioning on the website.
<div class="tile-grid">
<div class="tile-grid__item">
<div class="tile">
<div class="tile__author--featured">
<div class="tile__author-image--featured">
<img src="path/to/image">
</div>
<div class="tile__author-title--featured">
Design
</div>
<div class="tile__author-description--featured">
Desi Themsfeldt
</div>
</div>
<div class="showcast">
<div class="showcast__big-image">
<img src="path/to/image">
</div>
<div class="showcast__small-image">
<img src="path/to/image">
</div>
<div class="showcast__small-image">
<img src="path/to/image">
</div>
<div class="showcast__small-image">
<img src="path/to/image">
</div>
</div>
<button class="button--white">
Pinnwand folgen
</button>
<a class="text-lin">
Weitere Ideen von Freunden
</a>
</div>
<button class="flat-button--white">
Freunde zum Pinnen einladen
</button>
</div>
<div class="tile-grid__item">
<div class="tile">
<div class="tile__image">
<img src="path/to/file">
</div>
<div class="tile__description">
Tasche JohnBoy by Elbmarie (freebook)
</div>
<div class="tile__author">
<div class="tile__author-image">
<img src="path/to/image">
</div>
<div class="tile__author-title">
Für dich ausgewählt
</div>
<div class="tile__author-description">
Nähen
</div>
</div>
</div>
</div>
</div>
In contrast, the HTML markup of the real Featured Tile from Pinterest has the following complex form:
<div class="FriendCenterMerchandising Module fixedHeight follow networkConnected" data-component-type="12001">
<div class="fallbackContent">
<div class="centered">
<a href="/find_friends/recommendations/?invite_src=homefeed_friend_center_merch" data-element-type="996">
<h2>Sammeln deine Freunde Pins, die dir gefallen?</h2>
<div class="sampleImage"></div>
</a>
</div>
</div>
<div class="suggestionContent">
<div class="FriendBoardRecommendationTiles Module cycler">
<div class="Module ModuleCycler default">
<div class="FriendBoardRecommendationTile Module boardUserCompact">
<div class="DiscoveryTile Module noContainer">
<div class="dismiss">
<div class="closeIcon"></div>
</div>
<div class="Module User boardRepTitle hasText thumb">
<a class="profileSource" href="/trdaisy/design/" data-element-type="52">
<div class="thumbImageWrapper">
<img src="https://s-media-cache-ak0.pinimg.com/avatars/trdaisy_1385371223_75.jpg"
alt="Desi Themsfeldt" title="Mehr von Desi Themsfeldt">
</div>
<h3 class="title">Design</h3>
<h4 class="fullname">
Desi Themsfeldt
</h4>
</a>
</div>
<div class="Board Module boardCoverImage draggable noContainer noContext">
<a href="/trdaisy/design/" class="boardLinkWrapper" data-element-type="36">
<div class="boardName">
<div class="name">
Design
</div>
</div>
<div class="boardCoverWrapper">
<span class="hoverMask"></span>
<img src="https://s-media-cache-ak0.pinimg.com/216x146/24/2d/74/242d744cecd607e24928dd0395cf219d.jpg"
class="boardCover" data-load-state="pending" alt="Design/von ">
<span class="boardPinCount">
<div class="Module PinCount">
<span class="pinIcon"></span>29
</div>
</span>
</div>
<ul class="boardThumbs">
<li>
<span class="hoverMask"></span>
<img src="https://s-media-cache-ak0.pinimg.com/75x75/d5/e7/cd/d5e7cdfad2ef8ed963af6a2b56215d5d.jpg"
class="thumb" data-load-state="pending">
</li>
<li>
<span class="hoverMask"></span>
<img src="https://s-media-cache-ak0.pinimg.com/75x75/96/73/d5/9673d5d69b4b3e4472a19219f710da44.jpg"
class="thumb" data-load-state="pending">
</li>
<li>
<span class="hoverMask"></span>
<img src="https://s-media-cache-ak0.pinimg.com/75x75/72/f0/b7/72f0b7cab11539d8e0fc28e0a416987b.jpg"
class="thumb" data-load-state="pending">
</li>
</ul>
</a>
<button class="BoardFollowButton Button FollowButton Module boardFollowUnfollowButton btn hasText notNavigatable rounded"
data-element-type="37" type="button">
<span class="buttonText">Pinnwand folgen</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<a class="seeAllFriends" href="/find_friends/recommendations/?invite_src=homefeed_friend_center_merch" data-element-type="996">
Weitere Ideen von Freunden
<div class="arrow"></div>
</a>
</div>
<div class="loadingContent">
<div class="caption">
Ideen von Freunden erkunden
</div>
</div>
</div>
The HTML markup of a standard tile in Pinterest looks like this:
<div class="Module Pin summary" data-component-type="0">
<div class="pinWrapper ">
<div class="bulkEditPinWrapper">
</div>
<div class="pinImageActionButtonWrapper">
<div class="repinSendButtonWrapper">
<button class="Button Module ShowModalButton btn primary primaryOnHover repinSmall rounded" data-element-type="0" type="button">
<em></em>
<span class="accessibilityText">Pin it</span></button>
<button class="Button DropdownButton Module btn hasText rounded sendSmall sendPinGrid" data-element-type="98" type="button">
<em></em>
<span class="buttonText">Senden</span>
</button>
</div>
<div class="likeEditButtonWrapper">
<button class="Button LikeButton Module PinLikeButton btn likeSmall rounded" data-element-type="1" data-source-interest-id="" type="button">
<em></em>
<span class="accessibilityText">Gefällt mir</span></button>
</div>
<a class="Button Module NavigateButton borderless hasText pinNavLink navLinkOverlay" data-element-type="162" href="http://djdodo-kreativ.blogspot.de/2016/01/rums-88-gute-nacht-johnboy.html?m=1" rel="nofollow" type="button">
<em></em>
<span class="buttonText">Mehr Infos: djdodo-kreativ.blogspot.de</span>
</a>
<div class="pinHolder">
<a href="/pin/574701602429560539/" class="pinImageWrapper draggable" data-element-type="35" style="background: #9a7774;">
<div class="pinDomain">djdodo-kreativ.blogspot.de</div>
<div class="fadeContainer">
<div class="pinImageDim">
<div class="dimOverlay"></div>
<div class="dimGradient"></div>
</div>
<div class="Image Module pinUiImage" style="width: 236px">
<div class="heightContainer" style="padding-bottom: 62.2881356%">
<img src="https://s-media-cache-ak0.pinimg.com/236x/87/31/c5/8731c53e1a154996439fef26118e9a22.jpg" class="pinImg fullBleed loaded fade" onload="P.lazy.onImageLoad(this)" alt="Tasche JohnBoy by Elbmarie (freebook)">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="pinMetaWrapper">
<div class="pinMeta ">
<p class="pinDescription">
Tasche JohnBoy by Elbmarie (freebook)
</p><div class="Module SocialIconsCounts">
<div class="pinSocialMeta">
<a class="socialItem" href="/pin/574701602429560539/repins/" data-element-type="174">
<em class="repinIconSmall"></em>
<em class="socialMetaCount repinCountSmall">
1
</em>
</a>
</div>
</div>
</div>
</div>
<div class="pinCredits">
<div class="pinCreditWrapper" data-element-type="282">
<button class="Button DropdownButton Module borderless hidePinInfo" data-element-type="284" type="button">
<em></em>
<span class="accessibilityText">Mehr dazu</span></button>
<div class="creditItem ">
<a href="/miriamhaehnel/n%C3%A4hen/">
<div class="Image Module creditImg unknownImage">
<div class="heightContainer">
<img src="https://s-media-cache-ak0.pinimg.com/upload/574701671137981071_board_thumbnail_2016-02-19-08-16-32_44630_60.jpg" data-load-state="pending" alt="Nähen" data-src="https://s-media-cache-ak0.pinimg.com/upload/574701671137981071_board_thumbnail_2016-02-19-08-16-32_44630_60.jpg">
</div>
</div>
<div class="creditName">Für dich ausgewählt</div>
<div class="creditTitle">
Nähen
</div>
</a>
</div>
</div>
</div>
</div>
</div>
Web links
- Robin Rendle: BEM 101
- Maxim Shirshin: Scaling down the BEM methology for small projects
- Varvara Stepanova: A new front-end methology: BEM
Individual evidence
- ^ History / Methodology / BEM. Block, element, modifier / BEM. In: en.bem.info. Retrieved February 18, 2016 .
- ↑ BEM: Key concepts / Methodology / BEM. Block, element, modifier / BEM. In: en.bem.info. Retrieved February 18, 2016 .
- ^ Naming convention / Methodology / BEM. Block, element, modifier / BEM. In: en.bem.info. Retrieved February 18, 2016 .
- ↑ Inuit.css