Episode 34: A useful technique on units I’ve learnt for CSS.

I can admit, halfway through my course and juggling everything, it’s a struggle to get these blogposts down. In short, trying to put aside that this blog is not for work but fun/therapy (hard to do so when the voices of “jobs” keep being hounded in your ear as having a blog is a benefit) is becoming a tricky one to divide. Nevertheless, my solution for that case is to enjoy the present and try worry about things when things come down to the line.

Although, I will admit that this blog is a tricky one to write because it has things to do with math. It’s funny how one would think you could escape math by doing the arts, and then realising that code needs some basic math.

Yes I know, in this case, it’s not crazy algebra or needing to remember lengthy formulas. Though, if you were one of those people who was just traumatised by math because no matter how hard you worked on it, the results or good enough improvements never happened, then yeah you get it. It’s like that song

where you’re telling math “We meet again, my nemesis.” Aside from that note, let’s get into it.

Units in CSS:

If you are exposed to CSS enough, you’ll know some of these units…if not, px, percentages, em(fonts), em(lenghts) and rem. You were probably like yeah, yeah, what, ergh, did you just add a r on the previous one and called it something new? No, that actually exist and let’s go through them.

px

You’ve probably seen commonly when it’s defined for font-sizes. px stands for pixels, which makes sense as we’re dealing with the digital world.

percentages

Basic math, we all know that these are % and we see it implemented in some CSS, maybe keyframes mostly. However, percentages can be applied to other properties and properties such as font-size too! It’s odd when you think about it but let’s say..

.parent {

font-size: 20px;

}

.child {

font-size: 150%;

}

Here we have a parent selector and a child selector that is inheriting from the parent. We’ve declared that the font size is 20px in our parent selector. However, what does it mean in the child selector when we say the font-size is 150%. Think about it, and if you guessed correctly,

“It’s a 150% of the font-size value in the parent class. I.e 150% of 20, and thus 30.”

em(fonts) & em(lengths)

This unit is “relative to the font-size of the element” according to W3schools. Let me just demonstrate with the same situation, but change something.

.parent {

font-size: 20px;

}

.child {

font-size: 3em;

}

Based on the definition we’ve just said, 3em is relative to 20px. This means that 3em is “3 times of 20px” which thus, the font-size in the child selector is 60 px. However, keep in mind that this “em” fonts takes from the parent element it’s inherited from.

em Lengths work in the same way but they take from its current element instead. So for example, if we’re working with a length in a selector, say padding (as padding is measured in length and fonts measured in pixels)

.parent {

font-size: 20px;

}

.child {

font-size: 30%;

padding: 2em

}

The font-size of the parent is 20px, thus the font-size of the child is 6px and thus, the padding is 12 px. Yeah, take your time to soak that in.

rem (roots of em)

It works the same way as em units, but it takes from the root selector. The root selector means the very first part that is defined. In this case, it’s the html and the body where we define the measurements as such…

.html, .body{font-size: 16px}

.parent {

font-size: 20px;

}

.child {

font-size: 30%;

padding: 2emmargin-bottom: 10rem

}

As you can see we have the parent and child selectors, although they have their own values to figure out, the margin bottom rem value ( it’s a length), will take the value that is defined in the root (which is in the html, body which thus, is 16). Hence the margin bottom will be 160px.

If you wanna know more math conversions, some more useful, some less useful, W3schools is always the way to

https://www.w3schools.com/cssref/css_units.asp

The benefit of understanding math conversions in CSS, and using them.

The answer is really short and that is for effective workflow.

In our world, where there are multiple screens with different dimensions, our workflow has to be beneficial to adapt to different screen sizes by changing as less code as we can. Sounds like an impossible task right? Well, let’s put media queries aside as let’s think: what’s the most minimal edit we can do to our code that allows us to change the proportions of our design in relation to our chosen window size.

A great CSS trick is here is by defining say one selector with a px value, and then using rems to define the rest of the content within the rest of the selectors.

.html {

font-size: 10px;

}

.head {

font-size: 2rem; //Before: font-size: 20px

}

For instance, in our html, a font-size will always be by default to 16px (this is dependant on the user’s browser settings). Let’s change that, by setting out html font-size to 10. Here, I’ve strategised to pick the number 10 as the math conversion for many of the other numbers would be easier to do.

For example, if my head property had a font-size of 20px…what would the rem value be of that. Well, we’ve defined the font-size to be 10 and rem is multiplies of that…so if font-size of the head property is 20, the rem value for that must be 2!

Your design should remain the same if the ratios are calculated properly. By implementing this strategy, you would then only have to change the .html font-size value if you want to see your designs change dependant on the window screens. Yes, I’ve done a very simple example but let me show you screenshots of an outcome from a code structure that is way more complex (won’t show you a code, it’ll give you a headache)

For this webiste, the html font-size value is 10px. Let’s change my window to be seen as a phone, and all I would have to do is change one value in my code to get a full-out display

Here, the html font-size value is 5px.

Get what I mean now? All it takes for one switch of a value and our whole design can now adapt to the window. Talk about delegating a ton of work to the computer rather than us.

BUT WAIT A MINUTE, here comes the problemo

What if the default browser font is not 16px?

We all are human, we all have our preferences right and probably have changed our browser’s font-size here and there, as some websites have tiny fonts….

Thus, our strategy so far hasn’t adapted completely to people’s browsers. However, ahah! There can be a simple solution to this. We simply have to change the set font-size value to a percentage! That way, our font-size value is more abstract than specific and can adapt to the user’s…browser’s default…font choice (that was phrased weirdly)

//Before:.html {

font-size: 10px;

}

//After:.html {

font-size: 62.5%;

}

Since my default browser’s font is 16px (and if yours is 16px, this should work). The math is that 62.5% of 16px is 10 (which is the font-size we want). Nothing in our design should change at this point.

By doing this, whatever the default font-size is for the user’s browser, the percentage would just adapt to that value and our design should stay intact. Hah! It’s unit-proof in that aspect now and can be more adaptable to people’s browsers!!

Math can require us to use more brainpower, but when it comes to good CSS practice that makes our code effective, as a traumatised math victim, I can say this is worth practicing. On that note, that’s enough math explaining for me for the day! See ya next time x

Fun fact of the Day:

For all the people who don’t know how to chill or take a break, better learn quickly on how to do so unless you want your body to tell you otherwise, and from experience, that’s a blow.