Learning to Love BEM – Mono

Learning to Love BEM

Johan explains why writing CSS according to the BEM standard is a good idea.

Copy and paste this URL into your WordPress site to embed

<blockquote class="wp-embedded-content" data-secret="nJrbnbWUwo"><a href="https://mono.company/frontend/learning-to-love-bem/">Learning to Love&nbsp;BEM</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://mono.company/frontend/learning-to-love-bem/embed/#?secret=nJrbnbWUwo" width="600" height="400" title="&#8220;Learning to Love&nbsp;BEM&#8221; &#8212; Mono" data-secret="nJrbnbWUwo" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script type="text/javascript">
/*! This file is auto-generated */
!function(d,l){"use strict";var e=!1,o=!1;if(l.querySelector)if(d.addEventListener)e=!0;if(d.wp=d.wp||{},!d.wp.receiveEmbedMessage)if(d.wp.receiveEmbedMessage=function(e){var t=e.data;if(t)if(t.secret||t.message||t.value)if(!/[^a-zA-Z0-9]/.test(t.secret)){for(var r,a,i,s=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),n=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),o=new RegExp("^https?:$","i"),c=0;c<n.length;c++)n[c].style.display="none";for(c=0;c<s.length;c++)if(r=s[c],e.source===r.contentWindow){if(r.removeAttribute("style"),"height"===t.message){if(1e3<(i=parseInt(t.value,10)))i=1e3;else if(~~i<200)i=200;r.height=i}if("link"===t.message)if(a=l.createElement("a"),i=l.createElement("a"),a.href=r.getAttribute("src"),i.href=t.value,o.test(i.protocol))if(i.host===a.host)if(l.activeElement===r)d.top.location.href=t.value}}},e)d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",t,!1),d.addEventListener("load",t,!1);function t(){if(!o){o=!0;for(var e,t,r,a=-1!==navigator.appVersion.indexOf("MSIE 10"),i=!!navigator.userAgent.match(/Trident.*rv:11\./),s=l.querySelectorAll("iframe.wp-embedded-content"),n=0;n<s.length;n++){if(!(r=(t=s[n]).getAttribute("data-secret")))r=Math.random().toString(36).substr(2,10),t.src+="#?secret="+r,t.setAttribute("data-secret",r);if(a||i)(e=t.cloneNode(!0)).removeAttribute("security"),t.parentNode.replaceChild(e,t);t.contentWindow.postMessage({message:"ready",secret:r},"*")}}}}(window,document);
</script>

Copy and paste this code into your site to embed