REM or EM - What should I use?? 

That moment when you love your code. @9:23

Very informative...learned a lot... :D

Hey Travis! Nice vid, but why don't you define :root { font-size: 10px; // base value to simplify the maths } body { font-size: 1.6rem; // set default font-size } this would be easier to calculate font-sizes, widths/heights, margins/paddings. Or would this be bad behaviour?

This is literally the best video on youtube 👍👍

How do I give this video 10 thumbs up? That visual explanation of EM vs REM helped a ton. Now I get it!

I am watching this in dec 14th, 2016 I am one year late ;(

oh wow my mind is blown. Now I have refactor all my css. This has made my file so much smaller. LOLs.

The best thing I could find near this topic. Thanks *thump up*

real world examples, thanks travis :)

Very good explanation, thank you.

hey Travis, I like the way you express and just chill out the learning process. Thanks. I have two questions for you. CSS transitions and SVG are two areas which we can use to make cool animations and drawings. would you mind to cover them these separately in upcoming episodes?? what level of animation can we achieve using them. Also there is another element Canvas. how can we utilize it too?? for eg. Google maps is using canvas a lot. Thanks!!

Why we using :root we can use also html,body {} i never see :root we can do like that html, body{ font-size: 20px; } h1 { font-size: 2rem or 200% }

Meh, I'm still going to use px instead of rems and ems. You have much more control, there is much less math and it is much less frustrating for the designer. This is something we often ignore. If I am constantly frustrated then I am less likely to be able to design well. I can visualize what a div 650px wide and tall would look like in my head, not 40.625em. I'd rather have my media queries be 3 times longer than constantly having to first find the right value in px and then convert to ems. I see people doing stuff like font-size:calc(.4rem + .58vw) and I wonder if these people are just show offs, over compensating or just crazy. Besides, px scales just fine with Ctrl +.

Does Santa style his lists? And does he used rems or ems on them? I mean...is it even a ol or an ul? naughty or nice is a boolean or a class? P.S: this is so mad helpful. I'm thinking of creating my own jekyll site that's minimal and typography based, and rem/em mix will be a beauty for black and white fancy type site. YES!

Thanks Travis, this helped so much. I had no idea rems and ems were this powerful!

Is there any reason for using :root? i everytime see that people place the fontsize in body tag, but you put it in :root... so... Why? ;D If you dont make any :root rules then is body the next root ore not? And is :root working on IE8 to? caniuse.com/#search=%3Aroot

I noticed when you move forward/back a few centimetres you quickly blur out. Have you considered increasing the aperture on your camera so that you can move however your want and still appear in-focus?

Excellent video. I immediately got the idea of how to use rems and ems. We miss you on DevTips Trevis!!!

Do you have anything other than Twitter, where I can follow you? I miss you and your videos a lot :')

This will make my media inquiries 30 times shorter. O_o wish I was doing this root/rem stuff before!

Hi Trav, so if I wanted to add padding and margin to the H1 tag for example, I would add it in ems which will then reflect the font size of that H1 tag? What about if we have a main container that has a font size and we want to add the padding in ems for the children containers. Will it reflect the font size of the parent container?

@9:23 Weird sex noises while coding just cause you love your code? My kinda guy!

Love the little jokes + rich presentation > subbed

Awesome video, I should start utilizing rem and em sizes now!

Thank you so much, great and helpful video!

Amazing thanks for your time and efforts

Thanks man, very well demonstration

Man I love ya ha ha ha. Thank you incredibly much 😊

the only problem i have is with your sass syntax. y u su sauce -_-

Very cool video. Thanks.

thanks for that. that was pretty intresting

This kind of video is my personal favourite, its kinda like a deep dive into CSS in little pieces , please keep them coming, your great at this

I love you for these!!!! thanks 😀

Ha! after years i see this .. awesome!

Great tutorial! Thanks man!

He didn’t say opAcity at all in this vid.

WOW... Thanks travis!!! :D

Thanks for the explanation, had to go through the mobile part twice but its pretty clear now.

Great tutorial! Got to remember this when developing new sites - always end up writing my font-size way too much

Excellent example! It helped a lot.

Superb,,,.. Thanks Travis..

XD The thumbs up transition. Anyways, great video as always!

mr travis, i just love you so much

Best teacher in da world.

Is that a GG effect at 9:22? Loved it.

Did you really just say yolo? lol oh my. :D

Great tuts! loved it:)))

This has been incredibly helpful. Thanks so much!

Ha ha ha ha, miss you Travis!!!

Awesome video. Thanx Travis... 😂😂😂😂😄😄😄😊☺😊☺

Travis, your tech videos are awesome! But your personal videos are amazing!! (like the ones about google and softskills)

Gracias mi pana, siempre tuve esa duda!

hi... i like u man....you make it simple and easy to understand .... and u have good presentation ,

@devtips yoyo hope google is treating you well. can someone or yourself explain the difference in this in css. .classname .anotherclassname vs .classname, .anotherclassname vs .classname>.anotherclassname much help is understanding the differences and when to use what helps. thanks much 😊

Awesome, Thx!!! Mind answering my question on your video "How to make a full screen video background" xD, should be first or second.

Cool video man. that info will go a long way in making RDW's for me, appreciate it keep up the cool videos. KEEP ON HACKING man.

Okay.. While watching on rems and ems.. Using this style would make me think hard calculating everything, widths, heights, padding all of them! Sooner or later my brain processing capacity will be at masters level! LOL!

Hey Awesome Video !!!! I just love it .. Can i ask you an personal question ? What do you use to grow your beard like that..i love your beard actually ?

a comment from Paris, France : 3 months i've been watching your channel, i learnt tons of useful incredible tricks you are very clear (and fun to watch), plus your english is so understandable . you're a natural born teacher i'm currently teaching html / CSS to people who plan to change job, and i'm giving them your knowledge, in french ! take care

It's been weeks the last time I watched your videos. Well busy with my work life. And nooow! I learned something again from you! Man I'll convert myself into this one, gotta love being the unique guy using this instead of pixels. @_@

How to decide whether to use rem or @media querys or different CSS classes in terms of adaptive design(desktop/mobile/iPad)?

Another good one. Especially using the em for borders/padding. That was a nice eyeopener.

Who woulda thought I'd laugh out loud during a video on [r]ems! Thanks for the chuckles bro..oh, and the useful content. Will file in my 'stuff I should try and remember so one day my web pages don't suck' drawer. >

Thanks for the video Travis! Very useful as always. Keep on hacking! ;)

beard game strong

Travis, thank you thank you thank you! By the way, what's that music at the end?! :D

Dude you rock!

My mind == absolutely blown! Thanks for the insight Travis!

Thanks a lot

Thanks a lot, Very helpful information.

This example made me to read about specific property - :root. Great! Nice lesson!

Hey Travis, thanks for you video. As I understand with this approach I have to write font-size: 1rem for each particular "atomic" block. Am I right?

Thank you Travis, another great explanation :)

Helpful Video :) One question: What's the endcard song? :D

Great video!

Always been too lazy to play around with these units, thinking that it would never be that useful, oh how wrong I was. Thanks for that!

This really helped me with my confusion :) Thanks

This is great!

Nice video :) I'm curious to know how you'd deal with spacing of elements (i.e. the heading, paragraphs, buttons, etc) would this be sized in EM or REM?

Great reasoning on the topic! This is way more helpful rather than something like a static list of use cases... Thanks!

@3:50 Pirates!

Hey Trev, i'd love to see a video about SEO in the view of a web designer (not the back link stuff).

This was really useful and informative, thanks Travis. As usual

Sweet, thanks Travis, always inspiring and all that with fun (at least for us/me?)

FEELS SOOOO GOOD!!(2) really nice, really powerfull. tnks a lot

codepen is pretty awesome. so is jsfiddle. c9 also.

Wonderful explanation. I finally understood em & rem, and why to use them. Thank you!

Very helpful. Thank you so much !!!!!

YOLO?! Dude, seriously -.- Thanks for the vid. btw

Thanks Mr Travis for the super handsome video

That was very insightful, and will definitely bring the quality of my work up. Thank you! Im self taught so I do not have the luxury of someone to help me understand these things, you have solved that problem my friend. I love the way you shortened the media query task.

Thanks, This was greatly helpful

Thanks for sharing! Very interesting to know the difference between rem and em.

Hi Travis! Why don't you use emmet?

Thank you, very informative!

This video was sooooooo helpful ! Thank You !

Excited to do more em and rem stuff! For sure the best explanation I've seen on RU-vid so far on the subject 👏

cool and helpful video Travis :)

great video. can you make video about bem?

This is one of those vids that are so good that 10 minutes seems like 30 seconds!