Merge branch 'master' into releases/august

documentation/blog/2022-12-21-em-vs-rem.md → documentation/blog/2024-07-19-em-vs-rem.md

@@ -4,10 +4,12 @@ description: We'll look at everything em and rem, their differences, when and ho
 slug: rem-vs-em
 authors: fimber_elemuwa
 tags: [css]
-image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-12-21-em-vs-rem/social.png
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-12-21-em-vs-rem/social-2.png
 hide_table_of_contents: false
 ---
 
+**This article was last updated on July 19, 2024, to add sections for Accessibility Considerations, Advanced Usage of em and rem, and Performance Implications.**
+
 ## Introduction
 
 CSS is a crucial part of any website’s design, but understanding the nuances of how to use it can be tricky. One of the most important things to understand is the difference between using rem and em in CSS and why/when you should be using either.
@@ -18,7 +20,6 @@ In this article, we'll look at everything em and rem, their differences, when an
 
 Steps we'll cover in this article:
 
-- [Prerequisites](#prerequisites)
 - [em and rem units in CSS](#em-and-rem-units-in-css)
 - [What is CSS em](#what-is-css-em)
 - [What is CSS rem](#what-is-css-rem)
@@ -155,7 +156,93 @@ As you can see, despite the child-2 div being inside another divs, it goes back
 
 Using the "rem" unit allows for a more scalable and flexible way to size elements on a page because if you change the font-size of the root element, all elements sized with the "rem" unit will be updated automatically to maintain their relative size.
 
-Here’s a codepen link if you’d like to play with the above code a bit.
+## Advanced Usage of em and rem
+
+I thought it would be useful to dive deeper into some advanced techniques for using em and rem units in our CSS. These units offer a lot of flexibility, and we can leverage them to create more dynamic and responsive designs.
+
+Here are a few advanced strategies for using em and rem units:
+
+### Compound Scaling with em
+
+We can use em units to create compound scaling effects within nested elements. For instance, if we set a parent element to have a font size of 2em, and a child element to have a font size of 1.5em, the child’s font size will be 1.5 times the parent’s size, creating a scalable hierarchy.
+
+```css
+.parent {
+  font-size: 2em;
+}
+
+.child {
+  font-size: 1.5em; /* This will be 1.5 * 2em = 3em */
+}
+```
+
+### Responsive Typography with rem
+
+Using rem units for typography ensures that all text scales relative to the root font size. By adjusting the root font size with media queries, we can easily create responsive typography.
+
+```css
+html {
+  font-size: 16px; /* Default root font size */
+}
+
+@media (max-width: 600px) {
+  html {
+    font-size: 14px; /* Smaller font size for small screens */
+  }
+}
+
+body {
+  font-size: 1rem; /* 1rem = 16px by default, 14px on small screens */
+}
+```
+
+### Padding and Margins with rem
+
+We can use rem units for padding and margins to maintain consistent spacing across different screen sizes. This approach ensures that spacing scales appropriately when the root font size changes.
+
+```css
+.container {
+  padding: 2rem; /* Padding will scale with the root font size */
+  margin: 1rem auto;
+}
+```
+
+### Combining em and rem
+
+In some cases, combining em and rem can offer the best of both worlds. For example, we can use rem units for global settings and em units for local, relative adjustments within components.
+
+```css
+.global {
+  font-size: 1rem; /* Relative to root */
+}
+
+.component {
+  font-size: 1.5em; /* Relative to its parent, .global in this case */
+}
+```
+
+### Creating Modular Scales
+We can use em or rem units to create modular scales, which are predefined ratios for scaling text and other elements. This method provides a consistent visual rhythm across the site.
+
+```css
+html {
+  font-size: 16px; /* Base font size */
+}
+
+.h1 {
+  font-size: 3rem; /* 48px */
+}
+
+.h2 {
+  font-size: 2.25rem; /* 36px */
+}
+
+.h3 {
+  font-size: 1.5rem; /* 24px */
+}
+```
+
+By using these advanced techniques, we can create more adaptable and visually consistent designs.
 
 ## Differences between em and rem units
 
@@ -177,6 +264,77 @@ em and rem are by far the best units to use today when specifying length, but li
 
 Overall, while em and rem units can be helpful in certain situations, it's important to consider their potential drawbacks carefully and whether they are the best choice for your project.
 
+## Accessibility Considerations
+
+Let me share some thoughts on the ways in which we could make our web designs much more accessible using em and rem units in CSS. Things that really make a difference, for instance, are how the content would be perceived or accessed by a user with disabilities.
+
+You can increase the accessibility of our web pages using em and rem units. Here's why:
+
+### Scalable Font Sizes
+
+Because I used either `em` or `rem` for the font sizes, then text on the webpage gets scalable to respond to user needs. This is beneficial to people with visual impairments who may desire a larger text size for comfort in reading. Browsers can scale these units more easily than fixed units.
+
+### Consistent Spacing
+
+By using rem for margins, padding, and other spacing properties, it's certain everything scales consistently. This could improve the predictability of the layout structure, which can help users with cognitive disabilities.
+
+### Responsive Design
+
+As already explained, both 'em' and 'rem' units are relative units, so designing a responsible layout becomes a lot easier. The layout then dynamically adapts according to screen size because the sizes of screens change, which is paramount as users are from diverse devices and can use assistive technologies.
+
+### User Preferences
+
+Some users set up their browser to have a different font size from the default to increase readability. By designing with `rem` units, user styles get respected, and our content stays accessible.
+
+### Reduced Motion and Distraction
+
+Em and rem units make it more in control to resize and reposition the elements, reducing unnecessary movement and distractions visually—a very challenging experience for users with attention-related disabilities. In short, we use em and rem units in our CSS to make the design more accessible and user-friendly. It is such a small but powerful way of using inclusive and adaptive design to cater to a wider scope of user needs.
+
+## Implications on Performance
+
+I just want to share with you some insights on what impacts performance when using em or rem units within CSS. Understanding them can serve to make better decisions for the design of our stylesheets to ensure the applications run smoothly.
+
+### Reflow and Repaint
+
+When we use em units, the browser needs to calculate sizes relative to their parent elements. That can lead to reflows and repaints when structures are deeply nested. This is one reason using rem units can make for less complexity; in this case, all calculations are only relative to the root element.
+
+### Maintaining Consistency
+
+The application will use rem units consistently. This is really helpful for responsive design. Changing the root font size will scale all other elements that use rem units in a proportional manner. It could lead to an easier rendering process within the browser.
+
+### Memory Usage
+
+Em units might mean more memory usage: Since each element with an em unit needs to remember the computed value based on its parent, rem units based on the root may keep memory usage small and predictable.
+
+### CSS Calculations
+
+The browser computes the size and position of elements used by CSS calculations. This makes em units slightly heavy computationally, as they have to reference parents in any given case. Rem units in some calculations have only one reference point; therefore, it can be much simpler, making it computationally faster.
+
+### Layout Stability
+
+Units in rem can maintain layout stability between multiple screen sizes and resolutions. Because the base font size inside the root element is set, and the unit for element sizes is rem, all other elements will be resized proportionally; as a result, layout shifting will be lesser, and user experience will increase.
+
+### Readability and Maintenance
+
+Using rem units will allow you to have more readability and maintainability in your stylesheet. Defining this base value globally makes the size of elements at a glance predictable and visible in your stylesheets. This could cut down on hours spent debugging layout concerns and actually make development a whole lot more productive.
+
+For example, let's consider this quick example to draw out the points above:
+
+```css
+html {
+  font-size: 16px; /* Base font size */
+}
+
+.container {
+  padding: 2rem; /* Easier for the browser to calculate */
+  margin: 1rem auto;
+}
+
+.child {
+  font-size: 1.5em; /* Less work for the browser to calculate */
+}
+```
+
 ## Conclusion
 
 If you made it here, congratulations! You now know all there is to know about em and rem and why we need them. Though they’re both similar, they’re distinctly different and should be treated accordingly.