Minimizing CSS

Reduce on-page CSS output and complexity using Master CSS APIs.

Bloated CSS keyframes

Defining animation keyframes the traditional way.

.animation1 {    animation: animation1 .5s}@keyframes animation1 { … }@keyframes animation2 { … }/* Hundreds of keyframe rules here... */

This method works, but there's a major drawback: even if you only use animation1, all other keyframes (e.g., animation2 and others) will still be included in the final CSS output and runtime styles, resulting in bloated stylesheets.

Master CSS animations are generated on-demand by parsing the values of animation and animation-name, then injecting only the necessary keyframes into the final stylesheet.

Customize your keyframes using the Master CSS animations API.

export default {    animations: {        animation1: { … },         animation2: { … },         …    }}

To apply the custom animation1, use the animation syntax:

<div class="@animation1|.5s"></div>

This will generate only the relevant CSS based on the usage:

@keyframes animation1 { … }.\@animation1\|\.5s {    animation: animation1 .5s}

Bloated CSS variables

Defining CSS variables the traditional way.

--primary: #000;--secondary: #fff;--tertiary: #f00;... /* Hundreds of CSS variables here... */

Although this works, unused variables still end up in the final stylesheet, increasing the CSS payload unnecessarily.

Master CSS variables are generated by analyzing class declarations and injecting only the variables that are actually used.

Customize your CSS variables using the Master CSS variables API.

export default {    variables: {        primary: '#000',         secondary: '#fff',         tertiary: '#f00'     }}

To use a variable like primary, simply reference it in a class. Master CSS will automatically generate the corresponding --primary declaration:

<div class="bg:primary"></div><div class="bg:$(primary)"></div>

Benefits of Reducing CSS Bloat

Minifying and optimizing CSS enhances overall performance and yields measurable improvements:

1. Faster Load Times: Smaller stylesheets mean faster page loads. This significantly improves user experience and contributes to better SEO rankings, as search engines prioritize fast-loading websites.
2. Lower Bandwidth Usage: By shipping only the necessary CSS, less data is transferred over the network—ideal for users on mobile or limited connections.
3. Better Runtime Performance: With fewer styles to parse and render, browsers can process your pages more efficiently. This is especially valuable on low-end devices and legacy browsers.