Clean Code (in HTML and CSS)

Code should be easy to read, easy to understand and easy to change. We achieve that by writing clean code. Here are some of the principles to follow.

Naming conventions

When using CSS class names, use kebab-case. See this blog post for a bit more explanation on what kebab case mean, but in a nutshell, kebab case means all lower case with hyphens - between each word. You should also try to make the class name as descriptive as possible.

Example of bad class names 🛑

.blueBox {}
.x {}

Example of good class names ✅

.user-login-form {}
. calculator-result

Don't repeat yourself

“Don't repeat yourself” (often referred to as DRY) means abstracting your code to make it more reusable. For example, if you have a bunch of <p> tags in your HTML which you want to look the same, you should aim to write just 1 CSS selector which targets all of them instead of copying and pasting your CSS properties across a lot of selectors.

With CSS you should always aim to make your classes as generic and reusable as possible.

Example of not following DRY 🛑

<div>
<h1>Hello world</h1>
<p class="paragraph-1">An important message</p>
<p class="paragraph-2">Another important message</p>
<p>I shouldn't be red because this isn't important</p>
</div>

.paragraph-1 {
color: red;
}
.paragraph-2 {
color: red;
}

Example of following DRY ✅

<div>
<h1>Hello world</h1>
<p class="important-text">An important message</p>
<p class="important-text">Another important message</p>
<p>I shouldn't be red because this isn't important</p>
</div>

.important-text {
color: red;
}

Benefits of doing this:

• It's easier to find all the items which are 'red'.
• The class name important-text is more more indicative of the purpose it serves than paragraph-1 and paragraph-2 are. When you come back to this code in the future, you're much more likely to remember what it meant.
• If you want to change the color from red to something else, you just have one selector to update in your CSS.

Indentation & spacing

When writing code, you might copy and paste examples from other files or solutions you've found online. This can often lead to your code having weird indentation and weird spacing between your blocks of code.

The rule to follow here is that if there's a new block, then you indent one more level. At Technigo, we use 2 spaces for indentation.

Example of bad indentation 🛑

<div><h1>Hello world</h1>
<p class = "important-text">An important message
</p>


<p class="important-text"> Another important message</p>
<p>I shouldn't be red because this isn't important</p>
</div>

.important-text{
color:red;
background: pink;
}
.header { background: blue;}

Example of good indentation ✅

<div>
<h1>Hello world</h1>
<p class="important-text">An important message</p>
<p class="important-text">Another important message</p>
<p>I shouldn't be red because this isn't important</p>
</div>

.important-text {
color: red;
background: pink;
}
.header {
background: blue;
}