Technical Blog
Blog Header Image

Best practice when using classes and ID's

Classes

Classes are used so styles can be made consistent throughout your document. They are reusable and therefore can be applied to multiple elements. Using classes can increase overall efficiency as it is something you can set up then easily apply to style your document. You can also add multiple classes to a single element further saving time.

Avoid deeply nested class selectors. From what I can gather, this is bad practice as it makes it much harder to override styles. Basically this is where the style is applied to the parent which is generally the container element e.g. card, the child element and the grandchild element. In which case this style would override the default styling for all three of these elements and make it much harder to style them individually if required.

ID's

The best practice I have found for using ID's is when that element is only expected to appear once. For example the main header of a website. This is because ID's are unique and do not have the repeatability of Classes. Therefore, ID's should be used sparingly as they can greatly increase the time it takes to style a document and decrease efficiency across a project. ID's have a higher order than classes so they do have a use case when you are wanting to override a class and apply a unique style to a single element.

When to use Classes vs ID's
  • Use Classes when you need to apply styles to multiple elements within your document. They are very easy to repeat so you can save large amounts of time.
  • Use ID's when you have unique elements that only appear once in your document. ID's can also be used to link an element directly to an anchor link.






























© Copyright Lachlan McLeod 2025.