readability is personal

Just accept it, "readability" is not a definitive concept. What is readable to me may look like a complete and utter mess to the next guy. I prefer single-line css because I need context about where I am exactly in my css file. Finding properties within a specific selector rule isn't much of an issue. Others prefer multi-line css because it helps them to quickly find properties within a single selector while they don't care so much about where they are in a specific file. Both are viable methods and depending on what you are used to or what you prefer you may opt for either of the two options.

Start up a discussion between people with different opinions about code layouting and you're all set to witness one of the most nonconstructive conversations ever recorded. Both sides have sensible motivations and they all have good points to bring to the table. And even if there is some intersubjectivity at play here, there is really no good reason to force your own standards upon people who aren't equipped to digest them like you are. 5 years ago we were already having this discussion, I bet you could even go back 10 years and still come up with some articles on code layouting. The thing is: no matter how much we talk about it, we're not fixing anything as personal preference will always trump a standardized code layout.

coding standards

The example I linked above is just one of many coding standards out there. Every big front-end guy has released his own standards in some form or another at one point in time. It all amounted to very little, it was just one more standard added to the pile. Looking at these standards up close though, you'll quickly notice that many of them are actually very meticulously defined, stating a set of strict rules that need to be matched. Obviously people are putting a lot of time in voicing their preferences and putting them on paper.

Well guess what, computers are very good at matching rules. If you can spend a couple of hours defining and writing down your own coding standards, it shouldn't be too hard to configure your code editor of choice to apply them automatically to whatever file you're editing. Not only will you save a lot of time not having to nitpick your own code all the time, you can just as easily share files with other people (who have their own set of preferences defined). Talk about a true readability win here. The only problem? Most code editors aren't really equipped for automatic layouting.

layouting css

It's pretty weird that so many code editors have moderate to just plain bad support for custom layouting our html, css and js files. Css files in particular are super easy to layout as there are only a handful of conceptual elements that exist within in the css language (selectors, curly brackets and property/value pairs are the most layout-influential ones):

That line tells you about everything you need to know about my css coding style. Spacing between elements, closing ;-s, space-wrapped combinators, single-line ... it's all there. Add some options for sorting the css properties the way you want them to appear (alphabetically or grouped by thematic differentiators like positioning or typography) and you're pretty much there.

And as long as you don't screw around with the selector order in a css file you can even define whitespace used between selectors, comments and groups of selectors. How hard can it be right? why are we trying to push our own preferences again?

conclusion

Code layouting is the responsibility of software, not coders. Sadly many code editors out there haven't realized this yet, so it up to us to request the feature until we get what we deserve. If our code editors give us the means to neatly layout our code, there are no more readability problems, no more issues between team members with different preferences, no more "what the fuck is this shit, this css file is 14000 lines long" because someone prefers multi-line css. And most importantly, no more self-centered articles pushing some random coding style.