From the course: CSS: Design Systems and Architectures

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Class-based CSS

Class-based CSS - CSS Tutorial

From the course: CSS: Design Systems and Architectures

Start my 1-month free trial

Class-based CSS

“

- [Narrator] Good CSS architecture should be reusable and flexible, which is why many developers are opting to stop using ID selectors and only using type selectors for base styles and classes for any other CSS. Classes can be use multiple times on the same page, and multiple classes can be added to the same element. IDs, on the other hand, can only be used once per page and once per element. IDs also have a higher specificity level. So using them sparingly or not at all can reduce some potential specificity issues. Choosing classes as a convention can also make your HTML easier to read. If you see an ID in the HTML, then you'll know that it's only there for nonstyling purposes, such as in page linking, or used as a hook for JavaScript. Whether you choose to follow a class base CSS architecture or continue to use IDs, naming conventions should be established for consistency. Here are some rules I like to keep in mind. Use lowercase letters only, and decide whether to use dashes…

Contents