CSS Basics: The Syntax That Matters & The Syntax That Doesn’t

When you’re starting to play around with CSS at the very beginning, like any other language, you have to get used to the syntax. Like any syntax, there are a bunch of little things you need to know. Some characters and the placement of them is very important and required for the CSS to work correctly. And some characters are more about clean looking code and generally followed standards but don’t matter for the CSS to work.

First, so we have the terminology down:

Important: Braces

All CSS rulesets must have opening and closing curly braces:

If you miss the opening brace, CSS will keep reading as if the next bit of text is still part of the selector. Then it’s likely to find a character like ; which are invalid as part of a selector and break. Breaking likely means it will screw up itself and the next ruleset, and recover after that.

Missing a closing brace is a bit worse in that it’s likely to mess up the rest of the entire CSS file unless it somehow finds a double closing brace and can resolve that first missing one.

Overall point: braces are very important!

Preprocessing languages like Sass and Less offer a syntax feature called nesting. This can be convenient, but note that when these preprocessors run and produce CSS, that nesting is removed because CSS by itself doesn’t support that. If you copy nested CSS into regular CSS, you’ll have problems with the braces.

Sometimes Important: Spaces

There are just a few places that spaces are important in CSS. One of the most important is in selectors. One space in a selector means you’re selecting descendants of the previous part of the selector. The selector body p means “select p elements that are descendants of the body element”. That space means a lot. Hopefully it’s clearly different than bodyp which won’t select anything (there is no <bodyp> element). But it’s not different from body p. Multiple spaces mean the same as one space.

You can’t put spaces in properties, function names, or anywhere you name things. Adding spaces in those situations effectively changes the names, breaking them.

Other than that, spacing doesn’t matter much in CSS.

I’d encourage you to be consistent with your spacing, and produce clean and readable CSS. You might want to reference some CSS style guides out there for some formatting best practices.

Even the !important rule in CSS, which comes after a the value in a delcaration like body { background: white !important; } doesn’t have any spacing requirements. It could have any amount of space before it, or none.

The removing of space in CSS is actually a best practice for performance, so you might notice that when peeking at the raw CSS of websites in production.

You’re better off leaving that minification of CSS to a tool that processes your CSS for you, leaving the original alone. We’ll have to cover the options for that in other post.

Mostly Important: Semicolons

Each declaration in a ruleset (a property and value pair) ends in a semicolon. That semicolon is required, otherwise CSS will keep reading the next property as if it’s part of the value of the previous declaration.

You can leave off the semicolon on the last declaration in a ruleset. I’d warn that doing so manually will cause more trouble than it’s worth, and best left to minification tools.

Important: Avoiding Stray Characters

This is important in any language. Every character in code matters, so random other characters will almost certainly break things.

Not Important: Line Breaks

A line break is treated like any other white space in CSS, so feel free to use them as needed, as long as it doesn’t break any other spacing rule like we talked about above.

All in all, CSS syntax isn’t so hard. Good luck!