Format, beautify and minify CSS stylesheets — expand compressed CSS into readable form, or minify for production. Includes property count and selector analysis.
Enter your figures and click Calculate to see your results.
Paste your CSS, choose format, minify or format+sort, then click Format to see the result with property and selector counts.
Click the Format button. Your code is processed instantly — all formatting runs in your browser with no data sent to servers.
The formatted output appears on the right. Click Copy to grab it, or Download to save as a file. Statistics like size reduction and line count are shown automatically.
Formatted CSS is essential for development — readable properties, comments and consistent indentation help you maintain and debug stylesheets. Minified CSS is for production — removing whitespace, comments and sometimes shortening values reduces file size by 20–40%, improving page load speed. Best practice: keep formatted source in version control, serve minified CSS to users via your build pipeline.
CSS is the standard styling language browsers understand natively. SCSS (Sassy CSS) is a superset of CSS that adds variables ($primary-color: blue), nesting, mixins (reusable blocks), functions, and partials. SCSS must be compiled to standard CSS before browsers can use it. SASS uses an indentation-based syntax without braces; SCSS uses the CSS brace syntax. Both compile to identical CSS.
Specificity determines which CSS rule applies when multiple rules target the same element. Calculated as a weight: inline styles (1000) > IDs (100) > classes/attributes/pseudo-classes (10) > elements/pseudo-elements (1). Higher specificity wins. !important overrides all specificity. Understanding specificity is essential for debugging why a style is not being applied — a well-formatted stylesheet makes specificity issues much easier to spot.
Many verbose property sets have shorthand equivalents: margin/padding (top right bottom left in one property), border (width style color), background (image position size repeat attachment color), font (style weight size/line-height family), animation, transition, grid and flex properties. Using shorthands reduces code size and improves readability, though being explicit sometimes makes intent clearer.
The "C" in CSS stands for Cascading — multiple style sources are applied in a defined order: browser defaults → external stylesheets → internal styles (in <style> tags) → inline styles. Within each level, later rules override earlier ones (unless specificity or !important changes this). Understanding the cascade is fundamental to debugging CSS and is why a minified file can behave identically to the formatted version.
CSS custom properties (CSS variables) allow you to define reusable values: --primary-color: #0a6aff; used as color: var(--primary-color). They cascade like regular properties, can be scoped to elements (not just :root), can be changed with JavaScript, and allow theming without preprocessors. Unlike SCSS variables (compiled away at build time), CSS variables exist at runtime and can be modified dynamically.
BEM (Block Element Modifier) is a CSS naming convention: block (standalone component), element (part of a block, named block__element), modifier (variant, named block--modifier or block__element--modifier). Example: .card (block), .card__title (element), .card--featured (modifier). BEM creates predictable, readable class names, reduces specificity conflicts and makes the relationship between HTML and CSS immediately clear.
Critical CSS is the minimum CSS needed to render above-the-fold content. Inlining it in the <head> allows the browser to display the initial viewport without waiting for external stylesheets, eliminating render-blocking. Tools extract critical CSS automatically. The remaining CSS loads asynchronously. This technique is one of the most effective ways to improve Core Web Vitals, particularly LCP (Largest Contentful Paint).
