📦 Stylelint config by @duduardeagle
An opinionated Stylelint configuration
🚀 Getting started
This is my personal config for Stylelint, according to my own experience 🤓.
Tell me 💬 what do you think about it?, will you use it?, why? I look forward to hearing your comments here and on my social media.
✨ Features
- Helps to keep CSS code clean with most rules with an error severity
- Customized order for CSS properties, separated by groups
- Autofixing support
- Can be perfectly used with BEM methodology
- Supported integrations:
📝 Order rules
✳️ In general, the order of content within declaration blocks should be organized as follows:
- dollar variables (e.g.,
$color: red;) - custom properties (e.g.,
--color: red;) - @add-mixin at-rule (postcss-mixins)
- CSS properties
- CSS pseudo-elements (e.g.,
::placeholder,::before,::after) - CSS pseudo-classes (e.g.,
:hover,:active) - Nested BEM annotations
- Nested tags
- @media at-rule
- unspecified elements
✳️ CSS properties are ordered as follows:
Position
- position
- top
- right
- bottom
- left
- inset
- inset-block
- inset-block-start
- inset-block-end
- inset-inline
- inset-inline-start
- inset-inline-end
- z-index
Box Model
- overflow
- overflow-x
- overflow-y
- scrollbar-width
- scrollbar-color
- scrollbar-gutter
- overscroll-behavior
- box-sizing
- outline
- outline-style
- outline-width
- outline-color
- outline-offset
- border
- border-top
- border-right
- border-bottom
- border-left
- border-block
- border-block-start
- border-block-end
- border-inline
- border-inline-start
- border-inline-end
- border-radius
- border-top-right-radius
- border-top-left-radius
- border-bottom-right-radius
- border-bottom-left-radius
- border-start-start-radius
- border-start-end-radius
- border-end-start-radius
- border-end-end-radius
- border-style
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
- border-block-style
- border-block-start-style
- border-block-end-style
- border-inline-style
- border-inline-start-style
- border-inline-end-style
- border-image
- border-image-source
- border-image-width
- border-image-repeat
- border-image-slice
- border-image-outset
- border-width
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
- border-block-width
- border-block-start-width
- border-block-end-width
- border-inline-width
- border-inline-start-width
- border-inline-end-width
- border-color
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
- border-block-color
- border-block-start-color
- border-block-end-color
- border-inline-color
- border-inline-start-color
- border-inline-end-color
- border-spacing
- border-collapse
- stroke
- width
- min-width
- max-width
- height
- min-height
- max-height
- padding
- padding-top
- padding-right
- padding-bottom
- padding-left
- padding-block
- padding-block-start
- padding-block-end
- padding-inline
- padding-inline-start
- padding-inline-end
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
- margin-block
- margin-block-start
- margin-block-end
- margin-inline
- margin-inline-start
- margin-inline-end
Flow
- display
- table-layout
- tab-size
- flex
- flex-grow
- flex-shrink
- flex-basis
- flex-direction
- flex-wrap
- grid
- grid-area
- grid-row
- grid-row-start
- grid-row-end
- grid-column
- grid-column-start
- grid-column-end
- grid-auto-flow
- grid-auto-rows
- grid-auto-columns
- grid-template
- grid-template-areas
- grid-template-rows
- grid-template-columns
- place-content
- place-items
- place-self
- justify-content
- justify-items
- justify-self
- align-content
- align-items
- align-self
- order
- gap
Typography
- font
- font-display
- font-family
- src
- font-weight
- font-style
- font-smooth
- font-variant-numeric
- text-transform
- font-size
- font-size-adjust
- text-size-adjust
- text-align
- white-space
- letter-spacing
- text-wrap
- color
- caret-color
- line-height
- text-decoration
- text-decoration-line
- text-decoration-style
- text-decoration-thickness
- text-decoration-color
- text-underline-offset
- text-shadow
- list-style
- list-style-position
- list-style-type
- list-style-image
Background
- appearance
- content
- fill
- background
- background-image
- background-repeat
- background-size
- background-color
- background-attachment
- background-position
- background-clip
- backdrop-filter
- filter
- opacity
- box-shadow
Fx
- transform
- transform-origin
- transform-style
- transition
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- animation
- scroll-snap-type
- scroll-snap-align
- scroll-snap-stop
- scroll-behavior
Accesibility
- pointer-events
- touch-action
- user-select
- cursor
For example:
| Before | After |
|---|---|
 |
 |
🔧 Installation
-
Install stylelint and this package to your project:
npm install --save-dev stylelint @duduardeagle/stylelint-config
-
Create your Stylelint config file (.stylelintrc) and extend it for this package:
{ "extends": "@duduardeagle/stylelint-config" }[!TIP] You can configure Stylelint in your package.json file. Just add:
"stylelint": { "extends": "@duduardeagle/stylelint-config" }
-
Now, you can check your CSS code with Stylelint:
npx stylelint [<pathspec>]For example:
npx stylelint css/styles.css
-
To fix most errors, you can use:
npx stylelint --fix [<pathspec>]For example:
npx stylelint --fix css/styles.css
🛠️ Built with
🖇️ Contributing
CSS order is 100% opinionated 🤔, but I try to hand-pick it in the most logical way to improve process of refactoring.
If you think something can be improved or just doesn't make sense, please open an issue so we can discuss 🙏; also feel free to fork this repo and create your own 🤝.
📜 CHANGELOG
Each change is listed in the CHANGELOG.md file.
Additionally, you can keep up to date with changes on the Releases page.
©️ LICENSE
@duduardeagle/stylelint-config
Copyright (c) 2024 Duduar Deagle
Licensed under the MIT License (the "License"); you may not use this Software except in compliance with the License. You should have received a copy of the License with this Software or you may obtain a copy of the License at:
https://spdx.org/licenses/MIT.html
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.