If your project doesn’t require IE8 compatibility, try implementing this CSS development strategy.

CSS code without external chain!

That is, don’t make any HTTP/HTTPS requests from CSS files.

For example, if we used to display a small icon background, the CSS code would look like this:

.icon-arrow-down {
    background-image: url(./images/arrow-down.svg);
}Copy the code

Implementing a CSS development strategy without external links looks like this:

.icon-arrow-down {
    background-image: url("Data: image/SVG + XML, % 3 CSVG XMLNS = 'http://www.w3.org/2000/svg' viewBox = '0 0 24 and 32' % 3 e % 3 cpath d = 'M12.012 19.676 L-8.508-8.508-2.502 2.502 11.011 11.011 11.011-11.011-2.502-2.502z'%3E%3C/path%3E%3C/ SVG %3E");
}Copy the code

Originally the graphics of the outer chain are all inline.

Benefits of CSS development strategies without external links

1. Faster page rendering

Material inlining, fewer HTTP/HTTPS requests, and definitely faster than many requests. In this day and age, the performance bottleneck for small files is not traffic, but initiating and receiving requests.

2. More convenient migration and reference

Since there are no external links, it’s as simple as copying your CSS file to the layout or component you wrote for someone else to use. But if it is the traditional kind of external chain implementation, still need to copy the static image resources together, the cost is high.

Low coupling, migration and ease of reference are the most important reasons I’m pushing CSS development without external chains, and it’s really comfortable.

3. No cross-domain problems

Font files, for example, have cross-domain problems. Inlining does not have this problem.

3. No merger costs

Previously in order to save HTTP requests, small ICONS together, no external chain CSS development direct icon merged in CSS, no extra effort, development is easier and more convenient. Use which icon, copy and paste it, easy and high performance, not too good oh!

CSS development practices without external links

Usually, the main external chain resources in CSS files are small ICONS, so, deal with small ICONS, CSS can say goodbye to the external chain.

  1. Say goodbye to PNG graphics and go all vector graphics.
  2. SVG Sprites is preferred, and small ICONS do not appear in CSS.
  3. If the project is small and doesn’t use many ICONS, there is no need to use SVG Sprites, which are still somewhat expensive to maintain. We do not need to write our own ICONS. We can directly copy the CSS ICONS already written by others. For this, see “Code Separation and Collation of Common pure CSS ICONS”, which I organized for this purpose last week. See the documentation here.
  4. The ICONS that CSS can control are limitedUse escape formatInline SVG so that we can set the color.

    The specific steps are as follows: Go to the small icon platform to download, or design tool (Sketch or FigMA) to export the original SVG icon, then open the SVGO compression tool I made, copy or select or drag the icon to upload, at this time, the input box on the right is to escape the SVG inline code:

    Use double quotation marks inside the url() function, for example:

    .icon-arrow-down {
    background-image: url("Data: image/SVG + XML, % 3 CSVG XMLNS = 'http://www.w3.org/2000/svg' viewBox = '0 0 24 and 32' % 3 e % 3 cpath d = 'M12.012 19.676 L-8.508-8.508-2.502 2.502 11.011 11.011 11.011-11.011-2.502-2.502z'%3E%3C/path%3E%3C/ SVG %3E");
}Copy the code

    If you are not too keen on icon UI styling, you can also use the more than 1500 small ICONS provided in the tool page:

    Click any of the small ICONS, you can copy various forms of inline code, a total of four types of inline, HTML inline, Base64 inline, CSS escape inline, etc. :

The same is true if the project has other graphics other than regular small ICONS.

Possible areas of controversy

1. Files are much bigger. Yes, it’s possible that a 10K CSS is now 100K. However, the total size of the resources we load does not increase. Instead, some materials can be GZIP as characters, but smaller.

Then, now in this era, has been the era of video traffic, young people watch video traffic overhead without blinking an eye, 100K CSS size (transmission only more than 30 K), this volume is worth mentioning, there is no impact at all.

In the 5G era, 100K CSS files are just like a grain of sand. Don’t worry about them.

2. Increased CSS rendering time

Yes, CSS rendering times will increase. But the Web pages we developed were so simple that the added render time was negligible.

Moreover, the negligible amount of time added to CSS rendering is dwarfed by the amount of request time saved. Instead of sending 10 people to school, they used to transport one person at a time at a one-way speed of 60; We’re moving 10 people at a time, 50 one way. It goes without saying which saves more time.

A new strategy for a new era

Now in this era, the flow is not valuable, there is no need to point JS, CSS size penny-pinnings, so we can rest assured that CSS external chain resources inline.

In this day and age, when hardware and software are so powerful, the calculation and rendering times really don’t matter. It’s the time saved by inlining that counts.

Finally, mention one more sentence, the most important role of CSS chain is not performance ah what, the key is to maintain no coupling, after maintenance ah care, more worry, more convenient. Therefore, make sure that there are no external links in the CSS, otherwise this most important advantage will not exist.