stylelint-config-rational-order
Stylelint config that sorts related property declarations by grouping together following the order:
- Positioning
- Box Model
- Typography
- Visual
- Animation
- Misc
.declaration-order {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: block;
float: right;
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
color: #888;
font: normal 16px Helvetica, sans-serif;
line-height: 1.3;
text-align: center;
background-color: #eee;
border: 1px solid #888;
border-radius: 4px;
opacity: 1;
transition: all 1s;
user-select: none;
}
Usage
- Add stylelint and this package to your project:
npm install --save-dev stylelint stylelint-config-rational-order
yarn add --dev stylelint stylelint-config-rational-order
- Add this package to the end of your extends array inside Stylelint
configuration (.stylelintrc for example):
{
"extends": [
"stylelint-config-rational-order"
]
}
Credits