CSS is one of the major parts of any frontend that helps in providing the styling information to the browser for how it should style the page it has received from the server. Usually, a frontend may have a number of CSS files associated with it. One of the possible optimizations that we can achieve here is by making these CSS files get fetched in parallel.

So, let's imagine we have the following set of CSS files, namely main.css, reset.css, responsive.css, and grid.css, which our frontend needs to load. The way we allow the browser to load all these files in parallel is by linking them into the frontend using the HTML link tag instead of CSS imports, which causes the CSS files to be loaded synchronously.

Here, the following code snippet is preferred:

<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/responsive.css" />
<link rel="stylesheet" href="css/grid.css" />

This is preferred over the use of the following code snippet:

# main.css
@import url("css/reset.css")
@import url("css/responsive.css")
@import url("css/grid.css")

Most current browsers have the optimization to not block the rendering of a page until the link resource has been fetched. This allows the user to have a quick page load, and the styles are then later applied to the page as the style sheets are made available to the browser. Also, all of these resources mentioned through the link tag are loaded in parallel by the browser by sending multiple requests to the server, hence allowing for a faster page load.