Order of Display property in CSS Linter

[eldelentes]

One of the reasons for the new properties sorting in our stylesheets it's to have a better semantics of the code.

Although with the SMACSS sorting we have a better ordering I think that the displayproperty might place it before the position property because if not the outcome it's a little weird having in mind the closeness of the display: flex property and align-items property for example.

So instead of having:

...
"display",
"visibility",
"position",
"z-index",
 "top",
"right",
"bottom",
 "left",
"box-sizing",
"grid",
"grid-after",
 "grid-area",
...

I propose this:

...
"visibility",
"position",
"z-index",
 "top",
"right",
"bottom",
 "left",
"box-sizing",
"display",
"grid",
"grid-after",
 "grid-area",
...

Let me know what you thing about this.

[kurenn]

Sounds good! makes sense to me, could you be so kind and place a PR with this change on the scss-lint we use. You can find the latest version in here -
https://github.com/IcaliaLabs/guides/blob/master/best_practices/code-analysis/.scss-lint.yml

[vovimayhem]

Treating "box" as "display" and "position" feels like an oversight to me.

What about MDO's property grouping? :

1. Positioning
2. Box model
3. Typographic
4. Visual

[eldelentes]

@vovimayhem I understand that and I think its a good point, but for example how we consider align-items: center; as a Positioning? or as a Box Model (Because of Display Flex)

[kurenn]

I would say for box model, we can customize the linting order, how does the other designers feel about this?

[vovimayhem]

@eldelentes @kurenn The align-items property is being discussed on a W3C draft called "Box Alignment Module Level 3"... so it looks like it's being considered in the Box model.

[kurenn]

Master @vovimayhem ! Let's make it box model then, or what do you think @eldelentes ?