Atomic design and (3 reasons) why we need to use it

1. Living styleguide document

When you develop your website using Atomic Design principles from the beginning, all the elements you make are part of your styleguide document. It’s always the best to start a new project with Atomic design, even though if you start enhancement using Atomic Design it won’t be difficult to  extrapolate the basic elements and put them together to construct components.

2. Layouts can be understood easily

Because Atomic Design using a bottom to top approach it is typically easier to read and understand styleguide and elements as opposed to explaining elements after design is done. It comes handy specially after release of the project and specifically in maintenance where changes to an element might possibly effect other elements. And that’s because Atomic design creates a very strong documentation around design which makes it easier to trace an element and review the code base.

3. Consistent design code base

By defining atoms to create the site layout, it is very easy to find out what element is being used where in the website. It is an efficient way to reduce redundancies in the code base. For example, in one of my projects where we couldn’t use Atomic design, for changing a button’s colour or size, I needed to look into the design and find a button to change the color. Issue with this is that toward the end of the project, it gets harder and harder to find elements.