How To Format Your CSS Code as a Professional

As a full-stack web developer, I'm building different websites by writing code every single day. Experiencing several situations including solving problems and fixing errors.

"What are the possible errors that could happen while coding!"

1. Syntax errors.

Which are the most common errors that I have to deal with, almost every time I write code. It's starting from I misspelling words until I forget to put semicolon at the end of each line. Luckily, These errors are easy to see as long as I keep my eyes open on the text editor, and even if I didn't recognize them there, the developer tools within the browser will inform by a very long red warning text.

So, what about the errors that we don't see directly! Even the developer tools will not be able to detect it. Otherwise, the project still can run without any obvious issues. Yes! It's how your CSS code looks like.

2. Formatting errors.

It's the errors that have to be fixed when it comes to being professional. If you're working in some company or remotely or even working as a freelancer in different projects with a team, you'll have to make your code clean and looks professional as much as possible (if they don't have a standard coding format instructions to follow such as Facebook, see this link for more info).

What are the instructions should we follow to detect and fix these kind of errors?

Okay, that's a great question to ask here! There are bunch of styling errors applications that can detect your errors and fix it before someone else reviews your code, so it's usually tells you when you're about to get your code reviewed! Such as stylelint and Github Actions.

They simply go for some checks on your code (your CSS and HTML files), and then give you some suggestions to format your code and make it as perfect as it could be.

So, let's see some examples for such errors.

/* You shouldn't do this */

.example-1{
color: #333;
}

/* You should do this */

.example-1 {
  color: #333;
}

You might ask yourself now, What's the difference!! Let me tell you that as a result. There's absolutely no difference, it's the same code. But, it's not the same format.

As you see, at the first code snippet, there is no space between the

.example-1

and the

"{"

and it should be only 1 space between.

And for the code within the selector which is

color: #333;

it should be pushed forward two spaces as you see in the second code snippet.

/* You shouldn't do this */

.example-2 {color:#333;}

/* You should do this */

.example-2 { color: #333; }

For the second example

.example-2

, notice that there's no space between the

"{}"

and the code inside of it. This is wrong, you should do it as it appears in the second code snippet. Also the space between the

":"

and this code value

#333

; is required and considered within the instructions you should follow to make your code styles error-free.

/* You shouldn't do this */

.example-3 {
  color: #333;
}
.example-3 span {
  color: #777;
}

/* You should do this */

.example-3 {
  color: #333;
}
/* line-space */
.example-3 span {
  color: #777;
}

You should always leave a line-space between your selectors within your CSS file so that the code looks more organized and easy for the eye to catch and follow.

/* You shouldn't do this */

.example-4 {
  color: #333;
}

.example-4 span {
  color: #777;
}

.example-4 p {
  font-size: 1.1em;
}

So, let's say that the last selector .example-4 p is the very end for your CSS file and you have no more styling to add to the file. If that so! You should always leave an empty line at the very end of your code after the last selector (just one single empty line).

/* You should do this */

.example-4 {
  color: #333;
}

.example-4 span {
  color: #777;
}

.example-4 p {
  font-size: 1.1em;
}
/* empty line */

There are bunch of more styling errors that you should look at and be familiar with it, but these are the most common ones. (See this link for more info).

Where I've learned this as a Full-stack web developer!

I'm a current student of the Microverse program, and this professional formatting was required and included within my projects through the program, and it was a very interesting thing to learn and understand!