CSS style consolidation, style.css filesize reduction

Wish List
1

My “style.css” is large at 109KB, in large part due to redundancy and repetition. I consulted ChatGPT on how this could be addressed within Blocs. I would like to provide @norm with the following analysis:

SUMMARY: If Blocs implements rule deduplication + utility CSS generation, the existing 109KB style.css file can be shrunk to approximately 10–25 KB (80–90% smaller) without losing any styling.

1. Detect and merge identical declarations into shared utility classes

Your style.css contains hundreds of repetitive, nearly identical classes, for example:

  • Many classes only change margin-top, margin-bottom, or padding-top.

  • Many classes repeat identical font settings, colors, or border-radius definitions.

  • Many product pages generate repeated classes like .btn-style, .btn-style-two, .btn-style-faq, .btn-2000m, .btn-1480dr-blu, etc.
    All of them differ only by color or width.

:check_mark: Blocs could implement:

Automatic Rule Consolidation Algorithm

  • Scan all rules.

  • Detect rules with identical declarations.

  • Extract shared declarations into a single utility class.

  • Replace individual classes with the utility.

Example

These rules:

.btn-style:hover { background-color:#4975AB; }
.btn-style-two:hover { background-color:#4975AB; }
.btn-style-faq:hover { background-color:#4975AB; }

Could be automatically consolidated into:

.btn-hover-blue:hover { background-color:#4975AB; }

Then Blocs assigns that class to each button.

This eliminates hundreds of duplicated lines.

2. Auto-generate atomic / utility CSS instead of component CSS

Blocs currently outputs a new class for every element, e.g.:

.row-bloc-22-margin-bottom { margin-bottom:14px; }
.row-bloc-23-margin-bottom { margin-bottom:35px; }
.row-66-margin-bottom { margin-bottom:20px; }

These should not be separate classes.

:check_mark: Replace with utilities:

.mb-14 { margin-bottom:14px; }
.mb-35 { margin-bottom:35px; }
.mb-20 { margin-bottom:20px; }

Or ideally stick to a scale, so only ~10 utilities ever appear.

This removes thousands of redundant custom classes.

3. Deduplicate redundant repeated color declarations

You have hundreds of declarations like:

color:#000000!important;
color:#424242!important;
color:#414141!important;
color:#5E5E5E!important;
background-color:#FFFFFF;
background-color:#C0C0C0;
background-color:#D5D5D5;

These can be output once as variables or utilities:

.c-black-0 { color:#000000!important; }
.c-black-42 { color:#424242!important; }
.bg-white { background-color:#ffffff; }
.bg-gray-c0 { background-color:#C0C0C0; }

Blocs should detect repeated values and convert them into utilities.

4. Merge repetitive radius classes

The file has many declarations like:

border-radius:15px 15px 15px 15px;
border-radius:10px 10px 10px 10px;
border-radius:5px 5px 5px 5px;

These should be generated only once:

.br-5 { border-radius:5px; }
.br-10 { border-radius:10px; }
.br-15 { border-radius:15px; }

5. Replace page-specific auto-named classes with semantic utilities

Blocs currently generates classes like:

h3-bloc-14-style
container-div-0-style
row-bloc-23-margin-top

Those should be replaced by semantic utilities:

.h3-xl
.container-1-4
.mt-35

This dramatically reduces code volume and makes the CSS reusable.

6. Automatically run the output through CSS optimization tools

After building the CSS, Blocs’ export pipeline should include:

:check_mark: PostCSS + cssnano

  • Minifies

  • Removes duplicates

  • Merges selectors

  • Removes unused whitespace

:check_mark: PurgeCSS

(Optional depending on project needs)

Removes classes not found in HTML.
Your file has many classes that never appear in HTML once the site is built.

7. Use CSS variables for shared values

Many values appear 300–500 times:

  • Colors (#4B92DC, #4975AB, #265383, etc.)

  • Font sizes (18px, 22px, 24px…)

  • Border radius values

  • Padding values

Blocs should define:

:root {
–color-primary: #4B92DC;
–color-primary-hover: #4975AB;
–fs-18: 18px;
–fs-22: 22px;
–radius-lg: 15px;
}

Then reuse:

.btn-style {
font-size: var(–fs-18);
background-color: var(–color-primary);
border-radius: var(–radius-lg);
}

8. Generate reusable component classes instead of repeating full styles

There are many near-duplicate “price box” or “card” styles:

.tirelocks-pricebox
.pricebox-1460h
.pricebox-2460
.pricebox-sensors

These can be 1 component:

.pricebox {
background:#fff;
color:#000;
font-size:24px;
box-shadow:0 2px 8px #7F7F7F;
border-radius:15px;
padding:20px;
}

And only data-specific mods added when required:

.pricebox–wide { width:350px; }
.pricebox–narrow { width:200px; }

9. Assign classes to HTML intelligently instead of generating unique classes

Blocs could detect repeated patterns in the DOM and reuse classes across elements automatically:

  • If 41 elements share the same inline margin, Blocs should assign one shared CSS class, not 41 unique ones.

  • If multiple headings share font size, weight, and color, they should receive a shared heading class.

10. Stop embedding fonts redundantly

Your CSS includes multiple font-face declarations.

Blocs should detect:

  • identical @font-face rules

  • unused font weights

  • duplicate src declarations

Then consolidate into a single optimized block.

1 Like
2

Simple in theory. But that’s not how Blocs works.

3

Large CSS files are often the price you pay for using large CSS frameworks. I spent some time testing various tools that promise to reduce CSS files. It might work for very small, simple pages, but as soon as the website becomes more complex and perhaps also involves JS elements, it no longer works.

At least, I couldn’t get it to work and gave up looking for a solution…

It’s like as @Jannis writes, in theory it’s already solved…