Tidy and mobile-friendly css needs some requirements to make the website faster:
- Common css file, which is totally reusable in every page
It is not only styling for the elements that appear in every page, but also, writing the common class names and selectors. In this file you need to create your own markdown and use it in entire development process
- Separate css file for every template, which is loaded if and only if template is included
Firstly having one css file for a page is not efficient, as it would be bigger in size comparing to smaller css files. Also, small css files gives opportunity to render styles asynchronously as well as conditionally.
- Define
critical(styles the browser needs to render the visible content) andnon-critical(styles apply to content that's not immediately visible) css files
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>- Separate media files to avoid having unused css in different screens
If styling is organized with media queries, it is better to keep them in different files . Because, they are accepted as unused css in improper screens. They do not need to be rendered in every page and every device, oppositely they should be called when there is a need. For instance:
<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">The media request indicates the type of device and, if necessary, the conditions of the request