4 ms·
I order my declarations and have for years. Like many personalized code styles, it's much easier to maintain on a codebase you fly solo in. My ordering is by m
by liquidise 4y ago
I order my declarations and have for years. Like many personalized code styles, it's much easier to maintain on a codebase you fly solo in.
My ordering is by my mental model of "impact" of the declaration. Generally: Display -> Position -> Box Model -> Text/Font -> Background -> Misc.
/* Example from css file i have open */
.officeBlock .email {
display: inline-block;
padding: 14px 10px 8px;
background-color: #E0EFFE;
border-radius: 50%;
transition: 0.25s ease-out;
}
Subjectively it's helpful for quickly understanding style blocks, particularly complex ones. Is the time investment a net positive? Possibly. I'd suggest it is worth trying on a project to see if it helps when you return to it months later, at least.
- spartanatreyu 4y agoI'm very much the same, but I lump it into: Hacks, Layout, Decoration, Animation, Misc. I order every property in each bucket by their importance. - Hacks: reserved for very special cases that solve an issue. I keep this at the top so it's the first thing I see for a class (e.g. box-sizing, -webkit-touch-callout, pointer-events, outline for debugging, etc...) - Layout this usually means display, position, box-model. - Decoration: this usually means border, background, text - Animation: this usually means transitions, non-layout transforms and animations - Misc: Anything out of the ordinary. Related media queries (soon to be replaced by container queries), scss nested elements, etc...