Thinking in Frontend

In the dynamic universe of crafting software of any kind, there are a thousand roads to take. However, sometimes finding the best combination is the key. Frontend applications are no exception.

It's like having a bunch of Lego pieces at your disposal. Imagine that you want to build a new fancy house with your building blocks. You can achive it in multiple ways, but not all of them are the best way to do it: some bricks may be too big, others too small; others won't fit exactly as desired, etc.

In this article, we'll structure our minds so we'll be able to create more readable and manteinable layouts. We'll learn how thinking in frontend is.

Boxes, boxes and more boxes

At its core, this article encourages you to think of every element on the webpage as a box. This mental model simplifies the complexity of design by treating each component (be it text, images, or interactive elements) as a modular and self-contained entity: a box.

Try to think of any webpage. Even this article itself. It's full of boxes all over the place. They're everywhere!

Rather than focusing on specific properties like width, height, padding, border, or margin; the box paradigm urges developers to focus on the whole mix. Each box contributes to the overall visual harmony, and their arrangement determines the flow and structure of the entire interface.

In the example below, I've highlighted some of the boxes that compose a tipical Dev.to article page.

I encourage you to do the same exercise on your own. Try to imagine the boxes that compose this page. Some boxes are bigger, and boxes are smaller, but they all play an important role in composing the article.

Before starting coding your layout, do this mental exercise: think about which boxes does and contains what. Have in mind what responsability (positioning, aligning, containing) each of them should have in order to create a flexible and organized layout.

Talking about responsability, I encourage you to check this article afterwards 😄

If we start thinking that way, structuring our frontend applications turns out to be much easier, even entertaining! It's like being able to choose and create our own building blocks, which will compose the whole picture. It simplifies frontend chaos.

Why worrying that much?

Although this way of thinking might sound pretty straightforward (even obvious for some of you), you wouldn't believe how many times I've run into layouts in which this reasoning hasn't been applied.

Something that easy as creating the layout of some component or page could turn into a nightmare, resulting in creating messy code where, if you change any part of it, the complete layout falls to pieces.

Break down your design into manageable chunks, and suddenly, everything becomes way easier to handle. Styling, positioning, responsiveness – it all falls into place like pieces of a puzzle; easier code to read and mantain.

I encourage you to do this mental exercise before starting writing your code. Spend some time at it. You will save time later.