Introduction to CSS Formatters

As CSS codebases grow, maintaining consistent formatting and organization becomes increasingly challenging. Unorganized CSS can lead to specificity issues, redundant code, and maintenance headaches. CSS formatters like CSScomb and stylefmt offer automated solutions to these problems by enforcing consistent coding styles and property ordering.

In this comprehensive guide, we'll explore two popular CSS formatting tools:

• CSScomb: A coding style formatter with powerful property sorting capabilities
• stylefmt: A modern formatter that uses stylelint rules for consistent formatting

We'll cover installation, configuration, usage patterns, and integration with popular development workflows to help you choose the right tool for your projects.

CSScomb Overview

CSScomb is a coding style formatter for CSS, Less, SCSS, and other CSS-like syntaxes. Originally developed as a plugin for text editors, it's now available as a standalone tool and can be integrated into various build processes.

Key Features of CSScomb

• Property sorting: Organizes properties in a predefined or custom order
• Flexible configuration: Highly customizable through JSON configuration files
• Multiple syntax support: Works with CSS, Less, SCSS, and other preprocessors
• Whitespace control: Manages spaces, line breaks, and indentation
• Editor plugins: Available for VS Code, Sublime Text, and other popular editors

Installation & Setup

CSScomb can be installed via npm:

# Install globally
npm install -g csscomb

# Or as a dev dependency in your project
npm install --save-dev csscomb

After installation, you can run CSScomb from the command line:

# Format a single file
csscomb path/to/style.css

# Format multiple files
csscomb path/to/styles/*.css

# Format using a specific configuration
csscomb -c path/to/config.json path/to/style.css

Configuration Options

CSScomb is configured through a JSON file. You can create a{" "} .csscomb.json file in your project root or specify a configuration file with the -c flag.

Here's an example configuration:

{
  "remove-empty-rulesets": true,
  "always-semicolon": true,
  "color-case": "lower",
  "block-indent": "  ",
  "color-shorthand": true,
  "element-case": "lower",
  "eof-newline": true,
  "leading-zero": false,
  "quotes": "double",
  "space-before-colon": "",
  "space-after-colon": " ",
  "space-before-combinator": " ",
  "space-after-combinator": " ",
  "space-between-declarations": "\\n",
  "space-before-opening-brace": " ",
  "space-after-opening-brace": "\\n",
  "space-after-selector-delimiter": "\\n",
  "space-before-selector-delimiter": "",
  "space-before-closing-brace": "\\n",
  "strip-spaces": true,
  "tab-size": true,
  "vendor-prefix-align": true,
  "sort-order": [
    [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display",
      "flex",
      "flex-direction",
      "flex-wrap",
      "flex-flow",
      "justify-content",
      "align-items",
      "align-content",
      "order",
      "flex-grow",
      "flex-shrink",
      "flex-basis",
      "align-self",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bottom",
      "margin-left",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "border",
      "border-width",
      "border-style",
      "border-color",
      "border-radius",
      "background",
      "background-color",
      "background-image",
      "background-repeat",
      "background-position",
      "background-size",
      "color",
      "font",
      "font-family",
      "font-size",
      "font-weight",
      "line-height",
      "text-align",
      "text-transform",
      "text-decoration",
      "transition",
      "transform"
    ]
  ]
}

CSScomb provides several preset configurations:

• csscomb: The default CSScomb style
• zen: Based on Zen Coding preferences
• yandex: Follows Yandex's coding style

You can use these presets as a starting point:

# Use a preset
csscomb -p zen path/to/style.css

stylefmt Overview

stylefmt is a CSS formatter that uses stylelint rules to format CSS code. It's designed to work with modern CSS workflows and integrates well with other tools in the ecosystem.

Key Features of stylefmt

• stylelint integration: Uses stylelint rules for formatting
• Modern CSS support: Works with the latest CSS features
• Preprocessor support: Formats SCSS, Less, and SugarSS
• Build tool integration: Works with webpack, Gulp, and other build tools
• Consistent with other tools: Aligns with the broader CSS tooling ecosystem

Installation & Setup

Install stylefmt via npm:

# Install globally
npm install -g stylefmt

# Or as a dev dependency in your project
npm install --save-dev stylefmt

Basic usage from the command line:

# Format a single file
stylefmt path/to/style.css

# Format multiple files
stylefmt "src/**/*.css"

# Format and overwrite the input file
stylefmt -r path/to/style.css

Configuration Options

stylefmt uses stylelint's configuration, which gives you access to a wide range of formatting rules. Create a{" "} .stylelintrc file in your project root:

{
  "rules": {
    "indentation": 2,
    "selector-list-comma-newline-after": "always",
    "declaration-colon-space-after": "always",
    "declaration-colon-space-before": "never",
    "block-opening-brace-space-before": "always",
    "declaration-block-semicolon-newline-after": "always",
    "rule-empty-line-before": ["always", {
      "except": ["first-nested"],
      "ignore": ["after-comment"]
    }]
  }
}

You can also use popular stylelint configurations:

{
  "extends": "stylelint-config-standard",
  "rules": {
    // Your custom rules here
  }
}

stylefmt will automatically use your stylelint configuration when formatting files.

CSScomb vs. stylefmt: Which to Choose?

Both tools have their strengths and are suitable for different scenarios:

Feature	CSScomb	stylefmt
Property sorting	Excellent	Limited (via stylelint)
Modern CSS support	Good	Excellent
Integration with other tools	Moderate	Excellent (stylelint ecosystem)
Configuration flexibility	High	High (via stylelint)
Active development	Less active	More active

Choose CSScomb if:

• Property sorting is your primary concern
• You need fine-grained control over formatting
• You're working with a legacy codebase

Choose stylefmt if:

• You're already using stylelint
• You need support for the latest CSS features
• You prefer integration with modern build tools

Editor Integration

Both CSScomb and stylefmt can be integrated with popular code editors for a seamless workflow.

Visual Studio Code

CSScomb for VS Code:

1. Install the "CSScomb" extension from the VS Code marketplace
2. Create a .csscomb.json file in your project root
3. Configure keyboard shortcuts or use the command palette to format files

stylefmt for VS Code:

1. Install the "stylelint" extension
2. Configure VS Code to use stylelint for formatting CSS files
3. Add this to your settings.json:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.validate": ["css", "scss", "less"]
}

Sublime Text

CSScomb for Sublime Text:

1. Install Package Control if you haven't already
2. Install the "CSScomb" package
3. Configure through Preferences → Package Settings → CSScomb → Settings

stylefmt for Sublime Text:

1. Install the "Stylefmt" package via Package Control
2. Configure keyboard shortcuts or use the command palette

WebStorm/PhpStorm

CSScomb for WebStorm:

1. Install the CSScomb plugin from Preferences → Plugins
2. Configure through Preferences → Tools → CSScomb

stylefmt for WebStorm:

1. Configure an External Tool in Preferences → Tools → External Tools
2. Set the program to the stylefmt executable
3. Add parameters for your specific needs

CI/CD Integration

Integrating CSS formatters into your CI/CD pipeline ensures consistent code style across your team.

GitHub Actions

CSScomb with GitHub Actions:

# .github/workflows/csscomb.yml
name: CSScomb

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  format:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install CSScomb
        run: npm install -g csscomb
      - name: Check formatting
        run: csscomb -v src/**/*.css

GitLab CI

stylefmt with GitLab CI:

# .gitlab-ci.yml
css-format:
  image: node:16
  stage: lint
  script:
    - npm install -g stylefmt stylelint
    - stylefmt --recursive "src/**/*.css" -d
  only:
    - merge_requests
    - main

Best Practices

Follow these best practices to get the most out of CSS formatters:

• Commit your configuration files: Ensure everyone on the team uses the same settings
• Format before committing: Set up pre-commit hooks to automatically format CSS files
• Integrate with your editor: Configure your editor to format on save
• Start with a preset: Use established presets as a starting point, then customize
• Be consistent: Choose one formatter and stick with it across your project
• Document your choices: Explain your formatting decisions in your project's README
• Gradually adopt: For large codebases, format files as you modify them

For pre-commit hooks, you can use husky and lint-staged:

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.css": ["stylefmt", "git add"]
  }
}

Modern Alternatives

While CSScomb and stylefmt are still useful, several modern alternatives have gained popularity:

• Prettier: An opinionated code formatter that supports CSS, SCSS, and Less
• Stylelint with --fix: Stylelint can now fix many formatting issues
• PostCSS with plugins: Various PostCSS plugins can sort and format CSS

If you're starting a new project, consider these alternatives for better integration with modern workflows.

Conclusion

CSS formatters like CSScomb and stylefmt are valuable tools for maintaining clean, consistent CSS codebases. They automate the tedious task of formatting and organizing CSS properties, allowing developers to focus on writing effective styles rather than worrying about code style.

While CSScomb excels at property sorting and offers fine-grained control, stylefmt integrates better with modern CSS tooling through stylelint. Your choice between them should depend on your specific project needs and existing workflow.

For new projects, you might also consider modern alternatives like Prettier, which offers a more opinionated but simpler approach to code formatting across multiple languages.

Regardless of which tool you choose, automating CSS formatting will improve code quality, reduce merge conflicts, and make your codebase more maintainable in the long run.