Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add TJW-Sasslint-rules Property-sort-order #1284

Open
TheJaredWilcurt opened this issue Jun 19, 2019 · 0 comments · May be fixed by #1285
Open

Add TJW-Sasslint-rules Property-sort-order #1284

TheJaredWilcurt opened this issue Jun 19, 2019 · 0 comments · May be fixed by #1285

Comments

@TheJaredWilcurt
Copy link

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.

@TheJaredWilcurt TheJaredWilcurt linked a pull request Jun 19, 2019 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant