DEV Community

Cover image for Your Guide to Hacking CSS Units and Dimensions — One Size Could Fit All

Your Guide to Hacking CSS Units and Dimensions — One Size Could Fit All

Favour Felix on September 12, 2022

Amidst the px, em, percent, and so much more units made available with CSS, confusions on the perfect units for dimensioning your HTML elements cou...
Collapse
 
heyt0pe profile image
Akinlabi Temitope Paul

Really nice read. I’ve always preferred using the min() max() functions rather than explicitly defining the max-width etc. because I feel it looks cleaner.

width: min(520px, 90%);
As opposed to
width: 90%;
max-width: 520px;

But I’ll start looking into using more of relative units.

Collapse
 
favourfelix profile image
Favour Felix

Thank you Temitope! I would also explore using the min-max syntax.

Collapse
 
temitayospec profile image
Temitayo-spec

The article is really nice, learnt a lot ngl... though I do use 'em' a lot haven't considered using "rem" , which I'll start using.
The max-min syntax, will definitely start applying that too.

Collapse
 
favourfelix profile image
Favour Felix

I'm happy there's a lot for you to take away from the article.

Collapse
 
ecj222 profile image
Enoch Chejieh

Very interesting read, you unraveled the important areas around CSS for me.

Collapse
 
favourfelix profile image
Favour Felix

Thank you!🤝🏿

Collapse
 
harithmetic1 profile image
HARITH O ONIGEMO

I've been using CSS for a while and the rules you mentioned here just make sense. 👌🏽

Collapse
 
favourfelix profile image
Favour Felix

Glad it did!

Collapse
 
shaikmoabdullah profile image
Shaik Mohammad Abdullah

These were nice points to think about and work on. Thanks for sharing.

Collapse
 
favourfelix profile image
Favour Felix

Thank you!

Collapse
 
joshanaba profile image
Josh Anaba

Thank you for this, basically writing less lines of css that saves time and achieves more.

Collapse
 
favourfelix profile image
Favour Felix

Glad I could help :)