CSS Formatter & Minifier

Structuring & Beautifying Modern Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS3) dictates the visual presentation, responsive layout grid, and typographic hierarchy of web applications. As style files expand across component libraries, minifiers, and rapid iterations, CSS rules often become inconsistent, duplicated, and difficult to maintain. Formatting CSS enforces consistent property declaration order, cleans up duplicate selectors, standardises colour notations, and ensures clean team Git diffs.

Recommended CSS Property Grouping Order

Professional frontend development guidelines (such as Concentric CSS or idiomatic CSS) recommend grouping declarations logically rather than sorting alphabetically:

1. Positioning & Layout: position, top, right, bottom, left, z-index, float, clear
2. Display & Box Model: display, flex, grid, align-items, justify-content, width, height, margin, padding
3. Typography: font-family, font-size, font-weight, line-height, letter-spacing, text-align, color
4. Visual Styling & Borders: background, background-color, border, border-radius, box-shadow, opacity
5. Transitions & Animations: transition, transform, animation, will-change

Bad / Inconsistent Formatting	Standardised Formatted CSS
.card{color:#fff;padding:10px;display:flex;border:1px solid #ccc;}	<pre>.card {
display: flex;
padding: 10px;
border: 1px solid #ccc;
color: #ffffff;
}</pre>

---

Best Practices for Modern Scalable CSS

• Consistent Indentation: Use 2 spaces per indentation level to match standard JavaScript and JSX nesting conventions.
• Single vs Multi-Line Rules: Multi-line declarations with trailing semicolons ensure that future property additions result in clean single-line Git diffs.
• Colour Format Uniformity: Standardise on lowercase hexadecimal notations (#ffffff instead of #FFF) or modern functional notations (hsl(), oklch()).
• Selector Specificity: Avoid deeply nested selectors (div > ul > li > a.active) that make CSS overrides unnecessarily difficult.

---

Formatting CSS in Code

JavaScript / Node.js (Prettier API)

import prettier from 'prettier';

async function beautifyCss(rawCss) {
  return await prettier.format(rawCss, {
    parser: 'css',
    tabWidth: 2,
    singleQuote: false,
  });
}

const unformatted = "body{margin:0;padding:0;background:#f0f0f0}";
beautifyCss(unformatted).then(console.log);

Python (cssbeautifier)

import cssbeautifier

options = cssbeautifier.default_options()
options.indent_size = 2
res = cssbeautifier.beautify("a{color:red;font-size:12px;}", options)
print(res)

---

CSS Minification vs Beautification in Production

• Production Minification: While readable formatting is essential during development, production CSS should be minified with tools like cssnano or Lightning CSS to strip comments and whitespace.
• Vendor Prefix Autoprefixing: Modern build pipelines use Autoprefixer with Browserslist configurations to inject vendor prefixes (-webkit-, -moz-) automatically.
• Clean Architecture: Adopting methodologies like BEM (Block Element Modifier) keeps selector specificity low and consistent across formatted style sheets.