Building CSS without a headache
When I had to start making CSS, I wouldn’t say I liked it. To be honest, I hated it. Nothing made sense, and if I changed even the most minor thing, it would break something else, and I had no idea why.
Everything was a mess, and I couldn’t understand how anyone would like it. However, it all changed when a person taught me to think of CSS with boxes.
That person said: “When you’ve to build something, break the pieces into small boxes and organize your content, taking into consideration the parent box you created to hold the content.” Of course, at first, I didn’t quite follow, but as soon as he gave me an example, it clicked. I started to enjoy making CSS.
If you want to centralize a title, for example, create a box for it and center the text against the boundaries of the container you just created. You should add temporary borders to be easier to see the edges of the container in question and its siblings.
After that, I started to see everything as boxes and realized that I was playing legos. Creating simple components was effortless, but it was not that simple when I tried to apply that knowledge to more complex pieces.
The second thing that I started to pay attention to was: When you’re creating a box with a specific width and height size, you should remember to consider the size of the padding and the size of the border. After all, the total length of your box will be width + padding + border.
For example:
.box {
width: 158px;
height: 100px;
padding: 20px;
border: 1px solid;
}<div class="box" />
This div with box class will render a element box with width 200px (1px + 20px + 158px + 20px + 1px).
That realization also blew my mind because I was always confused about why things were getting different sized than I was expecting.
Fortunately, there’s a CSS property that keeps us from having to calculate this for every single thing: box-sizing: border-box. With this property, the same example will work differently:
.box {
width: 158px;
height: 100px;
padding: 20px;
border: 1px solid;
box-sizing: border-box;
}<div class="box" />
This div with box class will render an element with a width of 158px instead of the 200px of the previous example.
The third thing that changed my life on CSS was to learn flexbox. Today is pretty standard, and probably everyone that starts to learn CSS will learn flexbox, but at that time, not everyone used it. But with flexbox, I could organize the contents the way that I wanted instantly.
If you learn how to use flexbox and think of everything as boxes, I guarantee you, CSS will make much more sense. Nevertheless, it’s essential to understand some foundations of CSS as some things will make the boxes idea not work as you expected.
You can check this article and others on my website: https://www.marinahaack.com/articles/Building-CSS-without-a-headache
