Genuine question: what would be the smartest ordering? Or something better than alphabetical?
I find myself using with alphabetical because it's immediately easy to locate the property I need and it's universally understood. Or maybe I've just been bitten by too much inconsistency with other ways 😅
Group similar acting properties together. Most things are prefixed which helps, eg grid-*, but things like align-self, justify-self, the inset properties mentioned above dont have common prefix. Additionally there are set of properties which only have a paint affect for example, (vs a layout affect)
Yeah the grouping makes sense but it's the *ordering* of those groups that I wonder about
Like do you put the group of flex/grid properties before or after position properties, transform/transition properties, etc? Or group by size? Or base > components > utilities like Tailwind? Or just yolo it?
It spreads similar acting properties in a non-logical order. E.g. if you are trying to position something via inset properties, you might not see that "top" and "bottom" are both set in a long rule.
A lot of places avoid using the short hands excessively (e.g. inset) as it's more difficult to read in that form for newer developers (you need to be familiar with the exact order).
I found the longhands much more difficult to read even when I was barely starting. The order you can remember easily (starting from 12 o'clock, going clockwise), but context matters and there's not much room left for context on the display when everything takes 4x the space.
And while this is not a concern for offsets, margin-*, padding-*, border-* one right after another are more difficult to read than the shorthand because their shape is so similar, so then it's very confusing which is which. If I see the margin longhands one after the other, it takes me a while to...
figure out which is which because they all start with margin & I don't know in what order they are. If I see the shorthand, there's a single property with values in different points on a horizontal line, in a predetermined order & I can always visualise the line they're on being bent around the box.
Just like in DevTools. With the longhand, it takes a lot longer to figure out which is which (they could be in any order, unlike in the shorthand) and where to place them around the box.
Comments
I find myself using with alphabetical because it's immediately easy to locate the property I need and it's universally understood. Or maybe I've just been bitten by too much inconsistency with other ways 😅
Like do you put the group of flex/grid properties before or after position properties, transform/transition properties, etc? Or group by size? Or base > components > utilities like Tailwind? Or just yolo it?
https://github.com/eslint/css/issues
Another that comes to mind is using opacity/ clip-path/ filter/ mask, etc on elements with transform-style: preserve-3d as they effectively cancel it https://bsky.app/profile/anatudor.bsky.social/post/3lbud2fbfuc26