CSS Section Minifier
Minifies CSS section by section — works in both .css files and <style> blocks inside .html files.
- ✅ One class/rule per line
- ✅ Preserves
/* 1. Section */ comments
- ✅ Works inside HTML
<style> tags
- ✅ Minify selection, one block, or whole file
- ✅ Right-click menus + keyboard shortcuts
- ✅ Status bar button always visible
How to Use
In a CSS file — right-click
Open any .css file → right-click anywhere:
| Option |
What it does |
| CSS: Minify Entire File |
Replaces the whole file with minified CSS |
| CSS: Minify Selected CSS Only |
Only minifies the text you highlighted |
| CSS: Minify & Save as .min.css |
Saves a new styles.min.css alongside the original |
In an HTML file — right-click
Open any .html file → right-click anywhere:
| Option |
What it does |
CSS: Minify All <style> Blocks |
Finds every <style>…</style> and minifies each one |
CSS: Minify <style> Block at Cursor |
Minifies only the <style> block your cursor is inside |
| CSS: Minify Selected CSS Only |
Minifies only the text you highlighted |
A button appears at the bottom-right of VS Code whenever a .css or .html file is open.
Click it to open the actions menu.
Keyboard Shortcuts
| Action |
Windows |
Mac |
| Open menu |
Ctrl+Alt+C |
Cmd+Alt+C |
| Minify file / all style blocks |
Ctrl+Alt+M |
Cmd+Alt+M |
| Minify selection |
Ctrl+Alt+S |
Cmd+Alt+S |
| Save as .min.css / minify block at cursor |
Ctrl+Alt+Shift+M |
Cmd+Alt+Shift+M |
Example — CSS file
Before:
/* 1. Global Resets */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #fff;
}
@media (max-width: 767px) {
.container { padding: 0 20px; }
h1 { font-size: 36px; }
}
After:
/* 1. Global Resets */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,sans-serif;background:#fff;}
@media(max-width:767px){
.container{padding:0 20px;}
h1{font-size:36px;}
}
Example — HTML file
Before:
<head>
<style>
body {
background: #fff;
color: #333;
}
.hero {
font-size: 48px;
padding: 40px 0;
}
</style>
</head>
After (Minify All <style> Blocks):
<head>
<style>
body{background:#fff;color:#333;}
.hero{font-size:48px;padding:40px 0;}
</style>
</head>
Settings
Go to Settings → search CSS Section Minifier:
| Setting |
Default |
Description |
cssMinifier.preserveSectionComments |
true |
Keep /* 1. Section */ headings |
cssMinifier.removeAllComments |
false |
Strip every comment |
cssMinifier.addNewlineBetweenSections |
true |
Blank line before each section |
cssMinifier.outputSuffix |
.min |
Suffix for saved file (styles.min.css) |
Installation
- Download
css-section-minifier.vsix
- Open VS Code
- Press
Ctrl+Shift+P → Extensions: Install from VSIX...
- Select the file → Reload VS Code
License
MIT
☕ Support
If this extension saves you time, consider buying the developer a coffee!
You can also open it from inside VS Code:
- Click the ☕ CSS Minify status bar button → ☕ Buy Me a Coffee
- Or
Ctrl+Shift+P → CSS Minifier: ☕ Buy Me a Coffee
- Or after any successful minify action, click ☕ Buy Me a Coffee in the toast notification
