CSS units have two basic types:

• Absolute units
• Relative units

Absolute units are fixed and do not depend on the size of the parent element or the viewport. Examples of absolute units are pixels (px), points (pt), and centimeters (cm).

Relative units, on the other hand, are flexible – and just as the name implies, they are relative to the parent element’s size, the viewport’s size, or the root element’s font size.

Since there are a number of CSS unit types, you might have trouble deciding which unit to use for a particular measurement. This article will demonstrate the best use cases for each of these units. We'll focus on the most important and frequently used CSS units here: rem, em, vh, vw, %, and the all too familiar absolute unit – px.

Table of Contents:

1. Rem (rem)
2. Em (em)
3. Percentages (%)
4. Viewport height (vh)
5. Viewport width (vw)
6. [ch](#heading-ch)
7. Pixels (px)

Rem (rem)

The rem unit in CSS stands for "root em". It is a relative unit of measurement that is relative to the font size of the root element. One rem is equal to the font size of the root element. The root element defaults to 16px in many browsers, so 1rem is equal to 16px.

Let's look at an example to see how you can use rem:

    <div class="container">
      <h1>Best Practices for CSS units</h1>
      <p>This is a paragraph with font size set to 2rem</p>
    </div>

html {
    font-size: 16px;
}
.container {
   margin: 20px;
   padding: 20px;
   border: 1px solid #ddd;
}
h1 {
    font-size: 2rem;
    color: #0077cc;
}
p {
    font-size: 1rem;
    color: #0077cc;
}

The h1 element is set to 2rem which means that it's two times the root element, the html element. 2 x 16px = 32, so the h1 element is 32px.

Here's the root element at 16px:

The font-size when the root element is at 16px

Then in the below image, the root element was set to 20px so 2rem of the h1 element is 2 x 20px making the h1 text 40px.

The font-size when the root element is at 20px

In your code editor, as you change the base font size in the HTML selector of the CSS file, you can see how the font sizes defined in rem units also adjusts equally.

By using rem units, you can easily scale the font size of the body elements proportionally to the HTML font size.

It's a good idea to use rem to set font sizes because it is designed to adapt to the user's browser preferences. This helps with accessibility. It is also good for consistent scaling, as changing the HTML font size will affect the elements with rem units.

Using rem or em for padding or margin also offers advantages in terms of providing a scalable and maintainable design. When you change the font size at the top level, all rem values automatically gets updated and adjusts according to the base front size. rem or em should be used for margin or padding depending on if you want the element to be relative to the root element or the parent.

Em (em)

Similar to rem, em is a relative unit of measurement. But unlike rem, em is relative to the font size of the parent element or the font-size of the nearest parent with a defined font size.

Let's look at an example:

    <div class="container">
      <p>This is a paragraph with the font size set to 2em</p>
    </div>

body {
     font-size: 20px;
}
.container {
   margin: 20px;
   padding: 20px;
   border: 1px solid #ddd;
}
p {
    font-size: 2em;
    color: #0077cc;
}

The p element is set to 2em which means it is 2 times the font size of the parent element. 2 x 20 is 40px so the p element is 40px.

The font-size of the paragraph element set at 2em

Let's look at another example:

    <div class="parent-element">
      This is the nearest parent
      <div class="child-element">
        <p>This is the child</p>
      </div>
    </div>

.parent-element {
  font-size: 20px;
  margin: 20px;
  padding: 20px;
  border: 1px solid #ddd;
}
p {
  font-size: 2em;
  color: #0077cc;
}

Here, the font size of the child-element is set to 2 times that of the parent element. That makes it 40px (2 x 20).

The font-size of the child-element at 2em of the parent-element

If you need to scale an element to be consistent with the parent, then em is the right direction to go in. em is good for creating scalable and responsive designs.

It is recommended to use em for setting margin and padding. When you use em for margin and padding, they adjust according to the font size of the parent element. This creates a consistent design, especially when users adjust their browser's default font size. When you set margin or padding with em, the layouts also become more flexible and adaptable, and elements can scale in proportion.

em is also important for media queries to enhance responsiveness and adaptability.

Percentages (%)

Percentages are relative units that render an element relative to the size of the element's parent. They serve as a percentage of their containing block and are always relative to their nearest parent.

Here's an example:

<div class="container">
    <div class="box"></div>
</div>

.container {
  width: 80%;
  height: 80%;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
}
.box {
  width: 50%;
  height: 50%;
  background-color: #0077cc;
}

Here, the box element is 50% the width and height of the parent container, so it takes up half of the container.

The container is 80% of the viewport by width and height. If you try to resize the browser, you will notice that the percentage is maintained. Similarly, the box within the container is 50% of the container by width and height.

The box element at 50% of its containing element

When you want an element to take up a certain amount of the containing block, then you should go with percentages.

Percentages can be used for positioning elements relative to their containing element. This comes in handy when creating layouts where elements need to be positioned based on a percentage of the parent.

Setting widths and heights in percentages also allows elements to scale relative to their containing element.

Viewport height (vh)

vh is a relative unit of measurement that represents the visible height area of the browser window.

Here's an example of how it works:

 <div class="viewport-height">

.viewport-height {
    height: 100vh;
    background-color: bisque;
}

This code snippet shows the viewport-height element set t0 100vh so it covers all of the viewport height.

The viewport area covered by 100vh

.box {
  width: 50vw;
  height: 30vh;
  background-color: antiquewhite;
}

Let's change it slightly:

<div class="relative-height"></div>

.relative-height {
    height: 40vh;
    background-color: bisque;
}

In the above example, the relative-height element is set to 40vh, so it covers that fraction of the viewport height.

The viewport area covered by 40vh

Using vh for height allows elements to maintain the set height of the viewport. This is particularly useful when you want an element to take up a certain percentage of the screen's height.

vh can also be used to set font sizes that are responsive to the viewport height. This is useful for responsive typography. When you don't want an element to be relative to the parent, you can use vh.

There can be inconsistencies in the way devices interpret the vh unit due to variation in browsers so make sure you use it with caution to prevent problems.

Viewport width (vw)

vw is similar to vh but vw refers to the width of the browser window. It is used to set elements based on the horizontal axis of the browser window.

Here's an example:

  <body>
    <div class="box"></div>
  </body>

Here, the box is specified as 50vw of the overall viewport width. As the browser shrinks and increases, watch how the box adjusts to maintain the specified width.

The box element occupying 50% of the viewport width

vw is particularly useful and encouraged when you want an element to take a certain width of the viewport. vw is also used for font sizes in media query for responsive typography.

ch

ch is a relative unit that scales based on the width of characters. 1ch is equal to the width of the "0" character in the current font.

    <div>
      <p>Some text specified with ch unit</p>
    </div>

body {
  font-family: 'Courier New', monospace; 
  margin: 0;
}
p {
    font-size: 2ch; 
    line-height: 1.5; 
  }

The font size of the text inside the <p> element is set to be twice the width of the "0" character in the current font.

ch is particularly useful for defining the max character length on a single line. It provides a size relative to the width of characters, making it flexible, adaptable, and enhances readability. It allows you to set a max-width for text containers based on the width of characters.

Pixels (px)

px is an absolute unit of measurement used to specify length and sizes. px is a fixed unit and should be used sparingly and with caution for responsive design.

    <div class="container">
      <p>This element has a fixed size using px units.</p>
    </div>

.container {
    width: 300px; 
    padding: 20px;
    background-color: #f0f0f0;
  }

  p {
    font-size: 16px;
    color: #333;
  }

In this snippet, the size of the <p> text remains a certain size. It remains fixed at 16px and doesn't change regardless of whether the size of the browser changes.

When you resize the browser, you will observe that the container doesn't scale according to the viewport, and neither does the text scale according to the container.

The main reason why using px is not always recommended for responsive design lies in its fixed nature. Unlike relative units, such as percentages, em, rem, and viewport units (vw, vh), px does not adjust based on the user's preferences or the size of the viewport.

px is useful when you want to specify a fixed size of an element, such as a border size or an image size.

An example:

img {
    width: 200px;
    height: 150px;
}

Conclusion

These are the most frequently used units in CSS, so it's important to be familiar with when to use them.

To set font sizes, you'll commonly use rem or ch. For width, percentages are often recommended. You can also consider using vw and ch. For height, consider using %, rem, or vh.

For padding or margin, you'll typically use rem or em depending on your specific requirements.

Feel free to refer back to this article whenever you need guidance on the best units for setting measurements or lengths.

Thanks for reading!

Let’s dive a little into JavaScript behind the scenes. The abstract part that you can’t exactly see.

Why should a seemingly abstract subject matter to you? An understanding of the inner workings of JavaScript allows you to explore the language beyond the surface level and from a deeper perspective.

It provides contextual information on the language and how the JavaScript engine optimizes code. This will give you some important foundational knowledge which shapes the way you write code. It also helps you write more efficient, scalable, and maintainable code.

The JavaScript Engine

JavaScript Engine showing the Call stack and the Heap

The JavaScript engine is simply a computer program that interprets JavaScript code. The engine is responsible for executing the code.

Every major browser has a JavaScript engine that executes JavaScript code. The most popular one is the Google Chrome V8 engine. Google’s V8 powers Google Chrome and Node.js, a back-end JavaScript runtime environment used to build server-side applications.

Other major browser engines include:

• SpiderMonkey developed by Mozilla for Firefox
• JavaScriptCore which powers the Safari browser
• Chakra which powers Internet Explorer

Any JavaScript engine typically contains a call stack and a heap. The call stack is where the code is executed. The heap is an unstructured memory pool that stores all the objects needed for the application.

Since the computer’s processor only understands binary, 0’s and 1’s, the code has to be translated to 0’s and 1’s.

When a code snippet passes into the engine, the code is initially parsed, that is read. The code is subsequently parsed to a data structure called the abstract syntax tree (AST). The resulting tree is then used to create machine codes.

Execution happens in the JavaScript engine call stack using the execution context. This is the environment where JavaScript code is executed.

A diagram illustration showing the JavaScript execution process

The JavaScript Runtime

Think of the JavaScript runtime as the house that encompasses all the components needed to run JavaScript. This house comprises the JavaScript engine, Web APIs, and the callback queue.

Web APIs are functionalities that are provided to the engine but are not part of the JavaScript language. They are accessible to the engine through the browser and help access data or enhance browser functionality. Examples are the Document Object Model (DOM) and Fetch APIs.

A diagram of JavaScript Runtime in the Browser containing the JavaScript Engine, WEB APIs, and the Callback Queue

The callback queue includes callback functions that are ready to be executed. The callback queue ensures that callbacks are executed in the First-In-First-Out (FIFO) method and they get passed into the stack when it’s empty.

The browser runtime and Node.js are examples of runtime environments.

When JavaScript executes within a web browser it is operating within the browser’s runtime environment. The browser runtime environment provides access to the DOM which enables interaction with web page elements, handling events, and manipulating the page structure.

Node.js provides a server-side runtime environment for executing JavaScript outside the browser. Because it executes JavaScript outside the browser, it does not have access to the web APIs. Instead, the Node.js runtime environment replaces it with something called C++ bindings and the thread pool.

JavaScript Optimization Strategies

Modern JavaScript engines have some optimization strategies put in place to enhance the performance of code execution. These optimizations occur dynamically during the execution process. Let's look at some of these strategies.

Just-in-Time compilation

The process that involves the translation of JavaScript code into machine code occurs using compilation and interpretation.

In compilation, the entire source code is converted into machine code at once and written into a binary file to be executed by the computer.

A diagram showing the code compilation process

In contrast, during interpretation, the interpreter goes through the source code and interprets it line by line, executing each line as it encounters it.

A diagram showing the code interpretation process

JavaScript used to be an interpreted language, but interpreted languages are slower compared to compiled languages.

In order to optimize the performance of web applications, JavaScript combines both compilation and interpretation. This is called Just-in-Time compilation. This method compiles the entire code into machine code all at once and executes it.

A diagram showing Just-in-Time compilation of code

Just-in-Time compilation involves the same two processes as regular compilation, but here the machine code isn’t written into a binary file. The code is also executed right away after compilation.

This has had a significant impact on the speed of code execution in JavaScript. So hopefully this helps dispel the notion that JavaScript is a purely interpreted language.

To fully optimize JavaScript code, the engine first creates an unoptimized version of the machine code so it can start executing immediately. While that is ongoing, the code is being re-optimized and recompiled in the background of the currently running program execution. This is done multiple times to produce the final, most optimized version.

The process of parsing, compilation, and execution happens in some special thread in the engine that can’t be accessed from the code.

What is Inlining?

Inlining is another optimization technique JavaScript employs to improve performance and speed.

function add(a, b) {
  return a + b;
}

let result = 0;
result = result + 5;
result = result + 3;

console.log(result); //

In this snippet, the original add() function is not directly called. Instead, the code inside the function return a + b; is inserted at the call site.

This optimization is done especially for functions that are called repeatedly. The JavaScript engine will run the function as it normally would. But as the function gets called often, the engine replaces the function call with the actual code of the function at the call site. This helps to prevent several function calls and improve performance.

Performance Considerations

Several factors affect the performance of your web application. As the JavaScript engine employs some strategies to ensure optimization, there are also some best practices to be taken into consideration by developers for efficient execution.

Techniques such as minimizing DOM manipulation and reducing function calls enhance code performance.

Frequent access and interaction to the DOM slows down the rendering of web pages and contributes to performance lag. Since you can’t altogether avoid interacting with the DOM, you can minimize interaction by batching DOM updates to reduce overhead.

Additionally, reducing function calls takes up the performance a notch. By reducing function calls, you streamline your code and make it more efficient making your JavaScript applications faster and more responsive.

// Inefficient code with unnecessary function calls
function calculateTotal(a, b, c) {
  return addNumbers(a, b) + multiplyNumbers(c, b);
}
function addNumbers(x, y) {
  return x + y;
}
function multiplyNumbers(x, y) {
  return x * y;
}
// Improved code with reduced function calls
function calculateTotal(a, b, c) {
  const sum = a + b;
  return sum + c * b;
}
console.log(calculateTotal(2, 3, 4)); // Output: 23

In the inefficient code, the calculateTotal() function makes separate function calls to addNumbers() and multiplyNumbers(). This causes function call overhead.

In the improved code, the function calls are reduced by directly performing the addition and multiplication operations within the calculateTotal() function. By reducing function calls, the code becomes more efficient and improves execution speed.

Future JavaScript Developments and Trends

There will continue to be improvements and advancements in JavaScript engines and runtime environments. These changes are geared towards improving the performance of web applications.

One such advancement is the rise of WebAssembly. WebAssembly brings near-native performance to web applications and supports multiple languages. It opens up new possibilities for performance optimization and execution speed.

It is important for JavaScript developers to stay updated with these trends and adapt new coding best practices accordingly.

Conclusion

So many processes are involved in how your JavaScript code is being parsed until it renders a functional web application.

This article provides a high-level overview of the main concepts. It explains how the JavaScript engine executes code, the runtime, and its components. It also goes on to explain optimization strategies and highlight performance considerations.

Understanding how JavaScript operates behind the scenes shapes the way developers approach problems and write more efficient codes. It also helps them stay ahead of the learning curve and adapt easily to future changes in JavaScript features.

For more in-depth learning, you can visit these resources:

• Execution context
• Event loop
• Microtask queueing

If you enjoyed reading this article, then connect with me on Twitter and LinkedIn where I share my knowledge.