Scalable CSS

Dedicated tutorials and in-depth articles on Styled Components, BEM, CSS architecture & more.

Tom Ray

By Tom Ray, a front-end developer who lives in London with his fiancée and cat Arnold.

How To Use Styled-Components In React: A Quick Start Guide

August 09, 2020

This is a quick start guide to learning Styled Components, the component-driven CSS methodology used in React. If you want to start…

How to Create Global Styles with Styled Components

June 02, 2020

If you've opted to use styled-components as a solution for managing your CSS, you'll quickly ask yourself: The Styled Components library…

Quick Start Guide to Attrs in Styled Components

May 25, 2020

When learning styled components, you may have noticed the use of attrs and be thinking: Huh. What does this do? When would I need to use…

How To Name Containers And Wrappers In BEM

February 18, 2020

Are you unclear on BEM best practices for the naming conventions of wrapper and container CSS classes? For example, you might have…

BEM Grandchildren: How To Handle Deeply Nested Elements

January 21, 2020

Understanding the basic concept of BEM (block, element, and modifier) is a fairly simple concept to grasp. However, things can start to…

BEM Methodology In CSS: A Quick Start Guide

January 14, 2020

This is a quick start guide to learning BEM , the component-driven CSS methodology. If you want to start practicing and applying BEM to…

Is Sass Worth Learning In 2020?

December 31, 2019

Sass has been around for over 10 years now. It's worth asking: Is Sass worth learning going into 2020? Is it still a relevant way to keep…

How To Stop Writing Messy & Unscalable CSS

December 24, 2019

“I have 4 .css files and in total, they’re over 10,000 lines of code. How did things get so big?” CSS files can get out of control, pretty…

How To Nest Blocks Within Blocks in BEM

December 05, 2019

When you're practicing the BEM methodology and you have components within components, it's difficult to know the most efficient (and BEM…

Learn BEM with CSS Examples (From Real Websites)

December 02, 2019

Learning BEM can be a little abstract without looking at real CSS examples of how it's applied. So in this article, I'm going to dive into…

How to Setup Custom Fonts with CSS & @font-face

November 19, 2019

In this post, I'm going to show you step by step how to set up custom fonts on your website in CSS using @font-face . Ready? Let's dive in…

© Scalable CSS 2020, built with ❤️ in London, UK.