Everything is a rectangle: A different point of view for CSS

NOTE: This article is not a tutorial and the main audience is anyone interested in improving their skills.

Even if you just started, or you have years of experience, it might come in helpful to find a different point of view for CSS.

Over the years I have met excellent developers, team leaders, friends, and even role models and it is kind of curious how such experienced minds turn out to struggle with CSS.

My theory is that it might be related to the way we are used to seeing things around us. Even when we look at the same object, we don’t see things in the same way or, more accurately, we don’t think the same.

The first objective is to start with the same vision.

A different point of view

Let’s start with the universe: imagine... imagine the space, stars... imagine the earth... you are looking at it from space.

Let’s take a closer look... you are getting closer and closer... now you can see the continents, the oceans... now we are so close that you can see mountains, rivers...

Eventually, you are now back at your place: what can you see? a monitor? a phone? What is around you? Take a look.

What do you see? What do you think when you see those things? That’s your point of view.

Let’s change it: Everything is a rectangle.

Yes, you hear me, everything is a rectangle now. Imagine that.

Your desktop is a rectangle, your chair is made of rectangles...

Your town, your country, its rivers... are rectangles...

The universe is made of rectangles...

Everything is made out of rectangles

I know the last example was sudden and you might have troubles to actually imagine that but I just wanted to make sure you get the main idea: Everything is made out of rectangles.

In your daily life, you know that everything is made of atoms or particles: you already accepted that and it is not hard to see things in that way but, when we talk about CSS and HTML, the rectangle is the base particle that forms everything and,  as a consequence, everything is a rectangle.

Our role as developers is to transform daily life objects into HTML/CSS objects or, in other words, transform objects into rectangles.

Let’s use a common example here; a book. If you take a look at the real example (figure 7, left side), you might be able to notice the patterns: titles, paragraphs, images, lists, and more. Now, as simply as you were able to detect those patterns, just transform them into rectangles. You will get something similar to  the example on the right.

And, that’s it! you were able to think in rectangles. Let’s not stop here: take a look again around you, focus on something, and imagine how would it look if it were made only with rectangles.

The importance of breaking things into small rectangles is that, at some point, you will be able to transform and interpret concepts in a better and faster way and, when a designer comes with the next design, you will be able to understand the idea behind the design and communicate in the same language.

Closure

I think we could go deeper in this topic; we are missing some other things like how to imagine the perspective, how CSS can change the shape the elements making us think that there are more than just rectangles, and more, but let’s keep it simple.

Today we learned the idea that everything is made out of rectangles. Let’s focus on that and practice imagining other things as rectangles: scenarios, landscapes, your desk, anything.

Once you are able to get the image, how would that look as a web page? can you make it?

Extra: As I mention, everything in the web is made of rectangles: do you want to confirm that? Use the developer tools and insert the following styles, and you should be able to see each rectangle in a page.

* {
  border: 1px dotted red !important;
  border-radius: 0 !important;
}

If you like the topic and idea let me know: I have more ideas related to this topic I could explore. Thank you for reading and see you soon.