7

This might just be me and my OCD talking, but am I the only one who gets super annoyed with sloppy CSS formatting?

So like, if somebody writes a sloppily formatted rule like this without spacing out each property and value:

#signUpButton {color:#FFF;background:#000;float:right;clear:both;padding:5px;position:absolute;top:5px;right:20px;height:100px;width:45px;}

As opposed to something like this, which just looks much cleaner:

#signUpButton { color: #FFF; background; #000; float: right; clear: both; padding: 5px; }

The formatting makes no difference in how the CSS is evaluated and rendered, but I find the spaceless style so ugly and difficult to read/edit, whereas the spaced out style is much more appealing to the eyes and easier to read

I find myself reformatting other people's CSS that works perfectly fine just so it will be easier to read/edit for anybody else that looks at it in the future

Comments
  • 1
    Because half the time they are quick fixes, experiments?
  • 4
    Both of those examples are abhorrent to me. Each property should be indented on its own line (unless it's minified of course).
  • 3
    Also, who still uses floats!?
  • 0
    @DeadInside I just wrote random properties/values for example's sake 😂
  • 0
    @DeadInside Truth. I usually indent, but didn't in this case just to save space within the rant
  • 2
    That's why one puts 'prettier' in the git pre-commit hook.
  • 0
    @DeadInside css grid is de way
  • 3
    Totally agree. Ugly css is ugly.

    I have a very specific order I put everything in, with newlines between sections. Values are all vertically aligned per section. For nested rules, each rule's styles go at the top with a newline always before the next rule

    This makes styling much easier to read and debug at a glance.
Add Comment