CSS: The Minimal Architecture to Make Your Project a Success

Now that the key issues have been covered, let’s talk about real-world practice and solutions. As a reminder, we’re focusing here on a mid-sized project with a team of three to four developers and no dedicated UX/UI designer. The question becomes: what can we do to guarantee style quality in our future application?

Gall’s Law is particularly relevant when beginning to architect a project:

A complex system that works is invariably found to have evolved from a simple system that worked. A complex system designed from scratch never works and cannot be patched up to make it work. You have to start over, beginning with a working simple system.

The styling of your application will inevitably become a complex system — general rules onto which reworks, intermediate rules, and unavoidably, exceptions, will be grafted.

Our goal is therefore to reduce the complexity of this system to a state simple enough that we can, later, work backwards without major difficulty.

Maintaining Consistency Across the Project

Let’s get into the minimum CSS architecture. In three steps: layout management, atomic-level components, and general properties.

For layouts and components, it’s straightforward:

• We’ll use a hierarchical system where we separate “page” components from “everything else.”
• A page is responsible for the layout and for coordinating information between the various components it contains.
• A component , on the other hand, is responsible for a coherent set of features, with a defined position in the interface and a shared responsibility.

This logic pairs naturally with the Container/Presentational pattern [13].

The components used within pages are then split into two categories. This distinction applies more specifically to those reused across multiple pages. Here we apply the principles of atomic design [9] by creating an abstract layer of atomic components.

The goal is to design simple, reusable components intended to be combined within other components. These “atoms,” once assembled, form “molecules” — for example: a button, a card, or form elements.

One final important point: having reusable property values that apply consistently across the application. These are defined at the global level. There are 3 that are indispensable to any project:

These three elements ensure coherence throughout the application. They prevent each developer from having to wonder which typography is appropriate. They also make it easy to associate clear meaning with properties.

⚠️ A note if you use Tailwind CSS: it’s a very powerful tool that significantly improves DX, but if its usage isn’t properly governed, this approach can harm the long-term maintainability of your project.

Securing the Future and Managing Changes

Without a designer, we can already set aside the idea of cleanly handling font size changes made by the user (covered in the previous article if you haven’t read it).

• Unfortunately, our application won’t be perfectly accessible — but it’s better to focus on what can be done properly with the resources available.
• No modification to the default font size, therefore no rem: we'll primarily use px for all sizes that don't depend on the layout.

Here’s a quick summary of which units to use:

• width and height in % / auto, to adapt to the space the layout provides.
• margin and padding in px, since the content size doesn't change. This has a major advantage: simple, predictable behaviour that's easy to adjust later — and above all, readable.

If these two points are respected and your interface integration is carried out carefully, you should have no trouble scaling your project and your ambitions.

This wraps up this brief overview of CSS units and why mastering them is a genuine challenge. Two keywords to keep in mind: consistency and maintainability.

To put things in perspective: the majority of the web ecosystem often uses, without realising it, a unit based on a multiple of 16px — rem. And yet, that doesn't stop anyone from continuing to build great things. It's proof that it's entirely possible to create excellent products using nothing but pixels.

And to reassure you on the accessibility front: Jira, the production tracking tool, doesn’t allow users to change the font size of its interface. Even the biggest platforms don’t always take on that kind of design challenge.

Here’s hoping this has made CSS a little more approachable.

*Spoiler * :the next article will explain what a component is and why it’s magical. See you next week!