Using CSS, you can reference and style your HTML by selecting the class and/or ID attributes of specific HTML elements.
What’s the difference between the two? In short, using classes allows you to select and style many elements with a particular style, while using an ID only allows for a single element to be styled. Using these classes and IDs allows you to have flexibility in how you control the design of individual elements and groups of elements on the page.
In the last video, we learned that classes and IDs allow you additional flexibility and control over styling different elements on your page. We also learned the difference between classes (styling a group of elements) and IDs (styling just one element).
So what’s the recommended approach when adding classes and IDs to your elements? The best practice when adding specificity to your CSS is to only do so when necessary, and always think about scalability. How do we follow these practices?
Ask yourself if you can apply the style to the element selector instead of creating a class or ID. If so, use the element selector to style your elements.
You are technically allowed to use CSS IDs, but these are almost never used by professional developers because of their specificity. CSS classes give you the ability to reuse styles, and any style specified with an ID isn't reusable. Also, IDs can override classes, making a codebase more difficult to maintain when it gets larger.
In general, using classes in your CSS will help with the scalability of your design and help you write cleaner code.