Skip to content

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

@TheJaredWilcurt

Description

@TheJaredWilcurt

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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions