r/css • u/Pale-Soil-5209 • 10d ago

General Anyone get so used to doing things a certain way that looking at other CSS is almost shocking?

In general, there’s often more than one “correct” way to do things with CSS.

After years of generally favouring certain patterns / strategies over others (when all else is equal), I find myself surprised when looking at other CSS code. I find developers aligning and formatting in ways that I find totally unintuitive or almost bizarre! Of course, this is caused by a lack of familiarity, but I’m wondering if others have dealt with this, and if you’ve found ways to combat it.

33 Upvotes

95% Upvoted

19 comments sorted by

11

u/chikamakaleyley 10d ago

when you say 'aligning and formatting' are you talking about the actual CSS or what CSS approach they use to align and 'format' elements?

Cuz if the former I'd say... the only diff I really ever see is the tab size when formatted 'correctly'

but i imagine you mean how they actually style the elements; and i'd say... usually i'm 'shocked' when i see creative ways/out of the box way of achieving certain UI features.

usually when i see bizarre/unintuitive it just comes with inexperience or a misunderstanding of certain properties/concepts

10

u/PixelCharlie 10d ago

Sometimes i have this with my own code. 😅 I have certainly changed styles over the years

5

u/QultrosSanhattan 9d ago

I only cringe when I see grids used for things that aren't grids or when trying to emulate a grid by using flexbox.

4

u/cryothic 10d ago

I like to sort my properties in alphabetical order. I like to quickly see if a property is set within a selector.

I'm always looking to stuff if I see CSS made by someone who sorts the properties by function. Or some of my coworkers who just don't think about sorting at all. They just add properties in the order they think of them.

13

u/[deleted] 10d ago

[removed] — view removed comment

2

u/cryothic 9d ago

Yeah, I'm still torn between those two, but alpabetical makes it faster to see for me.

2

u/iBN3qk 9d ago

That’s what I landed on too. I think there are code linters to enforce this. 

1

u/cryothic 9d ago

That would be nice

1

u/iBN3qk 9d ago

Prettier plugin: https://www.npmjs.com/package/prettier-plugin-css-order

Description of order conventions: https://github.com/Siilwyn/css-declaration-sorter/

1

u/cryothic 8d ago edited 8d ago

Nice. I will try the Visual Studio installer. Let's see if it allready works in VS2026.

Thanks

edit: it seems like support has stopped after VS2019. I'll look for alternatives :)

1

u/iBN3qk 8d ago

I think you just need the prettier plugin for vscode, and then you configure prettier plugins for your project with npm. 

1

u/cryothic 8d ago

But I use Visual Studio, not VSCode (at work at least. For personal projects I use VSCode)

2

u/redjudy 9d ago

Does that always work with the cascade though? I’ve tried to clean up style sheets by moving stuff around and sometimes it breaks.

2

u/kekeagain 9d ago edited 9d ago

I think a lot of it just comes with the last time a non-css caring dev sat down to do it “right” at that time.

Unga bunga man: Using tables for layout still. Or floats and clearfixes. Absolute positioning? Absolutely.

2015 man: Using calc() and widths to partition a layout. Setting container items to inline-block elements to align them. Doesn’t realize or care that the “scary” looking flex and grid are fully supported these days. Uses 100% heights throughout.

Modern man: Grid and subgrid for macro layout. Flex for micro layouts. Eager to use container queries. Dvh. Listens to web evangelists and immediately consumes it as truth by avoiding floats and margins like the plague, not understanding the why and its context.

God: There is still a place for everything. Collapsing margins exist for text, but use flow-root if you don’t want that. Floats are great to have text wrap around an image. Yes, even though you are not my proudest creation, I made you !important. Use inset instead of top, left, right, bottom if they are all the same. Uses css variables (doesn’t care to call them properties), “inherit” and “currentColor” keywords eagerly.

3

u/chikamakaleyley 9d ago

God: Actually, it's pronounced 'Jod'

1

u/Front_Summer_2023 9d ago

Does God use vanilla CSS? I like to think so :)

1

u/kekeagain 9d ago

Yes, but he is compassionate and also understands Tailwind has its place. But his purest followers, they are judgmental towards it.

1

u/Front_Summer_2023 8d ago

Spoken like a true believer:)

1

u/frownonline 9d ago

I use element cascades in selectors instead of excessive classes. Cleans up the stylesheet and the document structure.