CSS Optimization

CSS Optimization

CSS optimization focuses on making stylesheets faster to load, easier to maintain, and simpler to scale. Well-optimized CSS improves page performance and reduces bugs caused by conflicts.

Why Optimize CSS?

• Faster page load times
• Smaller CSS files
• Fewer specificity conflicts
• Easier long-term maintenance

Remove Unused CSS

Unused selectors increase file size and slow down rendering. Only keep styles that are actually used.

• Delete old or unused classes
• Avoid copying large CSS blocks “just in case”
• Split CSS by feature or page when possible

Use Simple Selectors

Overly complex selectors are harder to read and maintain.

/* Bad */
#main .content .card ul li a {
  color: blue;
}

/* Better */
.card-link {
  color: blue;
}

Avoid Over-Specificity

High specificity makes styles difficult to override and leads to !important abuse.

/* Avoid */
#header .nav ul li a {
  color: red;
}

/* Prefer */
.nav-link {
  color: red;
}

Reuse Classes

Create reusable utility and component classes instead of repeating styles.

.text-center {
  text-align: center;
}

.mt-20 {
  margin-top: 20px;
}

Reusable classes reduce duplication and keep CSS smaller.

Use Shorthand Properties

Shorthand properties reduce file size and improve readability.

/* Long */
.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

/* Shorthand */
.box {
  margin: 10px 20px;
}

Minimize Repaints and Layout Shifts

Avoid animating properties that trigger layout recalculations.

Prefer:

• transform
• opacity

Avoid animating:

• width, height
• top, left
• margin

/* Better animation */
.card {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  opacity: 0.95;
}

Organize Your CSS

Keep a consistent structure in your stylesheet:

• Base styles (reset, typography)
• Layout styles
• Components
• Utilities

Clear structure improves readability and collaboration.

Production Tips

• Minify CSS in production
• Combine files when possible
• Load critical CSS first
• Avoid inline styles

Code Challenge

Goal: Refactor CSS to make it simpler and more reusable.

Original CSS:

#content .card p {
  margin-top: 20px;
  text-align: center;
}

Task:

• Reduce selector complexity
• Create a reusable class
• Keep the same visual result

Try a Solution:

.text-center {
  text-align: center;
}

.mt-20 {
  margin-top: 20px;
}

What’s Next?

Next, you will learn how to make your CSS more accessible for all users.