Sustainable CSS — Stylelint Plugin

Every Byte Counts

Sustainable CSS is a Stylelint plugin dedicated to following sustainable web design principles. The plugin optimises CSS by identifying and addressing issues that contribute to larger file sizes, thereby helping conserve environmental resources.

While many style guides are subjective regarding appearance, our core principle is simple: "Does it save bytes?"

Installation and usage

npm install --save-dev stylelint stylelint-sustainable-css

Create the .stylelintrc.json config file (or open the existing one), add stylelint-sustainable-css to the plugins array and the rules you need to the rules list. All rules from stylelint-sustainable-css need to be namespaced with sustainable-css.

Please refer to stylelint docs for the detailed info on using this linter.

Rules

⭐️ - the mark of recommended group of rules.

	Group ID	Description
	avoid-duplicate-media-queries	Avoid defining identical media queries multiple times in the stylesheet.
	concatenate-property-values	Concatenate property values where applicable to reduce CSS file size.
	no-important-tags	Prevent the use of !important in styles to maintain code simplicity and avoid specificity issues.
	no-semicolons	Enforce the removal of unnecessary semicolons within CSS rules.
	no-vendor-prefixes	Avoid the use of vendor prefixes to encourage cross-browser compatibility through standard properties.
	optimise-selectors	Simplify selector names, combine selectors with shared properties, and minimise media queries.
⭐️	remove-redundancies	Remove redundant glyphs, spaces, declarations, and properties.
⭐️	shorten-properties	Remove redundant properties, merge them where possible, and use shorter property names.
⭐️	shorten-units	Use shortened values and units, apply shorthand values, and remove redundant characters within values.
	use-special-characters	Use special characters in CSS where appropriate to reduce code length and enhance readability.

Recommended config

Add recommended configuration by simply adding the following to extends in your stylelint configuration:

stylelint-sustainable-css/recommended

This shareable config contains the following:

{
  "plugins": ["stylelint-sustainable-css"],
  "rules": {
    "sustainable-css/shorten-units": true,
    "sustainable-css/shorten-properties": true,
    "sustainable-css/remove-redundancies": true,
    "sustainable-css/optimise-selectors": true
  }
}

Since it adds stylelint-sustainable-css to plugins, you don't have to do this yourself when extending this config.

Testing

To quickly test the stylelint-sustainable-css plugin, follow these steps:

Step 1: Clone the Repository

git clone https://github.com/overbrowsing/stylelint-sustainable-css.git
cd stylelint-sustainable-css

Step 2: Navigate to the Example Directory

The example directory contains sample CSS files and a pre-configured setup to demonstrate the plugin.

cd example

Step 3: Install Dependencies

npm install
npm install --save-dev ../  # Link the plugin locally for testing

Step 4: Test the Plugin

Run the linting process on the example CSS files to see the plugin in action:

npm run lint

This will lint the CSS files in the example/src directory using the stylelint-sustainable-css plugin.

How to Help

The development of this plugin's rules is ongoing, and we welcome your contributions. Here’s how you can help:

• Create, improve, or debug rules (refer to Stylelint’s Working on Rules Guide).
• Enhance the documentation.
• Engage with us via issues and pull requests.
• Propose new rules or improvements, and submit pull requests to demonstrate your ideas.
• Add tests for any aspect of the project.
• Optimise rule performance.
• Contribute to Stylelint.
• View our sustainable web design resources website, Overbrowsing.
• Spread the word about sustainable web design!

License

This project is licensed under the MIT License.