Coding Etiquette?

HTML-CSS
1

Hi codecamp,

While clearing through the criteria on freeCodeCamp, along with reading other posts online, it has become apparent to me that writing out your code a certain way is important to coders and employers alike. I’m currently going through the Basic CSS section where is laid out as:

<style>
  .red-text {
    color: red;
  }

I wrote it out as .red-text {color: red;} and obviously the section cleared, but on the next section the code went back to the way it is above.

Is this the correct etiquette? Does it matter either way?

I started freeCodeCamp about two days ago and I’m finding myself waking up everyday jumping on and hashing a little bit out before starting my day. Loving it so far.

Thanks all ~

2

If you have many more properties than just color: red then you’ll want to write each on a new line for readability.

It’s mostly a matter of preference what’s more important is consistency.

At this point you should just experiment, see what works, use what looks better to you. You’ll make mistakes and change your mind many times.

Edit: The standard way is to write each property on a new line.

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}
1 Like
3

Agree to the above. Get into good coding & formatting habits now.

Some companies, once you land a job, will have their own way of doing things as far as coding conventions as well so there’s that as well.

4

You’ll generally find that most professional codebases or public projects you work on will likely have linters that apply particular style preferences to the project.

Google ESLint and Prettier for examples.

5

Thank you for the informative post.

6

If you are interested in learning best CSS coding conventions, you can read about OOCSS, and BEM CSS.

These are a couple of technique in writing CSS. If you have some experience with CSS coding, you can understand them quickly because it is a solution for many problem we face a web designer.

There are many articles on the web. You can also check YouTube. You cab search for “OOCSS” in Google or YouTube.