Practical example of how to use BEM with Sass

On the web I’ve found a lot of good article’s about using BEM. But I missed a really simple (short) example of how to use BEM on a easy way with Sass. Especially sinces more and more Frontend Developers are using Sass as their CSS-preprocessor.

So this is my quick & simple version of how you can use BEM in combination with Sass! If you don’t know BEM, than I would reccomend you to read “MindBEMding – getting your head ’round BEM syntax” from CSS Wizardry – Harry Roberts. If you don’t know Sass, I would reccomend you to read “An introduction to Sass“.


Let’s start with the HTML. For BEM the HTML is just as important as the CSS. Since we know that the browser is reading our selectors from right-to-left, we know that using element’s with classes in our selectors is very costly for the browser. So using a class on the most of our HTML elements is a good practice.

Below you can checkout how I would setup the HTML of a navigation for a website.

<ul class="navigation navigation--main”>
 <li class="navigation__item">
  <a class="navigation__link" href="dashboard.html"></a>
  <ul class="navigation navigation--sub”>
     <li class="navigation__item">
      <a class="navigation__link" href="dashboard.html"></a>


In our Sass/CSS we don’t want to use nesting, only if it is really needed! But with a maximum of 1 level. This is to set everything as clean as possible.

In the example below you can define the name of your Block (the B of BEM) inside $module. With the &amp; mark you can combine a string of the Element (the E of BEM) with the Block. So &amp;__item will be compiled to .navigation__item, it is a super usefull feature of Sass. In this case the &amp; mark will not be used for nesting but for merging classes.

$module: 'navigation';
.#{$module} {

  // By default, our note has a white background…
  &__item {
    border-top: 1px solid #ccc;

  // But “featured” notes have an offwhite background
  &__link {
    color: blue;

  &--sub {
    margin-left: 15px;
    .#{$module}__link {
        font-style: italic;


After the Sass is compiled to CSS, this will be the result! From my perspective it looks really clean, everyone can read from the HTML what the styling represent. Like this example, this is suitable for CSS on a big scale!

.navigation__item {
    border-top: 1px solid #ccc;
.navigation__link {
    color: blue;
.navigation--sub {
    margin-left: 15px;
.navigation--sub .navigation__link {
    font-style: italic;

Hope you did enjoyed to read this blog post about using BEM super easy with Sass! Love to see your reaction in the comments section :-)

CSS Performance: We write CSS selectors wrong!

So today, I want to dive into CSS Performance. Especially I want to talk about, how you can make you selectors faster to render in the browser. So let’s start with an example that every (Frontend) Webdeveloper used once in CSS.

HTML structure

So imagine that you have this html structure:

<nav class="main-navigation">

CSS selectors

And beside that you have this in your stylesheet:

nav {
 height: 60px;
 max-width: 1024px;
 nav ul {
 margin: 0;
 padding: 0;
 text-align: center;
 nav ul li {
 display: inline;
 nav ul li a {
 display: inline-block;
 padding: .5em 1em;

Analysing the HTML & CSS

If you check the HTML & CSS, this is something a lot developers will use in there websites/webapps. Nothing special! Just a styling for your main navigation.

Right to Left

One of the important things to understand about how browsers read your CSS selectors, is that they read them from right to left. That means that in the selector ul > li a the first thing thing interpreted is a. This first part is also referred to as the “key selector” in that ultimately, it is the element being selected.


Browsers read selectors right-to-left

Huh? What? Are you kidding me? Yeah, browsers don’t read your selectors from left-to-right!

So with a selector like nav ul li a the browser start to search to a a tag in the whole page, after that it will filter it to every a tag inside an li tag, and so on. You understand this will take more time than needed!

What selectors are better and faster to use

If these selectors, most of the developers are using are not so efficient as we thought, what should we use than? Let me introduce to you the “BEM” methodology! BEM stands for “Block, Element, Modifier” and helps you to get much better selectors & class names in the HTML and CSS. In this blogpost of Sitepoint it is really good explained how to use BEM.

2 steps to improve the loading time of your website

A time ago I gave a presentation about Frontend Performance, how you can improve the loading time of your website. But for the people who where not there, I wanted to write down the 2 steps I take to improve the loading time of several websites. I hope you like it! If you got some tips & tricks to add, please add them in the comments.

1. Images are slowing down everything!

Images are the biggest issue in a the loading time of your site. A lot of website don’t use optimized images and most of the time the are to big. Especially websites with a CMS.

So to prevent that the images are to big, I usually save my images (for a static website) in different resolutions (btw, WordPress does save images in different formats). I use these sizes in width’s:

  • 1980px (for big screens and backgrounds on 70% quality)
  • 1024px (for big content images on 70% quality)
  • 800px (for content images on tablet with portrait mode in 70% quality)
  • 640px (for content images on big smartphones in 70% quality)
  • 480px (for content images on smartphones in 70% quality)
  • 320px (for content images on small/old smartphones in 70% quality)

Note: with grunt or gulp you can resize image automaticly.

For loading images in a website, you always have the problem that the block the page from loading completly. So the always slow down the loading time of a website. If you use Blazy (a Vanilla JavaScript library for Device-specific Lazyloading), your website will start to load a lot faster. In the first time, the page loads without the images. If the page is ready and an image is in the visible part of the browser, Blazy activate the loading of the image. So the images are not blocking anymore.

A cool feature of Blazy is that on smaller screens, you can load smaller images. The even have support for background images. Deffenitly a must-do for improving the Frontend Performance! Let me say it better, the most important (in my opinion).

2. Minify CSS and JavaScript files

A lot of website’s including a ton of CSS and Javascript files. It’s nice for development maybe, to see where error’s come’s from. But all these different files has a big effect on the loading time. For each new file, there is a request to get that file loaded.

And a big amount of requests, costs more time. When you merge the CSS files into 1 file and do the same with Javascript. This will  also improve the loading time! Here is a good article to set it up with Grunt or Gulp.

Woothemes Flexslider RTL (right-to-left) support

RTL, no it is not the dutch television channel! RTL stands for right-to-left, websites with Arabic visitors want to support their natural way of reading online.  I’m used to LTR (left-to-right), so I never thought about supporting RTL.

But now I needed to build a page that supports RTL. That was interesting to investigate. The website that gave me a very quick help was the all time favorite “CSS Tricks”, the have a article about RTL / the CSS direction property.

But in the website I was working on, the used the Woothemes Flexslider. But that didn’t get well in the first time. The slides where not showing anymore, because of the <body dir=”rtl”> tag.

But I found the solution to fix that! You just need to set the flexslider element back to direction: ltr. And that it works. So hopefully this will also help you to make the slider work again.

CSS example:

body[dir="rtl"] .flexslider {
 direction: ltr;


2 solutions for empty spaces below an IMG html element (no margins used)

Have you ever have empty space below a DIV element with an image inside of it? No? Lucky you! I had this problem. But this image had no margin or padding below it. So it was really weird.

But I never thought about what kind of type of display (CSS), an IMG element was. And what I saw, it was a “display: inline”. So that helps a lot to find a solution (after a hour searching, checking and reloading hahaha). To fix this, there are 2 solutions!

Solution 1


Set the image to a display: block; in the CSS.

Solution 2


Set the vertical-align: top;

You can decide yourself what solution is for you the best.