CSS Tools Guide: Beautifiers, Minifiers, and Preprocessor Converters

/* Before beautification (minified) */
.btn{padding:10px 20px;background:#007bff;color:#fff;border:none;border-radius:4px}.btn:hover{background:#0056b3}

/* After beautification */
.btn {
  padding: 10px 20px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
}

.btn:hover {
  background: #0056b3;
}

// Beautify CSS with js-beautify
const beautify = require('js-beautify').css;

const minified = '.btn{padding:10px;color:#fff}';

const formatted = beautify(minified, {
  indent_size: 2,
  indent_char: ' ',
  selector_separator_newline: true,
  newline_between_rules: true,
  space_around_combinator: true
});

console.log(formatted);

// Prettier for CSS
const prettier = require('prettier');

const prettified = prettier.format(minified, {
  parser: 'css',
  printWidth: 80,
  tabWidth: 2
});

/* Before minification (250 bytes) */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #ffffff;
  border: 0px solid;
  border-radius: 4px;
}

/* After minification (118 bytes - 53% reduction) */
.container{max-width:1200px;margin:0 auto;padding:0 15px}.button{padding:10px 20px;background:#007bff;color:#fff;border:0;border-radius:4px}

// CSS minification with csso
const csso = require('csso');

const css = `
.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #ffffff;
  border: 0px solid;
}
`;

const minified = csso.minify(css).css;
console.log(minified);
// .button{padding:10px 20px;background:#007bff;color:#fff;border:0}

// Advanced minification with clean-css
const CleanCSS = require('clean-css');

const output = new CleanCSS({
  level: 2, // Advanced optimizations
  format: 'beautify' // or 'keep-breaks'
}).minify(css);

console.log(output.styles);
console.log('Savings:', output.stats.efficiency);

// CSS validation with css-validator
const validator = require('css-validator');

const css = `
.container {
  colour: red; /* Invalid property name */
  display: flexbox; /* Invalid value */
}
`;

validator.validateText(css, (err, data) => {
  if (data.validity) {
    console.log('CSS is valid!');
  } else {
    console.log('Errors:', data.errors);
    data.errors.forEach(error => {
      console.log(`Line ${error.line}: ${error.message}`);
    });
  }
});

// .stylelintrc.json
{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "string-quotes": "double",
    "color-hex-case": "lower",
    "color-hex-length": "short",
    "selector-class-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",
    "declaration-block-trailing-semicolon": "always",
    "declaration-colon-space-after": "always",
    "declaration-colon-space-before": "never",
    "block-opening-brace-space-before": "always",
    "rule-empty-line-before": ["always", {
      "except": ["first-nested"]
    }]
  }
}

// package.json
{
  "scripts": {
    "lint:css": "stylelint '**/*.css'",
    "lint:css:fix": "stylelint '**/*.css' --fix"
  }
}

/* CSS */
.container {
  max-width: 1200px;
}
.container .header {
  padding: 20px;
}
.container .header h1 {
  font-size: 24px;
  color: #333;
}

/* Converted to Sass */
$primary-color: #333
$max-width: 1200px

.container
  max-width: $max-width

  .header
    padding: 20px

    h1
      font-size: 24px
      color: $primary-color

/* CSS */
.button {
  padding: 10px 20px;
  background: #007bff;
  color: #fff;
}
.button:hover {
  background: #0056b3;
}

/* Converted to SCSS */
$primary-color: #007bff;
$primary-hover: #0056b3;

.button {
  padding: 10px 20px;
  background: $primary-color;
  color: #fff;

  &:hover {
    background: $primary-hover;
  }
}

// Compile Sass to CSS
const sass = require('sass');

const result = sass.compile('styles.sass', {
  style: 'compressed' // or 'expanded'
});

console.log(result.css);

// Sass input
$primary: #007bff

.button
  padding: 10px 20px
  background: $primary

  &:hover
    background: darken($primary, 10%)

// CSS output
.button {
  padding: 10px 20px;
  background: #007bff;
}
.button:hover {
  background: #0056b3;
}

// SCSS input
$spacing: 20px;
$colors: (
  primary: #007bff,
  secondary: #6c757d
);

@mixin button-variant($color) {
  background: map-get($colors, $color);
  &:hover {
    background: darken(map-get($colors, $color), 10%);
  }
}

.btn-primary {
  @include button-variant(primary);
  padding: $spacing;
}

// Compiled CSS output
.btn-primary {
  background: #007bff;
  padding: 20px;
}
.btn-primary:hover {
  background: #0056b3;
}

// Less input
@primary-color: #007bff;
@spacing: 20px;

.button {
  padding: @spacing;
  background: @primary-color;

  &:hover {
    background: darken(@primary-color, 10%);
  }

  &-large {
    padding: @spacing * 1.5;
  }
}

// Compiled CSS
.button {
  padding: 20px;
  background: #007bff;
}
.button:hover {
  background: #0056b3;
}
.button-large {
  padding: 30px;
}

// Compile with Less.js
const less = require('less');

less.render(lessCode).then(output => {
  console.log(output.css);
});

// Variables
@brand-color: #007bff;
@spacing-unit: 8px;

// Mixins
.rounded(@radius: 4px) {
  border-radius: @radius;
}

// Nested rules
.card {
  .rounded();
  padding: @spacing-unit * 2;

  .header {
    color: @brand-color;
    font-weight: bold;
  }

  .body {
    padding: @spacing-unit;
  }
}

// Operations
.container {
  width: 100% - 40px;
  padding: @spacing-unit * 2;
}

// Functions
.box {
  color: darken(@brand-color, 10%);
  background: lighten(@brand-color, 40%);
}

Feature          | Sass/SCSS    | Less         | PostCSS
-----------------|--------------|--------------|-------------
Syntax           | Indented/CSS | CSS-like     | CSS
Variables        | $var         | @var         | --var
Nesting          | Yes          | Yes          | Plugin
Mixins           | @mixin       | .mixin()     | Plugin
Functions        | Built-in     | Built-in     | Plugin
Imports          | @import      | @import      | @import
Math             | Yes          | Yes          | Plugin
Conditionals     | @if/@else    | when()       | Plugin
Loops            | @for/@each   | .loop()      | Plugin
Extend           | @extend      | :extend      | Plugin
Maps/Objects     | Yes          | Limited      | Plugin
Compile time     | Fast         | Fast         | Very fast
Community        | Large        | Medium       | Large
Learning curve   | Medium       | Easy         | Easy
Bootstrap uses   | No           | Yes          | Can use both

Recommendation:
- New projects: Sass/SCSS (most features, best tooling)
- Bootstrap projects: Less (native Bootstrap support)
- Modern builds: PostCSS (future-proof, plugin ecosystem)

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',  // Injects CSS into DOM
          'css-loader',    // Translates CSS into CommonJS
          'postcss-loader', // PostCSS processing
          'sass-loader'    // Compiles Sass to CSS
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    })
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin()
    ]
  }
};

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-preset-env')({
      stage: 3,
      features: {
        'nesting-rules': true,
        'custom-properties': true
      }
    }),
    require('cssnano')({
      preset: ['default', {
        discardComments: {
          removeAll: true
        }
      }]
    })
  ]
};

// package.json
{
  "browserslist": [
    "last 2 versions",
    "> 1%",
    "not dead"
  ]
}

// gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const rename = require('gulp-rename');

// Compile Sass
gulp.task('sass', () => {
  return gulp.src('src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([autoprefixer()]))
    .pipe(gulp.dest('dist/css'))
    .pipe(postcss([cssnano()]))
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('dist/css'));
});

// Watch task
gulp.task('watch', () => {
  gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
});

gulp.task('default', gulp.series('sass', 'watch'));

// package.json
{
  "scripts": {
    "css:sass": "sass src/scss:dist/css",
    "css:watch": "sass --watch src/scss:dist/css",
    "css:minify": "cleancss -o dist/css/styles.min.css dist/css/styles.css",
    "css:autoprefix": "postcss dist/css/*.css --use autoprefixer -d dist/css",
    "css:lint": "stylelint 'src/**/*.{css,scss}'",
    "css:build": "npm-run-all css:sass css:autoprefix css:minify",
    "css:dev": "npm-run-all --parallel css:watch"
  },
  "devDependencies": {
    "sass": "^1.50.0",
    "postcss": "^8.4.0",
    "postcss-cli": "^9.1.0",
    "autoprefixer": "^10.4.0",
    "clean-css-cli": "^5.5.0",
    "stylelint": "^14.5.0",
    "npm-run-all": "^4.1.5"
  }
}

/* BEM naming convention */
.block { }
.block__element { }
.block--modifier { }

/* Example: Card component */
.card { }
.card__header { }
.card__body { }
.card__footer { }
.card--featured { }

/* File organization */
/*
styles/
├── base/
│   ├── _reset.scss
│   ├── _typography.scss
│   └── _variables.scss
├── layout/
│   ├── _grid.scss
│   └── _header.scss
├── components/
│   ├── _button.scss
│   └── _card.scss
├── utilities/
│   └── _helpers.scss
└── main.scss
*/

/* CSS custom properties */
:root {
  --color-primary: #007bff;
  --spacing-unit: 8px;
  --border-radius: 4px;
}

.button {
  background: var(--color-primary);
  padding: var(--spacing-unit);
  border-radius: var(--border-radius);
}

/* Performance optimizations */

/* 1. Avoid expensive selectors */
/* Bad */
div > div > div > p { }

/* Good */
.article-text { }

/* 2. Use will-change sparingly */
.animated-element {
  will-change: transform;
}

/* 3. Optimize animations */
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

/* Use transform and opacity (GPU accelerated) */
.transition {
  transition: transform 0.3s, opacity 0.3s;
}

/* 4. Critical CSS extraction */
/* Inline critical above-the-fold CSS */
<style>
  /* Critical CSS here */
</style>

/* Load non-critical CSS asynchronously */
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

/* 5. Remove unused CSS */
/* Use PurgeCSS in build */

/* Modern CSS features */

/* Container queries */
@container (min-width: 700px) {
  .card {
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
}

/* :has() selector (parent selector) */
.card:has(.badge) {
  border-color: gold;
}

/* Cascade layers */
@layer base, components, utilities;

@layer base {
  h1 { font-size: 2em; }
}

@layer components {
  .button { padding: 1em; }
}

/* Subgrid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  display: grid;
  grid-template-columns: subgrid;
}

/* Color functions */
.element {
  background: color-mix(in srgb, blue 50%, red);
  color: color-contrast(white vs black, blue);
}

/* Logical properties */
.box {
  margin-inline: auto;
  padding-block: 2rem;
  border-inline-start: 1px solid;
}