CSS - Best Practices

HTML-CSS
1

When creating HTML elements, what is the best method to style them?

For instance, do I create an ID if a style is specific to one element, or use a class regardless. Or do I use the HTML tag itself? (like main{})

And also suppose there is a structure similar to this:

<nav>
<a></a>
<a></a>
</nav>

Is it a good practice to style the anchortag element like this a{} or nav a{}?

Thanks, Campers!

2
  1. Specific styles definitely works best with id because you may have 2 p tags
  2. classes are less specific than id’s
  3. give a tags a class, you may have some navbars you want to style differently
3

Generally use classes, all the way down. There isn’t generally a good reason for applying styling using IDs. They are very useful for form inputs/label relationships, and can be very useful for JS. But not so much for styling.

Try to avoid nesting selectors. So prefer

.my-nav {}
 
.my-nav-link {}

To

nav {}

nav a {}

Be specific, not generic (normally use classes rather than targeting tags). And understand CSS specificity; using flat classes will allow you avoid the pitfalls of specificity & the CSS cascade.

Nesting stuff is ok in specific cases, but don’t overuse it because it will make your styles difficult to maintain and change.