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.
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.
© Copyright Lachlan McLeod 2025.