Too general selectors

General selectors are pretty dangerous selectors. Those selectors are like header or p or span. These selectors will select every header, p or span on every page of our application. Are we absolutely certain that we want to select all of them and apply those styles to them? Let’s say we have an application like Facebook or Instagram which has tons of pages, can we be brave enough to select h1 and style all h1s at once? These selectors are dangerous because developer can not be aware all the time of all the elements in the large scale app. I would not want to waste my time on worrying if I broke something on some page with that margin.

1
2
3
h1 {
margin-top: 20px;
}

How can we fix this? Well, we can use class instead, even if it is just a .header or .nav . It will still be more specific than those general selectors. I would personally use something even more specific, maybe tie that class to the page of the element:

1
2
3
.profile-page .header {
// styles
}

Whichever approach you choose, it should be better than just using header or h1