4 ms·
I wish there was a convention on the order of classes on an element. Like height/width first, padding/margin next, idk what next, and then pseudoclass variants
by beckler 6y ago
I wish there was a convention on the order of classes on an element. Like height/width first, padding/margin next, idk what next, and then pseudoclass variants at the end, but in the same order?
I don't know honestly, I just wish there was a convention.
- smoe 6y agoI have seen various conventions over the years on how to order css properties that could be used for ordering tailwind style classes. E.g https://rhodesmill.org/brandon/2011/concentric-css/ https://rhodesmill.org/brandon/2011/concentric-css/ The problem is more, that to my knowledge, none of them got wide adaption. You could at adapt them on at least a company/team wide level, but don’t know what tooling there is to make it easily configurable.
- leipert 6y agoThere are, e.g. this prettier plug-in: https://www.npmjs.com/package/prettier-plugin-tailwind https://www.npmjs.com/package/prettier-plugin-tailwind or headwind: https://github.com/heybourn/headwind https://github.com/heybourn/headwind
- tpetry 6y agoThis may sound strange first, but there is nothing to argue in a team about if you sort them alphabetically.
- vsareto 6y agoI like it. Simple and predictable.
- gvkhna 6y agoI agree. Also the reason for alphabetical ordering is typically adding in lines will not cause additional changes in git blame.
- earthboundkid 6y agoThat was what I did with CSS properties, but it doesn’t fit as well with Tailwind.
- jzeltman 6y agoCheck out this extension for VSCode which organizes your classes on save. https://marketplace.visualstudio.com/items?itemName=heybourn.headwind https://marketplace.visualstudio.com/items?itemName=heybourn... Otherwise, I usually try to separate out states when using @apply. ` .example { @apply bg-blue-100; @apply hover:bg-blue-200; @apply focus:bg-blue-200; ` But now with JIT you could simplify if you wanted to: `.example { @apply bg-blue-100; @apply hover:focus:bg-blue-200;`
- dillondoyle 6y agoMaybe you could use data-attribute to group these common styles like 'sizing' 'color' etc something like <div data-css-size='large flex-box display-flex' data-css-color="red" data-css-font="gotham serif"></div> then something like [data-css-color*="red"] {color:red;} I haven't tested this just thinking off the top what might work
- gvkhna 6y agoI like this a lot actually, considering JIT maybe data attributes or some tighter integration into react could easily be done so there isn’t so much reliance on class names.
- gvkhna 6y agoI’m ok with a convention but considering how that could become it’s own complete config maybe alphabetical would just be better. Also it typically has less issues with git changes.
- earthboundkid 6y agoThe convention I have started using is “outside in” meaning first the margin, then the border, then the padding, etc. It’s not perfect because a lot of stuff is “in” (font family, text color, etc.) but it at least gives a rough directionality to things.
- jfleck 6y agohttps://github.com/fleck/class-types.macro#auto-reorder-classes-via-eslint-pluginrule https://github.com/fleck/class-types.macro#auto-reorder-clas... The order I ended up going with was to match tailwind's output order.