-
Notifications
You must be signed in to change notification settings - Fork 519
Open
Description
Hey, creator of Scout-App 2 here.
I've spent a lot of hours crafting my property-sort-order
. It follows a logical pattern, similar to "concentric" or Mark Otto's approach.
What differentiates it from Recess/Concentric/SMACSS?
- Does not contain duplicates or errors
- Does not contain outdated/deprecated properties no longer supported by browsers
- Contains all CSS Properties (more than double any alternative) listed by MDN and W3C
- Contains all vendor prefixes currently in use by major browsers
- All vendor prefixes are placed on the line prior to their native versions
The methodology behind the order is based on highest impact on pixel paint, then box-model, then type treatment, then less common at the bottom.
Here is an example with some common properties and their order, with comments for each grouping:
.example:before {
/* Effects if the element exists */
content: '';
/* Highest effect of where pixel painting begins */
position: relative;
top: 6px;
left: 10px;
/* How the element is displayed and layout */
display: inline-flex;
justify-content: end;
/* Overall size, max amount of pixels that can be painted */
width: 100%;
height: 100px;
min-width: 100px;
max-width: 600px;
/* Effects the most amount of pixel paint in the element */
background-color: #F00;
background-image: url('file.png');
background-position: 10px 10px;
/* Box model */
border: 1px solid #000;
margin: 5px;
padding: 2px;
padding-top: 4px;
/* Text treatment */
color: #333;
font-family: sans-serif;
line-height: 2;
/* Less common properties */
transform: scale(0.9);
z-index: 10;
}
The full rule set can be seen here:
My property-sort-order
is the least error-prone and most comprehensive option available. I would like it added to the Sass-Lint default options to help others avoid the issues I've ran into using the other existing options.
Metadata
Metadata
Assignees
Labels
No labels