# Unminify CSS for WordPress: DevTools, editors, and when to rebuild > Make minified theme or plugin CSS readable with DevTools, Prettier, or your editor - plus when source maps and a proper rebuild beat hand-editing. Source: https://larsik.com/blog/how-to-de-minimizing-css-to-readable-format/ WordPress # Unminify CSS for WordPress: DevTools, editors, and when to rebuild Make minified theme or plugin CSS readable with DevTools, Prettier, or your editor - plus when source maps and a proper rebuild beat hand-editing. August 10, 2015· Updated August 4, 2026· 4 min read·[Lars Koudal](/about/) - CSS - WordPress - devtools - performance ![Flat illustration of web design and development across desktop, tablet, and phone](/images/uploads/photodune-6171820-web-design-development-illustration-m-w400.webp) Optimizing CSS keeps pages fast - but minified theme or plugin CSS is painful to edit. You inherit a one-line stylesheet, need a small color or layout tweak, and suddenly you are staring at thousands of characters with no line breaks. This workflow still matters in 2026 for WordPress work: child themes, emergency hotfixes, and third-party CSS you cannot rebuild from source. For day-to-day inspection, **browser DevTools** pretty-print is often enough. Use an editor when you want a saved, formatted file to diff or commit. ## When you actually need to unminify Typical situations: - **Legacy WordPress themes** that ship only `style.min.css` (no SCSS, no source maps) - **Third-party plugin CSS** you must override carefully in a child theme - **Emergency hotfixes** on production where rebuilding assets is not an option today - **Audits** where you need to understand what a vendor stylesheet is doing before you delete or override it When you control the build pipeline, fix the root cause instead: edit SCSS/PostCSS sources, enable source maps, and recompile. Unminifying a production bundle by hand should be a temporary bridge, not your permanent process. ## Fastest option: browser DevTools In Chrome, Edge, or Firefox: 1. Open DevTools → **Sources** (or Debugger). 2. Find the CSS file in the page resources. 3. Click the **pretty-print** / `{}` button. You get readable CSS instantly without copying files around. That is ideal for answering “which rule is winning?” and for drafting a child-theme override. It is less ideal when you need a permanent file in git. You can also inspect a selected element under **Elements** → Styles, then jump to the rule location. For cascade fights, that path is usually faster than unminifying the whole file. ## Prettier, VS Code, and Cursor If the CSS is already on disk (or you pasted it into a file): 1. Save as `.css` so the editor picks the right language mode. 2. Run **Format Document** (VS Code / Cursor) or Prettier on the file. 3. Optionally enable `printWidth` that matches your team’s style. Prettier and built-in formatters handle braces, selectors, and declarations more reliably than manual “select all `}`” tricks. Use them when the file is yours to keep. For one-off pastes where Prettier is not installed, VS Code’s built-in CSS formatter or an online CSS beautifier works - just do not paste secrets or customer-specific URLs into random third-party sites. ## Sublime Text workflow (still valid) If you live in Sublime Text: 1. Paste minified CSS into a new file → **Set Syntax: CSS** (Command Palette: `Set Syntax: CSS`). 2. Select a closing `}` → **Command+D** (or Ctrl+D) to multi-select → add line breaks around braces. 3. Repeat for commas and semicolons to break selectors and declarations onto separate lines. 4. Run **Reindent Lines** from the Command Palette. The point is the same as Prettier: break on `}`, `,`, `{`, and `;`, then reindent. Example source I used years ago: [Surbma’s Divi + Gravity Forms CSS](https://github.com/Surbma/surbma-divi-gravity-forms) - thanks [Peter Ambrus](https://surbma.hu/) for the sample. ## WordPress-specific advice - **Prefer a child theme** for overrides. Do not edit parent theme CSS that updates will wipe. - **Override narrowly.** Copy only the rules you change; do not dump an entire unminified vendor file into the child theme. - **Enqueue order matters.** Load your override after the theme/plugin CSS, or use a more specific selector. - **Caching.** After CSS changes, purge page cache, CDN, and browser cache before you declare victory. - **Critical CSS / optimization plugins** can inline or defer CSS. If your change “does not show,” check whether an optimization plugin is serving a cached or combined stylesheet. For broader performance work beyond readable CSS, see [PageSpeed & Performance](/services/pagespeed-performance/). ## Source maps beat hand-unminifying If the site has a modern build (Vite, webpack, esbuild, theme tooling): - Enable **source maps** in development - Edit the real source (SCSS, CSS modules, PostCSS) - Let the bundler emit minified CSS for production That keeps diffs small, reviews sane, and production assets optimized. Hand-formatting a minified file and committing it as the new source of truth is how teams accumulate unmaintainable CSS. ## Performance reminder Readable CSS is for **developers**, not browsers. Re-minify or run your normal build before deploy if you edited production bundles by hand. Shipping huge unminified CSS “because it is easier to debug live” costs Core Web Vitals for every visitor. ## Practical checklist 1. Decide: inspect only (DevTools) vs save a file (formatter/editor). 2. Prefer child-theme overrides over editing vendor files. 3. Keep overrides small and specific. 4. Rebuild/minify before production deploy when you own the pipeline. 5. Purge caches and re-check on a clean browser session. Need help cleaning up WordPress CSS debt, child themes, or frontend performance? See [tools I use](/tools/) or [contact me](/contact/). ## Frequently asked questions Is unminifying CSS safe on a live WordPress site?+ Reading and formatting a copy is safe. Deploying unminified CSS to production without a rebuild can slow the site and create hard-to-track diffs. Prefer editing sources or a child theme override, then ship minified assets again. Should I use DevTools or an editor to unminify CSS?+ Use browser DevTools pretty-print for quick inspection. Use Prettier, VS Code, Cursor, or Sublime when you need a saved file to diff, share, or commit. Why is my WordPress CSS still one long line?+ Many themes and plugins ship only minified bundles without source maps. That is normal for distribution - it is not how you should maintain your own CSS long term.