(CSS in JS) Is there any difference between “18px” vs 18 when specifying sizes

I’ve worked as React Native dev for a while, and am kinda new to web dev. Recently came across codebase where people specify sizes in different formats mixed together.

(From what I’ve read so far, from the accessibility standpoint it’s often best to specify font sizes / margins with rem or em, and yet there’s a lot of people discussing when to use which.)

But let’s just say you want to specify sizes in pixels. There are just 2 ways you can do in “CSS in JS”.

With string

  fontSize: "15px",
  lineHeight: "22.5px",
  marginTop: "20px",

With number

  fontSize: 15,
  lineHeight: 22.5,
  marginTop: 20,

Is there any difference between the 2? Would love to know if there’s any pros and cons. Thanks!

Answer

They do exactly the same, but the 2nd is shorter, then I would recommend the 2nd.

Advertisement

Answer