HTML / CSS Style guide and coding conventions

Hi,

I was trying to find some good resources for HTML / CSS Style guides and coding conventions.

Specifically, I wanted to learn about using tabs/spaces to indent code. What is the conventions with HTML / CSS?

Also, I wanted to ask about what order we should put our CSS in the brackets, i.e. should we put width, colour, display, font, background colour etc. information in a certain order? It would seem nice to keep it all the same throughout the site at least?

And anything else about the aesthetics/styles/conventions of coding HTML/CSS. It would be nice to make my code as neat and tidy and correct as possible… :crazy_face:

I read this: https://www.w3schools.com/htmL/html5_syntax.asp it has some info about HTML but I’m not sure what else to search for specifically for CSS ?

Hello!

I would say that there is not much about HTML, since it’s a markup language. It’s more important to be constant with what you already have. For instance, if you’re starting a project, then write all your HTML in lowercase and your id, classes and names in kebab case (with hyphens between words). However, if you’re working on someone else’s project, then you should follow whatever convention they’re using (be it all upper/lower case, snake case, etc.); this helps to maintain the project.

The same applies to (almost) everything else.

Now, for CSS, I think SMACSS is a good choice (affects HTML and JavaScript too).

This is just a personal opinion, so write it however you want :slight_smile: or follow the conventions of your project.

I hope it helps :slight_smile:,

Regards!

2 Likes

Two spaces for indentation is the most common. Some use tabs. Some set up the code editor to have Tab to do the same as using two spaces (Tabs versus Spaces).

As for the order of the CSS rules. Personally I think it is nice to have some logical grouping of rules, but it usually just happens and is not something you spend much time thinking about. I do reorder rules or intentionally insert new rules at the location I think they fit the best, or at least I try.

If the rules are totally mixed and the selector has a lot of styles it makes it harder to reason about the styles.

Example
/* somewhat ordered */
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  font-size: 3rem;
  text-transform: uppercase;
  color: orange;
  background: #1b2b33;
  padding: 20px;
  margin-bottom: 20px;
}

/* mixed order */
.card {
  font-family: sans-serif;
  display: flex;
  color: orange;
  justify-content: center;
  margin-bottom: 20px;
  align-items: center;
  font-size: 3rem;
  background: #1b2b33;
  padding: 20px;
  text-transform: uppercase;
}

There are some CSS style guides you can look at.

2 Likes

That’s awesome! I just couldn’t think what to google but CSS style guides is the one!

Also the SMACSS book looks awesome!

Haha I feel like you could spend your whole life just getting reasonably proficient in HTML/CSS (Well I could anyway!)

1 Like