Throughout the years working as an independent web designer & developer, I’ve always been looking at “what’s new and what’s next” so to ensure that I’m always a step ahead, especially when technologies and css architecture are constantly changing at great speed — Which is why I love doing what I do, with me being on the constant lookout for the next academical challenge.

As a highly skilled full-stack web developer, I see no end to the enjoyment I get from my life-long hobby of learning. This dedicated attitude has resulted in developing & delivering brilliantly structured and up-to-date websites to a wide range of clients.

Further to the above paragraph, let me put things into perspective, with no insult intended… When a developer has no desire or motivation to learn the ever growing digital technologies and languages of today, then it’s fair to say that they have little interest in the future of digital and their business, which also reflects on their clients. Put it this way… why would they be interested in your business if they aren’t showing much interest for their own business?

Anyway, without going on and putting a perspective on things, let’s get on with this article so I can share an awesome CSS Architecture with you! One that has been a game-changer for me.

BEM & Atomic Design: A Personal Favourite CSS Architecture

Learning is a huge part of my life and I’ve been privilaged enough to attend well recognised Universities, but I can never seem to get enough.

With this non-stop attitude, I stumbled upon a front-end architecture one evening some time ago called Atomic Design.

It has became such a blessing to me that I now want to share it with you so you can look into using it yourself. Before I get into it though, let me share what I’ve learned to be the perfect guidelines for an awesome CSS architecture that is of gold standard.

Guidelines to Awesome CSS Architecture

When it comes to CSS architecture, I always look at the 3 key points below:

1. Easy to Understand Class Naming

2. Flexible, Smart and Sturdy

3. Simplicity of Further Development

What is Atomic Design?

Atomic Design is methodology for creating brilliant and easy to maintain design systems.

As you can see from the visual above, the five levels used in atomic design are:

1. Atoms

2. Molecules

3. Organisms

4. Templates

5. Pages

Let’s discuss each of the 5 levels in a bit more detail to give a better understanding of how they work…

1. Atoms

The atoms which are applied to web interfaces are the basic building blocks of design (HTML tags) and consist of the likes of form labels, input fields and buttons. Furthermore, atoms also include more abstract type elements such as the colour palettes, fonts and even the invisible features of an interface including animations.

Just like the atoms of our natural world they are somewhat abstract and often not very useful on their own. However, they are really good as a reference in the setting of a pattern library in the sense that you can see all of your global styles laid out at a single glance.

2. Molecules

Once we start combining atoms together, things start getting really interesting. Just as in the natural world, when molecules and groups of atoms are bonded together, the molecules start to take on their own individual properties and in the case of web development they serve as the backbone of our design systems.

As an example of this to better explain; a form label, input field or button isn’t very useful on it’s own. If combined together as a form, then they can actually do something which will work together.

As we build up to molecules from the atoms it in turn encourages a “do it well from doing one thing” type of mentality. While molecules are seen as complex, they are actually relatively simple combinations of atoms built for reusing time-and-time again.

3. Organisms

So knowing molecules are there to give building blocks to work with, which from combining them both together will form organisms. Organisms are groups of molecules which when joined together form a complex section of an interface.

It’s important to realise that most clients will most likely not be interested in the molecules of design systems, however on the topic of organisms we see the interface really beginning to form shape.

Organisms generally consist of similar molecule sets. As an example, consider a masthead organism which may consist of various components (logo, navigation menu etc.) But a shops product grid organism might consist of the same molecule structure, which is repeated.

With all this in mind, building upwards from the molecules into organisms will therefore encourage for the creation of independent, easy to carry and reusable components within the design systems we create.

4. Templates

When we get to the template stage, we can break down our chemistry based anology to get to a language which makes it much easier to understand.

The templates are considered mainly for the consisting of groups of the various organisms which we can weave to form our pages. This is the point where we then begin to see the design shaping together.

Templates are essentially where you and the client will start to see the design structure in place!

5. Pages

We can think of the pages as the specific instances of our created templates. At this point, the temporary placeholder content in place is then replaced with the real detailed content which essentially gives a perfect picture of what the end-user will see.

Pages are essentially where the people who are involved in the development will spend most of their time around, and with this in mind, it’s where most of the reviews will be coming from.

At the stage of pages, everything we have in place will then allow us to go back if/when necessary to make changes needed to the molecules, organisms and templates we setup to better the design quickly and with ease.

Why Use Atomic Design?

As a developer, atomic design architecture gives the ability to make a simplified journey from the abstract over to concrete. With this, we can therefore create amazing systems that help promote a pattern of consistency and scalability.

Looking for a web developer in Glasgow or around the UK? Contact me today to discuss and meet up over a coffee.