How To Design Your HTML and CSS Into Components To Help Make Your Life Easier

Without a little bit of up-front thought, it is very easy to accidentally fall into the trap of writing very brittle and nonreusable CSS.  If you want to learn how to avoid this, then this article will help you.  In this guide, you will learn about component driven development, why it's beneficial as well as learn some of the most popular techniques you can adapt to help you achieve this.

What Is a Component Driven Design?

When I started building websites, people tended to write giant monolithic CSS files.  Generally, what would happen after a client's website was launched, updating and maintaining the styles on the site became frustrating.  When a change request came in, I'd waste a lot of time just trying to find the relevant selectors I cared about.  Second, updating a style usually resulted in a strange bug cropping up in completely other areas of the website that I wasn't expecting.

I obviously wasn't the only person who struggled with this, as technologies like SASS and LESS were shortly invented afterwards. If you look at almost all advances in programming languages or even infrastructure, it's a commonly agreed practice that the smaller you can chunk things into self-contained components the easier life is.  If you look at React.j or even the whole web components movement, everyone is moving towards components.  When we build CSS we should also follow this approach.  

Unlike programming languages like C#, the CSS framework doesn't force any restrictions on how you write your CSS.  If you really want to you can still write all your CSS in one big giant monolithic file. 

When you write and architecture your CSS, it is up to you to pick a good approach and it's up to you to be disciplined enough to keep it up.  If you are new to coding and you still find it hard to grasp some of these concepts, then that's OK.  One good port of call is to have a read of Brad Frosts, Atomic design.

How Do I Write Component-Based CSS?

On all of the projects I've worked on recently and all the courses I've taken, by far BEM seems to be the goto technique nowadays of writing component based CSS.  BEM standards for 'Block Element Model'.

BEM gives us a nice easy framework that we can follow that will result in nice clean CSS.  The best thing about BEM is that it doesn't involve installing or adding anything new to a project.  You can start using BEM by simply changing the way you write your HTML and your class naming convention.  This means applying a BEM design pattern to your project is super simple.

How Do I Write My Class Names and HTML In a BEM Friendly Way?

.block {}

Block: This is a standalone component. Examples include class names like header, footer, button, or, call-to-action.

.block__element{}

Element: Block elements are HTML elements placed within a block. They are denoted by two underscores. Examples of some class names you might be an element could include, header__title, header__body, or, btn__productItem.

.block__element--modifier {}

Modifiers: A modifier indicates a theme or a style based on the block/element. Modifiers classes are useful as it prevents you accidentally changing unrelated blocks. Examples class name to denote something as a modifier could include: btn--blue, header__title--selected.

As you can see BEM doesn't involve anything fancy, it's just a way of writing your HTML and naming your classes in a way that gives it a very high chance of making it easy to read and update in the future.  

.btn {}

.btn__productItem {}
.btn__callToAction {}

.btn__callToAction--blue {}
.btn__callToAction--green {}

More information about BEM can be found here.

How Should I Sort The Files Within My Website

BEM gives up a standard convention around writing our HTML and naming our classes. We still need a framework of how to split up our CSS into different files and where/how we should store those file within our website, this is where the 7 in one pattern comes in.  The 7 in one pattern is really simple, you created 7 folders, named like so:

  • base/ - Basic definitions
  • components/ - One file for each component
  • layout/ - Overall layout for the project
  • pages/ - Styles for individual pages
  • themes/ - As the name suggests
  • abstracts/ - Variables, mixins
  • vendors/ - Third-party SASS you may need to add

You then have one main SASS file that defines/includes everything within these folders, called:

  • main.scss

When you create a new SASS partial you save it within one of these folders and that's it.  A good example of 7 in 1 in action can be found here.

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top