As illustrated by the magnificent tower of Pisa, good architecture is key if you don’t want to end up with a project that you have to strain your neck to view, while desperately trying to tell your colleagues you meant for it to look like that.
Indeed, every good construction starts with a solid, well-thought-out architecture. It is an essential process that avoids a lot of costs and problems long term. This rule also applies to website development; a website with a well-thought-out architecture will last longer and be easier to maintain, therefore costing less.
Today, we will talk to you about an important but often neglected part of website creation: its frontend architecture, and more precisely, its CSS architecture.
What is frontend, and more precisely, CSS architecture?
“Frontend” corresponds to anything related to the visual aspect of a website. Whether it is the interactions you will have with a site, a dropdown menu, a modal, a carousel, the visual aspect, implementing the design, animations, etc.
When we say CSS, we are essentially talking purely about the visual aspect of the website. It is a programming language used by the chief internet browser in order to know how to present the content.
For almost 10 years now, the trend has been to think of the design in components so as to increase modularity. It should be seen as Lego blocks that we prepare and then assemble in order to create a website. CSS architecture is the way that these blocks are thought out and subsequently assembled.
Advantages on Every Level
The advantages of a good frontend architecture are multiple and will be beneficial for everybody.
A solid Conception that Creates less Bugs
The first advantage is concerning the great plight of our modern times: bugs. We will be able to reduce the number of visual bugs in order to not get stuck in an eternal hunt for them that everybody would prefer to avoid.
To do so, we develop and test every component (Lego block) in isolation before including them in the project. These components are therefore only added once they have been properly thought out and developed taking the specificities of the project into account.
Each component is developed in “defensive” mode, meaning we try our best to predict each case, including the most improbable ones. Our objective is to develop components that adapt to every situation.
Reduced Maintenance and Production Costs
Once these components have been created, the site will be more modulable and it will be easier to quickly add or modify functionalities such as last-minute adjustments and maintenance once the website is online.
A website often goes through several phases in its lifetime, and therefore several developers. A healthy Frontend architecture will allow all the developers to continue to work in an ideal and efficient manner without creating new bugs. We will therefore avoid the “gas plant” effect that certain projects having passed through several hands may have.
This will be felt in the intervention time required to complete a task as well as on the costs generated.
A More Performant and Therefore Faster Website
This shouldn’t come as a surprise; optimized code also creates more performant code. A more performant code will have repercussions on user retention as well as the SEO.
To do so, the architecture helps us in various ways:
- We optimize the render of each component in order to have rapid change and display in the browser.
- We avoid CSS specification problems, which means less effort required from the browser and fewer bugs.
- We avoid code repetitions that can come up which lightens the files’ load and therefore reduces page loading time.
A winning Approach
For all of the aforementioned reasons, in a website, it is very important to think in terms of modularity, reuse, and evolution. This aspect mustn’t be neglected, even if it comes with certain developmental challenges. In the end, the project will definitely benefit from these aspects.
In the next article, we will explore different techniques to help meet this challenge. It will be a much more technical article in which we will explain the pros and cons of each technique, as well as share our own personal choices and our reasons for choosing each one.
