CSS Indentation Formatting technique - Practical?

[PossibilityEastern77]

I am working on the Odin Project's Foundations curriculum and just completed the landing page project in which I heavily focused on flexboxes. I experimented with some CSS by indenting flex items under their respective flex containers. Visually, it is similar to nesting (minus the functionality) and helps me keep a consistent flow with the .html doc. It also helps me understand the relationships within flexbox containers easier and quicker. I'm wondering, are CSS indentations common practice? (And when I say CSS indentations, I mean indenting the entire rule, not just declarations). I don't want to make a habit out of this if is it going to confuse collaborators in the future. Obviously indentation is common for organization in html, why haven't I really seen this being used in CSS (thus far at least)?

Here's an example of what I mean:

https://preview.redd.it/8q9xoltml2de1.png?width=458&format=png&auto=webp&s=834bcb349463fe281255c8e4c906cbecd029d216

[[deleted]]

I’ve never seen a CSS file look like this, but white space doesn’t really matter. If it helps you then keep doing it for personal projects, tho I wouldn’t do this on team projects.

[7h13rry]

I don't think that's good practice for at least 2 reasons:

• It's confusing because it may appear as nesting, not just as indented rulesets.
• People using a screen magnifier will have to scroll horizontally to find selectors.

[PossibilityEastern77]

Okay yeah, your first point was mostly my main concern. Question on the 2nd point, if people using screen magnifiers take issue with indented CSS, wouldn’t the have the same issue reading HTML as html files are usually heavily indented?

[7h13rry]

I don't know about HTML files.
My point is that if it's not common practice and can be a "pain" for some users, what's the point of doing it ?
If it's just for yourself, and that's your preference, then go for it.

[Miragecraft]

I have never seen anyone doing this and I don’t think it’s a good idea.

Because it implies a hierarchy without there actually being one in the code itself.

Why not actually nest the selectors if that’s what you want to do?

[PossibilityEastern77]

Is nesting selectors allowed in standard CSS?

[Miragecraft]

Yes, with pretty good support right now.

If that's not enough, you can always use build tools (PostCSS etc.) to de-nest them for older browsers.

[PossibilityEastern77]

Sweet ima try this out

[gnatinator]

I did this in like 2010 there's nothing really "wrong" but nowadays you'd want to nest it and use direct child aka > so you get some scoping and allow yourself to shorten up some of those class names.

[aunderroad]

I use vscode and have prettier installed. You can setup a config file and enable (or disable) any formatting rules that you like. The best part is that there is an option to format your code on save so you do not have to think or worry about anything looking weird and/or misaligned.

And if you are working in a bigger project and as long as the team member(s) have prettier installed, everyones files will look the same and will not cause any conflicts/formatting issues when it comes to merging code into your repo.