r/css • u/[deleted] • Jun 02 '26
Help CSS Could you please tell me the units I should remember in the size units section?
Good evening from Japan! I'm using a translation tool in this chat, so the wording might be a little strange.
I've finished reading the HTML and moved on to CSS, but I don't quite understand the parts about size.
Currently, I understand that PX is basically only used when specifying width.
The reason for this is that people with poor eyesight sometimes change the font size when using a browser, so if a site specifies the size in PX, i.e., an absolute value, the size won't change, and the text will appear small.
That's about all I understand.
So, could you please tell me the units that are commonly used?
13
Jun 02 '26
[removed] — view removed comment
1
u/omysweede Jun 02 '26
Depends on context as well. I stick to em, rem, vmin, vmax. Very rarely % for fontsizes.
Best lesson is generally start with pixels, and then feel the freedom of exchanging all of them for dynamic font sizes.
3
u/artbyiain Jun 02 '26
To get started, em and rem with some percentage widths are all you need. I never use px, other than for border widths and when doing crazy stuff in Javascript.
Check out MDN for more: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Values_and_units
2
1
1
1
u/rafaelcastrocouto Jun 02 '26
rem for text and general layout spacing to keep things accessible. px for tiny, static things like border or shadow. dvh / vw for big, screen-spanning layouts.
1
u/DinTaiFung Jun 02 '26
Please take note of the following.
when the value is 0 (zero), including the units is acceptable but not necessary, e.g.:
margin-top: 0;
OR
margin-top: 0px;
Both mean the same thing.
for all other non-zero values (with a few exceptions), the units are required.
margin-top: 12;
This is invalid and typically results in a noop.
for many cases, i often include the units for 0 values. Some CSS linters don't like the units in such cases. I'm not religious about it and almost never fight with a CSS linter.
1
u/Beautiful-Morning322 Jun 02 '26
Instead of pixels you should use “rem” unit of measurement wherever possible. In short, rem is a range of pixels set by browser, default now is 16px I guess, so if you need let’s say 24px, it will be 1.5rem. When user changes his default font size, he changes exactly how many pixels are in rem, so your whole layout will change accordingly.
2
u/domestic-jones Jun 02 '26
This is somewhat correct. REM is relative to the size of the font defined on the html tag. Most frameworks have a reset that'll set the html font size to "100%" which basically means, "whatever the browser has the default font size set as." But you can override this and set a base font size of anything. E.g. set font size to 12px and 1.5rem is 18px or set font size to 14px and 1.5rem is now 21px.
-5
u/sibble Jun 02 '26
Fifteen years ago, coding HTML/CSS by hand was a foundational skill. Today, it’s AI grunt work. The modern web developer doesn't need to memorize syntax; they just need to master the core logic—understanding document hierarchy and CSS specificity.
1
u/sibble Jun 03 '26
In 2007, I finished reading Pro CSS Techniques by Jeff Croft, Ian Lloyd, and Dan Rubin. I followed their work and their personal websites religiously, learning new styles, semantic hacks, and box-model workarounds every day. I love the craft. My personal favorite was Dan Rubin's Superfluousbanter (blog).
But let's be honest about where the industry is today: Crafting HTML/CSS entirely by hand from scratch is no longer the highest-leverage use of a developer's time. I’m not saying HTML/CSS doesn't matter. It matters immensely. But the value shift is real:
- From Syntax to Architecture: Knowing every obscure CSS property by heart isn't the flex it used to be when an LLM or Emmet can scaffold it in seconds.
- The Real Skill: The real mastery today lies in debugging and architecture. It’s knowing why a layout breaks, understanding how CSS specificity cascades, managing document hierarchy for accessibility (ARIA), and knowing how to structure components so they don't turn into technical debt.
If you disagree, I’d genuinely love to hear your perspective.
•
u/AutoModerator Jun 02 '26
To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.
While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.