Common CSS Mistakes To Avoid

Let’s be honest about this.

Is CSS really so difficult?

Even though the style classes are straightforward and utilise modern English to describe most of their properties like font size and colour, it’s easy to get caught up in them when working on a larger, high-performance project.

Let’s take a look at 5 frequent CSS blunders that we all commit.

Table Of Contents

Avoid Magic Numbers

A magic number is a numerical value that is employed for no other reason than the fact that it works. Never use numbers just because they’re convenient.

In this scenario, using *top: 100 percent *, which roughly translates to ‘all the way from the top,’ is preferable.

Don’t do this

.dropdown-container
.dropdown-menu {

  margin-top: 47px;
}

Do this,

.dropdown-container
.dropdown-menu  {

   top: 100%
}

Avoid mixing container with content styles

Don’t use location-dependent styles on isolated components. No matter where a component is used, it should have the same appearance. Instead, employ layout wrappers for unique use scenarios.

Don’t do this

.form-input  {
   font-size: 14px;
   padding: 4px  8px;
   /*Content is mixed with container here*/
   margin-top: 20px;
}

Do this,

.form-input-wrapper  {
   margin-top: 20px;
}

.form-input  {
   font-size: 14px;
   padding: 4px  8px;
}

Avoid Using Qualified Selectors

These are unnecessarily attached selections to an element. This is terrible news because it eliminates the possibility to reuse a piece while simultaneously enhancing specificity.

Don’t do this

ul.nav  {}
a.button  {}
div.header  {}

Do this

.nav {}
.button {}
.header {}

Avoid Using Absolute Values For Line-Height

Line heights should always be set relative to one another to make lines more flexible. You want to know that if you modify the font size of an h1, the line height will adjust accordingly.

Don’t do this

h1  {
   font-size: 24px;
   line-height: 32px;
}

.site-title  {
   font-size: 36px;
   line-height: 48px;
}

Do this

h1 {
   font-size: 24px;
   line-height: 1.333;
}

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

Avoid Loose Class Names

Loose class names are bad because it’s impossible to know what they’re for just by looking at them, and they’re so broad that another developer could easily redefine them.

Don’t do this

.card {}
.modal {}
.user {}

Do this

.user-post-card {}
.confirmation-modal {}
.user-avatar {}

Thank you for reading