CSS performance optimization principles

CSS performance optimization is key to improving webpage loading speed and rendering efficiency. Proper optimization strategies can reduce resource consumption and enhance user experience, especially in complex projects. The following explores specific optimization methods from multiple dimensions.

Reduce Selector Complexity

Browsers parse CSS selectors from right to left, and excessive nesting increases matching costs. Avoid nesting beyond three levels and prioritize class selectors.

/* Not recommended */
div#header ul.nav li.active a { color: red; }

/* Recommended */
.nav-active { color: red; }

ID selectors have the highest specificity but are difficult to reuse, so their use should be limited. Attribute selectors like [type="text"] perform poorly and should be used sparingly on frequently manipulated elements.

Compress and Merge Files

Automate processing with build tools:

# Example using clean-css
cleancss -o styles.min.css styles.css

When merging files, note:

1. Merge by module rather than in bulk
2. Keep @charset rules at the beginning
3. Avoid @import declarations

Avoid Reflows and Repaints

The following properties trigger reflows:

width, height, margin, padding
position, float, display
font-size, line-height

Use transform and opacity for animations:

.box {
  transition: transform 0.3s;
}
.box:hover {
  transform: scale(1.05);
}

Use Layout Methods Wisely

Flexbox performs better than traditional floats:

.container {
  display: flex;
  gap: 12px; /* Replaces margin spacing */
}

Grid layout is suitable for two-dimensional layouts but has higher initialization costs; avoid using it for very long lists.

Optimize Font Loading

Use font-display to control font rendering strategies:

@font-face {
  font-family: 'Custom';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

Preload critical fonts:

<link rel="preload" href="font.woff2" as="font" crossorigin>

Optimize Media Queries

Load styles on demand:

/* Mobile-first */
.component { padding: 8px; }

@media (min-width: 768px) {
  .component { padding: 16px; }
}

Avoid redefining breakpoints; use Sass variables for management:

$breakpoints: (
  tablet: 768px,
  desktop: 1200px
);

@mixin respond-to($name) {
  @media (min-width: map-get($breakpoints, $name)) {
    @content;
  }
}

Leverage Hardware Acceleration

Enable GPU acceleration for animated elements:

.accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
}

Avoid creating too many composite layers; use Chrome DevTools' Layers panel to inspect.

Reduce Redundant Code

Enable automatic compression with CSS-in-JS:

// styled-components example
const Button = styled.button`
  ${({ primary }) => primary && `
    background: blue;
    color: white;
  `}
`;

Regularly remove unused styles with PurgeCSS:

// webpack configuration example
const PurgeCSSPlugin = require('purgecss-webpack-plugin');

plugins: [
  new PurgeCSSPlugin({
    paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
  })
]

Optimize Image Styles

Avoid using CSS for image effects:

/* Not recommended */
.img-placeholder {
  width: 100%;
  height: 200px;
  background: url('placeholder.jpg') no-repeat;
  filter: blur(5px);
}

/* Recommended */
<img src="placeholder.jpg" alt="" loading="lazy">

Variables and Inheritance

Use CSS variables to reduce repetition:

:root {
  --primary-color: #3498db;
  --spacing-unit: 8px;
}

.button {
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
  background: var(--primary-color);
}

Inherit common styles to reduce code volume:

%ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title {
  @extend %ellipsis;
  max-width: 200px;
}

Apply Modern CSS Features

Use gap instead of margin for layouts:

.grid {
  display: grid;
  gap: 16px; /* Replaces traditional margin solutions */
}

Test experimental features:

@supports (aspect-ratio: 1) {
  .card {
    aspect-ratio: 16/9;
  }
}

Extract Critical CSS

Inline critical above-the-fold styles:

<style>
  .header, .hero { opacity: 0; }
  .critical { display: block !important; }
</style>

Load non-critical CSS asynchronously:

<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>

Browser-Specific Optimizations

Optimize scrolling for Chromium browsers:

.container {
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE */
}
.container::-webkit-scrollbar { 
  display: none; /* Chrome/Safari */
}

Use will-change cautiously to pre-declare changes:

.animated-element {
  will-change: transform, opacity;
}