I used px for Years—Until I Discovered Common Sense

For a long time in my career, I used px (pixels) for everything in CSS. It felt precise, predictable, and easy to control. But recently, I’ve changed my mind. I’ve surrendered to rem and em after realizing their true power. Now, I barely touch px unles…


This content originally appeared on DEV Community and was authored by Aliasger Ratlam

For a long time in my career, I used px (pixels) for everything in CSS. It felt precise, predictable, and easy to control. But recently, I’ve changed my mind. I’ve surrendered to rem and em after realizing their true power. Now, I barely touch px unless I absolutely have to. Here’s why.

Image description

The Problem with px

At first, pixels seem like the best unit of measurement. Set a button to 50px, and it will always be 50px. But that’s exactly the problem—px is too rigid. It doesn’t adapt well to different screen sizes, zoom levels, or user preferences. This means:

  1. Users who increase their browser’s font size for accessibility won’t see the changes.
  2. Responsive designs require constant media queries to adjust fixed pixel values.
  3. Maintaining a consistent, scalable design across devices becomes harder.

The Superpower of rem and em

Once I fully understood rem and em, I realized they solve all these issues beautifully.

rem (Root Em)

  1. rem is relative to the root font size (html { font-size: 16px; } means 1rem = 16px).
  2. If a user changes their browser’s default font size, everything using rem scales accordingly.
  3. Want to scale everything up or down? Just change the root font size.

Example:

button {
  font-size: 1.25rem; /* Scales with the root font size */
  padding: 0.5rem 1rem;
}

em (Relative to Parent)

  1. em is relative to the font size of its parent element.
  2. Great for keeping elements proportional inside components.
  3. Nested em values can multiply, which can be useful (or tricky if not careful).

Example:

.card {
  font-size: 1.2em;
}
.card button {
  font-size: 0.9em; /* Relative to .card's font size */
}

Where I Still Use px

Though I avoid px for most things, I still use it for:

  1. Borders (1px is fine because borders shouldn’t scale unpredictably).
  2. Box shadows (for a consistent appearance).
  3. Media queries (though em and rem work, many browsers handle px better).

Image description


This content originally appeared on DEV Community and was authored by Aliasger Ratlam


Print Share Comment Cite Upload Translate Updates
APA

Aliasger Ratlam | Sciencx (2025-03-25T18:16:03+00:00) I used px for Years—Until I Discovered Common Sense. Retrieved from https://www.scien.cx/2025/03/25/i-used-px-for-years-until-i-discovered-common-sense/

MLA
" » I used px for Years—Until I Discovered Common Sense." Aliasger Ratlam | Sciencx - Tuesday March 25, 2025, https://www.scien.cx/2025/03/25/i-used-px-for-years-until-i-discovered-common-sense/
HARVARD
Aliasger Ratlam | Sciencx Tuesday March 25, 2025 » I used px for Years—Until I Discovered Common Sense., viewed ,<https://www.scien.cx/2025/03/25/i-used-px-for-years-until-i-discovered-common-sense/>
VANCOUVER
Aliasger Ratlam | Sciencx - » I used px for Years—Until I Discovered Common Sense. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/03/25/i-used-px-for-years-until-i-discovered-common-sense/
CHICAGO
" » I used px for Years—Until I Discovered Common Sense." Aliasger Ratlam | Sciencx - Accessed . https://www.scien.cx/2025/03/25/i-used-px-for-years-until-i-discovered-common-sense/
IEEE
" » I used px for Years—Until I Discovered Common Sense." Aliasger Ratlam | Sciencx [Online]. Available: https://www.scien.cx/2025/03/25/i-used-px-for-years-until-i-discovered-common-sense/. [Accessed: ]
rf:citation
» I used px for Years—Until I Discovered Common Sense | Aliasger Ratlam | Sciencx | https://www.scien.cx/2025/03/25/i-used-px-for-years-until-i-discovered-common-sense/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts