I've been delving deeper into CSS territory lately. It started with a challenge I did recently where it was encouraged to try and code the CSS parts using Sass. I have seen Sass/SCSS code before but never tried to actually understand it, so I was a bit hesitant at first. Trying something entirely new in a clearly defined project usually means it extends development time way too much for me.
Luckily, I found a couple of good resources that helped me alot.
Sass Basics explains the basic concepts and syntax in a clear manner.
Learn the SCSS (Sass) basics in 5 minutes talks about SCSS which, simplified, is a version of Sass which has a syntax closer to original CSS. While Sass removes the need for curly braces and semi-colons, SCSS keeps them in. I very much prefer the latter as it makes the code more readable (and reduces the risk of errors from typos on my part).
Anyway, I think I was successful implementing SCSS in a decent way. You can check out my code in this repository.
I didn't use any mixins or more advanced stuff, but I found I really liked how nesting in combination with the file system actually made my code more tidy and easy to keep track of. Quite the opposite of nesting loops in other languages, so I was a bit surprised.
The Box Model
I need to delve further into SCSS but it also renewed my interest in CSS and gave me new insights into how to approach web design.
Think of web design as a collection of boxes. In the end result an element might not resemble a box due to things like transformations or borders (with border-radius applied), but at its core it is still a box.
This is why the box model is so important. It has the content in the middle, then padding outside of that. Then comes the border and finally everything is surrounded by margins. Knowing how each of these parts of an element (or box) work is crucial to getting the layout behaviour you want.
How width is applied on the box-model by default. Image by ä¸ÂÂÂå¿—ä»Â licensed under CC BY-SA 4.0.
The Box-Sizing Property
One of the things that messed things up early on in my journey was the relationship between border/padding and size properties. If you're anything like me, you start out by defining the layout of a page or component. When the basic layout is there it's time to fill it with content to see how it looks. Well, during layout you have set widths to your components but then you fill them with text which will almost always fuel the need for padding. That's when you freak out because that padding starts to break your layout as it makes the component suddenly grow in size.
You know that the padding gives necessary readability to the content so you start to subtract from the widths of your component. Suddenly your nice layout start to slowly crumble. This is clearly a built-in problem with the box model, but fortunately there is a simple fix which has been around for quite some time now and many web developers use it as default.
The default value for the box-sizing property is content-box (here's a good link to info about the box-sizing property). That means the width (and height) you set for an element only applies to the actual content - not the outer layers of the element (padding, border and margin). I remember from my early days how I had to constantly calculate and recalculate element size to be sure that my paddings and borders didn't affect the general design. It was annoying work. Tedious and messy. When I learned how the box-sizing property worked I felt relieved.
The Box-Sizing Best Practice
Since the early days of switching to border-box there has been an addition to the code for best practice. So the full code snippet should look like this:
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
This will give you full control of box-sizing for your elements. With the code snippet above, any size you apply to an element will include paddings and borders. This means that if you add 10px padding and 2px border to an element you've set 400px width to, the element will still be 400px wide. This will ensure that your basic layout remains intact.