Even if you ignore the other suggestions, please follow this one and put a space after your colon. I don’t care what anyone says - to me, that example is a mess. But seriously, this is probably the most important way to ensure your CSS is readable and scannable. Yes, I once announced in a business meeting (no joke) that the other developers needed to have a space after their colon. Maybe I’m just too picky, but in my opinion, when I scan a CSS file that has no space between the selector and curly brace, it almost looks like all the first curly braces are missing. Is it a little more difficult to read without the space before the first curly brace? Possibly. This is another small spacing issue, but again, it helps keep things looking clean and uncluttered.
Space Between the Selector and the Curly Brace Okay, it’s not that big of a deal, I know, but when you scan a large CSS file, I think it makes it easier to take in if each block is followed by an empty line. The only difference in the second example is the missing empty line between the declaration blocks. The first thing that I think improves CSS readability is allowing an empty line between declaration blocks, so the blocks don’t morph into one another. So, I’m going to explain here how I think CSS should be laid out (mostly using examples that incorporate multi-line blocks) for easier readability and scannability. Just to clarify beforehand, this article does not constitute an argument in favour of using multi-line CSS blocks over single-line CSS blocks.īut once in a while I peek at people’s CSS code, or try to follow along with a tutorial discussing some CSS topics, and notice that the CSS isn’t very easy to scan through, and the main problem is often white space, or you could say “breathing room”.
0 kommentar(er)
