How to name selectors in elements that are 2+ levels deep in your BEM block

If you asked most grandparents how to deal with grandchildren, they would probably suggest letting them do whatever they want, and then filling them with sugar about 20 minutes before bedtime. Whilst as their child, you sit there thinking how unjust this is, since all they offered you as a child was vegetables and discipline.

In contrast, when looking at Block Element Modifier (BEM), the blocks treat their grandchildren (and deeper nested elements) in exactly the same way they treat their children.

The problem

Easily the most common question I’m asked with BEM, is how to name deeply nested (2+ levels) elements…


An overview of contrast ratios, what you need to look out for, and how to comply with WCAG requirements

Strips of colour
Strips of colour

Before we start, I’d like to apologise in advance… I’m based in the UK, so the the flipping between colour/color in this article is real!

When asking if something is accessible, common feedback will be around contrast ratios. This article aims to outline what contrast ratios are - in context to accessibility, what the requirements are, and how you can check you are meeting those requirements.

What is WCAG

Get ready for some acronyms! The Web Content Accessibility Guidelines (WCAG) are a set of accessibility guidelines, published by the Web Accessibility Initiative (WAI). …

A brief overview of design tokens, what they can do, and why you should be using them in your projects

Have you ever got back from IKEA, full of anticipation and excitement at the thought of constructing a cupboard yourself? Only to be left questioning your life choices two hours later, when you realise you’ve put two of the panels on upside down.

This can be a similar experience when application designs are handed over to developers. Often a sizeable amount of guesswork goes into translating design documents into code. Enter design tokens. They’ll do absolutely nothing to help your wonky cupboard doors, but can greatly help designers and developers create consistent user interfaces.

It wasn’t that long ago that…

Freelancing advice

It is becoming more and more common for people to dip their feet into the world of freelancing. That usually means freelancing in your spare time, potentially juggling it with a full time job and a family.

I’m married, I have two daughters under 6, and a full time job. Spare time isn’t really something I deal in. I have tried freelancing in the past, with mixed results, and one very bad result (lots of work and no payment). Yet I felt like giving it another go.

Given my past and recent experiences; I wanted to go over some key…


Portfolio website refresh

Following on from the rather rash decision to redo my personal website (you can find part 1 here), I wanted to talk through the designs I have pulled together. I’ll outline the requirements for the design, discuss the decisions I made along the way, and highlight any tools that I used to help me.

Spoiler alert, the design is above in a cliché responsive mockup.


There were a few key things I wanted to do with the website update, and the design needed to incorporate these in:

  • Single page: I just don’t feel that the site is going to be…

Redesign / Development

Portfolio website refresh

It’s February. It’s 2020. I’m hoping – for the sake of my life expectancy – it’s a bit early for a midlife crisis. So instead of shopping for sports cars or training for a marathon, I’m going to give my website a refresh.

The eagle-eyed among you may have noticed that this is named “ Part 1”. The educated of you will have deduced that might mean this is the first post in a series. The optimists of you might hope that the outcome of this series is better than the Game of Thones finale.

This first post aims to…

Stuff that keeps me awake at night: my phone, my batting average in 2004, and worrying about accessibility. What if I’ve built a component that not everyone can use? We now all know that accessibility isn’t just a nice to have.

I wanted to go over my current approach for accessible focus indicators, and the journey I took to get there.

Leaving it up to the browser

Do we even need to bother, or should we just leave the browsers to it?

So the official line is that if you leave the browsers to it and don’t change the default focus indicators in any way, then…

Fish and chips, Posh and Becks, Netflix and chill. These are all things that go well together; or so I’m told. It’s time to add BEM and SASS to the list.

What are they?

  • BEM (Block. Element. Modifier) is a naming methodology, which aims to solve many of the problems you’ll commonly encounter when naming classes and structuring your CSS. It also does a great job of enabling you to create reusable front end components, which is something we all strive for: to be healthy, wealthy and create reusable components.
  • SASS on the other hand, stands for Syntactically Awesome Style Sheets. Way to…

I think we can all agree, naming things is hard. I’ve got two daughters, and naming them was tricky. Largely because when you name a thing that is going to outlive you, you don’t really want to name it after someone you don’t like. Turns out that I don’t like many people.

It also turns out that naming children is a walk in the park in comparison to naming colour variables. So I wanted to take some time to go over my current approach and how I’m finding it.

It’s early days, and I don’t hate it yet. …

Andy Barnes

Front end developer who likes to design. Lover of technology, 80’s music and Dominic Toretto.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store