You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:10px10px;
/* 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;
}
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.
The text was updated successfully, but these errors were encountered:
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?
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:
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.The text was updated successfully, but these errors were encountered: