• CSS Preprocessor
• CSS Sprites

CSS Preprocessor

CSS Preprocessors are tools that extend the functionality of vanilla CSS by adding a wide variety of logical syntax such as you might see in a normal programming language. A browser can only understand CSS, which at times may not be enough to write clean and reusable rules.

A few of most popular CSS preprocessors:

• Sass
• LESS
• Stylus
• PostCSS

.circle {
  border: 1px solid #ccc;
  border-radius: 50px;
  overflow: hidden;
}
.avatar {
  @extend .circle;
}

.circle {
  border: 1px solid #ccc;
  border-radius: 50px;
  overflow: hidden;
}

.avatar:extend(.circle) {}

CSS Sprites

CSS Sprites are a means of combining multiple images into a single image file for use on a website. Using the image sprites instead of separate images will significantly reduce the number of HTTP requests a browser makes to the server, which can be very effective for improving the loading time of web pages and overall site performance.

Resource:. Svg sprit