Imaginary Box-Drawing For Your CSS
I. What is box model
To be honest, before actually writting this down, i have no idea there is something call “box model”. When i first learn CSS, all i was explained were about padding, margin, default styles of element, flex box. I swear that’s literaly it. I believe I’m not the only one, but the fact is that even when we don’t know about the concept, we can see that all elements on a website is in form of rectangle.
Box model is a simple concept that says every single thing on a webpage is a box. These boxes can have other boxes in them and can sit alongside one another. If you add border to every element, it looks like this:
I guess, you can see where I’m going :)
Yes, I’m trying to tell you to draw these boxes in your head when you’re doing CSS. This is not a tutorial, each person will have different ways to implement CSS, you know, “all roads lead to Rome”. This is just how i usually do it and i hope it helps.
II. Drawing the box
Let’s take this as an example.
1) Ignore the big background image
Those images are a distraction. They prevent you from seeing what components you actually need. As they are in the background, we can later use background-image property in css or set the image position to absolute.
While drawing the box, sometimes, we would apply the same rule to those images that fall out of the place or in a weird position.
2) Decide the big box
As we all know, flex and grid are most-used display property so when we draw the outer box, take a look into the inner component and decide how they are going to be arranged.
Here’re my boxes going from big to small and why i decided so. Each box is a <div>
(green -> pink -> yellow -> teal -> blue -> brown)
- Green: there’s no need to explain this as all start with a full width container.
- Pink: remember the background we ignore :) yes we still ignore it but make sure to give it a so-call placeholder that fit it’s width.
- Yellow: Why i use a box that cut the white box and the small images on the right. The answer is that because they are in weird position that break the text. All these image can be set with absolute position later.
- Teal & Blue: they will definitely have different child placement so need to split these
How’s the CSS though:
- Green: 100% width and padding left-right
- Pink: 100% width, position relative, background image position would be absolute, top 0, left 0
- Yellow (top): padding top and left from edge to the text, position relative. White box will have position absolute with top, left as design. The text can be held in 2 div with text styling
- Yellow (bottom): display flex with justify content as flex-end
- Teal (left): simply use flex column. align and justify 2 shapes to bottom right
- Teal (right): we dont have to set anything as there are 2 div inside and it’s default behavior is display block which mean it will take up a whole row.
- Blue (top): relative position. Insides, the 2 images (yelow half moon and blue square) will be in the same div, which is set to absolute position with bottom and right 0.
- Blue (bottom): just set padding right and and display grid
3) Using absolute position
We dont usually confuse the use of fixed position or sticky position but quite often, we missuse the absolute position. So i tell myself to only use absolute when:
- that element is not in alignment with other elements in the same box
- most of the time it’s the image that fall out of the place, if it’s a text box, check again if we can adjust the way we draw the boxes
- The element that i “ignore” when drawing the boxes
4) Default properties of html elements
This can help to reduce the amount of css you write. For example, display flex has row direction by default, so we dont have to write flex-direction again unless we want it to be column. Or, span is inline so we can use it to display different color text in the same sentence,…
And, that’s it. That’s how i have been doing my css and it work pretty well so far. I’d update this if i notice something else adn love to hear your suggestion as well.
