Units in CSS

CSS has many different units for measuring and expresssing length but in an effort to be quick and accurate - they fall into two categories: Absolute and Relative.

Absolute Lengths - where the units are fixed
- px for pixels ( Note: pixels are relative to the viewing device. )
- cm for centimeters
Relative Lengths - where units are expressed relative to another length property.
- em - relative to the font-size of the element itself
- rem - relative to the root element.
- vw - relative to 1% of width of viewport ( browser window size )
- vh - relative to 1% of height of viewport (browser window size)
- vmin - relative to 1% of the smaller of the viewport's width and height. Look at both the width and the height and use whichever is shorter.

vmin In More Detail

vmin is a unit in CSS that is used to specify a size in terms of the viewport dimensions. It represents the smaller of vw (viewport width) and vh (viewport height).

Here's how it works:

1 vmin is equivalent to 1% of the smaller of the viewport's width and height.

For example, if the viewport (browser window) is 800px wide and 600px tall, then:

1 vw (1% of viewport width) = 8px
1 vh (1% of viewport height) = 6px

In this case, 1vmin would be equal to 6px since it's the smaller value between vw and vh.

Rainbow Cat

Practical Examples

Text resizing based on viewport: If you want text to resize based on the viewport dimensions but you always want to use the smaller value, you can use vmin.
```
 h1 {
     font-size: 10vmin;  /* The font size will be 10% of the smaller viewport dimension */
 }
```
So, if your viewport was 1000px by 700px, the font size would be 70px (since 700px is the smaller dimension and 10% of 700 is 70).
Creating a responsive square: If you want to create a square that maintains its shape (equal width and height) while resizing based on the viewport dimensions, you can use vmin for both width and height.
```
 .responsive-square {
     width: 50vmin;
     height: 50vmin;
     background-color: #ff5733;
 }
```
In a 1200px by 800px viewport, the square would be 400px by 400px.
Responsive background icon: If you have a background icon and you want it to resize with the viewport, but never get too big relative to the screen size, you can use vmin:
```
 .icon-background {
     background: url('icon.png') no-repeat center/20vmin;
 }
```
Here, the background icon size will be 20% of the smaller viewport dimension.

In general, vmin is useful in responsive designs where you want to ensure that elements resize proportionally to the smallest viewport dimension. Caveat: it's important to be cautious as using vmin extensively might lead to design issues on extreme aspect ratios (very wide or very tall viewports).

Rem vs Em Units

Both rem and em are relative font-size units in CSS. Here's a brief overview of each:

em:
- The value of 1em is equal to the font-size of the element on which it's used.
- If you use em on nested elements, it can compound, as em will be relative to the font-size of its direct parent.

Example:

    div {
        font-size: 16px; 
    }

    span {
        font-size: 2em;  /* This will be 32px, as it's 2 times the font-size of its parent (div) */
    }

rem:
- Stands for "Root em".
- The value of 1rem is always equal to the font-size of the root element, usually the <html> element.
- It doesn't compound the way em does, because it always refers to the root element's font size, not any parent element.

Example:

    html {
        font-size: 16px;
    }

    div {
        font-size: 2rem;  /* This will always be 32px regardless of its parent's font-size, because it's based on the root font-size */
    }

Which is preferred and why?

Both units have their places in design and development, but rem has become more popular for a few reasons:

Consistency: As rem is always relative to the root element's font size, it offers a consistent and predictable scaling across the website. With em, it's easy to accidentally compound sizes in nested elements, leading to unexpected results.
Ease of Global Resizing: By changing the font-size on the root element, you can easily scale the entire website's sizing (when rem units are used), which can be handy for theming or accessibility features.
Clarity: When other developers inspect or collaborate on the code, using rem offers clarity as they can always refer to the root's font-size to understand the unit's actual pixel value.

However, em is still valuable in certain scenarios:

Component-Level Scaling: If you're creating a reusable component (like a widget or a module) and you want its inner elements to scale based on the component's base size, em is very handy. Adjusting the component's font-size will proportionally scale all its inner elements set with em units.
Vertical Rhythm and Typography: em can be useful for maintaining vertical rhythm in typography or setting spacing related directly to font size, like margins or paddings.

In conclusion, while both rem and em have their use cases, most developers prefer rem for general layout and component sizing because of its consistency and predictability. However, its good to know the ins and outs of both rem and em.

Percentage Unit in CSS

In CSS, the percentage (%) unit is a relative unit that represents a portion of a particular reference value. The meaning of the percentage value and its reference point can vary depending on the property with which it's used.

Here's how the percentage unit is commonly interpreted with various CSS properties:

Width & Height:

The percentage value is relative to the width or height of the parent element.

  .container {
      width: 300px;
      height: 200px;
  }

  .child {
      width: 50%;  /* This will be 150px */
      height: 50%; /* This will be 100px */
  }

Padding & Margin:
- For padding-top, padding-bottom, margin-top, and margin-bottom: The percentage is relative to the width of the containing element.
- For padding-left, padding-right, margin-left, and margin-right: The percentage is also relative to the width of the containing element.
  
  This behavior might seem counterintuitive, especially for top and bottom paddings/margins, but it ensures consistent spacing in responsive designs.
```
  .container {
      width: 300px;
  }

  .child {
      padding-top: 10%;  /* This will be 30px */
  }
```

Font-Size:

The percentage value is relative to the parent element's font size.

  .parent {
      font-size: 16px;
  }

  .child {
      font-size: 150%;  /* This will be 24px (150% of 16px) */
  }

Line-Height:

When used with line-height, the percentage is relative to the current element's font size.

  p {
      font-size: 16px;
      line-height: 150%;  /* This will be 24px (150% of 16px) */
  }

Background Position:
- Specifies the position of a background image. A value of 0% aligns the top or left side of the image with the corresponding top or left side of the container. 100% aligns the bottom or right side of the image with the corresponding bottom or right side of the container.
- See more detail here --> https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Others:
- Percentage values in other properties, such as background-size or transform, have their specific reference points, and you'd need to refer to the respective property definition to understand the behavior.

Advantages of using percentages:

Responsiveness: Percentage units are inherently responsive. They adapt based on the size of their reference, which often is a parent or containing element.
Fluid Layouts: They're essential for creating fluid grid systems, especially before the widespread use of CSS Grid and Flexbox.
Scalability: Makes it easier to scale elements uniformly, like in zooming or theming scenarios.

When designing with percentages, it's crucial to understand the context and the reference point from which the percentage derives its actual computed value.

Helpful links

https://gist.github.com/basham/2175a16ab7c60ce8e001 ( CSS Units Best Practices)
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position (Background Position)

Tech Notes