If you’ve been in the front end dev community for a while you have probably heard of a little thing called Atomic Design . A term and methodology coined by Brad Frost , Atomic Design is a system which involves breaking down a website into its basic components so that they can be reused throughout the site. There are many benefits to using Atomic Design, I will go through 10 important ones in this article.
By breaking down components into basic atoms it’s easy to see what parts of the site can be reused, how they can be mixed and matched to form other molecules and even organisms. For example, let’s say a site only contains five atoms; small image, large image, paragraph, list item, and a link. With these five basic items one could create a very usable web page by duplicating and combining these atoms to make molecules. This method allows the creator to keep track of what is being used and where.
02. Easier to create style guide
If a site is created with Atomic Design principles from the get go, all the atoms and molecules created before the building of a site can serve as a basic style guide. However in the case of a site that hasn’t been built atomically (or without a style guide), it isn’t difficult to extrapolate the basic reused components and put them together to construct more pages for the site. Please bear in mind it is always best to create a site atomically from the beginning than to introduce Atomic Design principles to a site later on.
03. Easy to understand layout
The code of an atomically designed website will always be easier to read and understand not only during the time of creation but even in the future when a site is being looked back on for reference or small tweaks. Due to the documenting of what atoms molecules and organisms are being used and where it’s easy to see what parts of the code represent. This means it is more organised than non-atomically designed sites. It is also easier to explain the codebase to a new developer.
04. Code is more consistent
As the creation of a site atomically involves the use of predefined atoms, it is easy to see which components are being used for different parts of the site. This reduces the chance of duplicating components.
For example, if someone creates a site without using Atomic Design and require, say, a red button. They would have to look through the whole site to see where it’s been used before then copy and paste that code if it has or create one if it hasn’t. With Atomic Design however, it is easy to go back through the list of atoms and find that exact red button.
This becomes a much easier process when the Pattern Lab library is involved. Pattern Lab is a collection of tools that make Atomic Design easier. In this case it would provide a search bar for atoms making it easy to search for and find that exact red button.
05. No focus on pixel perfect designs
As the emphasis of Atomic Design is to use atoms as the building blocks for site creation, it is less likely that a web developer will create many atoms for a similar thing when they always have a list of atoms to go though and see how they’re updated.
A great example of this would be for titles on a site. If a creator has a list of titles used for the site all in black; a main header, sub header and paragraph title. In a scenario where they haven’t worked in the site in a while and need to come back to the site to add a new blue title, they could take a look at the ones that already exist and customise it to get the result they desire.
06. More efficient process, quicker prototyping
Having a list of atoms to start with before site creation begins greatly helps with mocking up pages quickly as all that is required is to pick and combine the required elements for the page. This can of course be customised and refined for the final site.
07. Easier to update and remove parts of the site
As one atom, molecule or organism is being updated at a time, it is easy to update that component for the whole site, or even delete the component if required which will not only let the creator know what parts of the HTML to remove, but also the CSS and JS code as long as those parts are written atomically as well.
08. More modular file structure
Although Atomic Design is very prevalent when it comes to markup (HTML), I believe these techniques can also be used for CSS, JS, or any other languages used to create a site to make overall code more modular and reusable. I myself use atomic CSS for websites I create and have found great benefit to using these techniques, but I believe with the arrival of things like HTML components it would make sense to separate CSS and JS specific to an atom into its own folder along with the HTML, so that if anything needs updating or deleting one knows exactly where to go and what to change.
09. Less components overall
If a creator has a list of atoms, molecules and organisms presented to them before site creation begins, they are more likely to use what already exists than create new components for small variations. If a title with a font size of 4.5em is required for a design but there is already a 4em size title in existence from the list of atoms, it is more likely a creator will pick the 4em one than create a completely new title. This will result in less atoms being used overall, resulting in a cleaner and leaner website.
10. Pattern Lab
The original version is written in PHP, but there is are two Node version, one for Gulp, the other for Grunt. I highly recommend messing about with the demo on the Pattern Lab site to give you a better understanding of how it works and Atomic Design in general.
I hope these principles encourage you to adopt Atomic Design to the next site you create. They take a while to understand and adopt but it’s definitely worth it in the long run.