When making a websites, there seems to be common mistakes in CSS that are made unintentionally. Below are those common mistakes and their fixes.

When line heights are set, units are being used

Child elements will inherit whatever the parent’s computed line-height’s value is. This lack of relativity will force you to keep adding line-height’s in order to override the previous values.

h1 {
font-size: 50px;
line-height: 75px;
}

.post-title {
font-size: 36px;
line-height: 54px;
}

.page-title {
font-size: 72px;
line-height: 108px;
}

And here it is with unitless line heights:

h1 {
font-size: 50px;
line-height: 1.5;
}

.post-title {
font-size: 36px;
}

.page-title {
font-size: 72px;
}

Pixel units are always being used

ems and rems aren’t being used at all. px is not the only unit that can be used in CSS. Save time by using rem and em units when setting breakpoints, font sizes, margins, and paddings.

h1 {
	font-size: 3rem;
	margin: 1rem 0;
}

Combining rem and em can also provide better results.

.button {
	font-size: 1.125rem;
	padding: .5em .1em;
	background-color: #eee;
}

Avoiding !important

Some people have it beaten into their heads that !important is bad. Sometimes it is necessary to force things in classes. Though, do avoid using it as a quick way to deal with specifying issues.

No Comments

Comments are being left out of CSS. Commenting your code will make it easier for anyone who could be inheriting your code. You should comment on anything that isn’t already obvious in your code.

Overdoing Comments

Going overboard on comments can be troublesome because at some point in time people will forget to update them! Unreliable comments can be worse than no comments at all.

For better maintainability, avoid unnecessary things. Here’s some things that shouldn’t be in your comments:

• Things that are obvious in the CSS.
• Unit conversions
• Changes and revisions

These are only a few of the things that could be ultimately fixed. For more things to be aware of when writing your CSS, check out this awesome article.