Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sebastian-software/stylelint-config-readable
Configuration for Stylelint to achieve readable source code.
https://github.com/sebastian-software/stylelint-config-readable
cssmodules lint readable sass stylelint stylelint-config
Last synced: about 13 hours ago
JSON representation
Configuration for Stylelint to achieve readable source code.
- Host: GitHub
- URL: https://github.com/sebastian-software/stylelint-config-readable
- Owner: sebastian-software
- Created: 2017-11-02T16:23:49.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-09-23T21:45:32.000Z (about 6 years ago)
- Last Synced: 2024-09-21T03:03:54.666Z (4 days ago)
- Topics: cssmodules, lint, readable, sass, stylelint, stylelint-config
- Language: JavaScript
- Homepage:
- Size: 255 KB
- Stars: 1
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Stylelint Config Readable
[![Sponsored by][sponsor-img]][sponsor] [![Version][npm-img]][npm] [![Dependencies][deps-img]][deps]
[sponsor-img]: https://img.shields.io/badge/Sponsored%20by-Sebastian%20Software-692446.svg
[sponsor]: https://www.sebastian-software.de
[deps]: https://david-dm.org/sebastian-software/stylelint-config-readable
[deps-img]: https://david-dm.org/sebastian-software/stylelint-config-readable/status.svg
[npm]: https://www.npmjs.com/package/stylelint-config-readable
[npm-img]: https://badge.fury.io/js/stylelint-config-readable.svg
> "If you want your code to be easy to write, make it easy to read." — Robert C. Martin
The aim of this configuration is to achieve optimal readable code for a large number of projects. In many cases, the easing of the code's looseness in comparison to its compactness is an advantage for this. The idea is that code is much more read than written. Clear and structured code is therefore valuable for each additional author.
The code should appear uniform no matter how many authors are involved. But of course, it is not only about formatting (which could be fully solved with new tools like [Prettier](https://prettier.io/)) but also about avoiding errors and mentoring developers. As you will see the chosen infrastructure with ESLint as a backbone offers so much more.
There is also the matching [ESLint Configuration](https://www.npmjs.com/package/eslint-config-readable) available.
## Features
- Blocks usage of `!important`.
- Correctly supports typical *Sass* dialects like `@mixin`.
- Tolerates `normalize` PostCSS plugin for automatically cherry-pick required normalization features.
- Tolerates CSS Modules `composes` feature.
- Tolerates Lost Grid features.
- Checks CSS animation/transition for performance issues.
## Formatting
- Use 2 spaces for indention
- 80 characters max line length
- Use lowercase properties, selectors, mixin names, etc. only
- Requires property splitting between layout (position, margin, padding, size) and visuals (appearance, colors, animation)
## Usage
Installation with `npm`:
```bash
npm install --save-dev stylelint-config-readable stylelint
```
Installation with `yarn`:
```bash
yarn add --dev stylelint-config-readable stylelint
```
Add the preset to your stylelint config e.g. `.stylelintrc.yml`
```yaml
extends:
- stylelint-config-readable
```
Though this configuration is meant to be usable without any further configuration you are naturally free to extend it and place overrides into your configuration e.g. by extending the `rules` section:
```yaml
extends:
- stylelint-config-readable
rules:
indentation: 4
```
## Copyright
Copyright 2015-2018
[Sebastian Software GmbH](http://www.sebastian-software.de)