Why can't you use classes all over your document? In this video, learn best practices for mixing selectors in your document, including selecting with the least specificity, leveraging pseudo-classes and pseudo-elements, and minimizing the use of ID selectors.
- [Instructor] Now that you know all of these fabulous ways … to make selectors, what should you do? … Should you try out all of them … or should you just throw up classes everywhere you go? … It might seem easier especially to a beginner … to use classes for all of your styles everywhere. … Let's look at some best practices … in CSS selector choice. … Generally speaking in CSS, less is more. … Simple selectors with the least amount … of specificity for what you are trying to select … is what you want to use. … Classes everywhere means cluttering up your HTML … with potentially unneeded CSS classes … reducing code reusability. … And with every selector at the same level … of specificity, all of your styles … may fight with each other frequently. … The big C in CSS stands for Cascade … and when combined with inheritance, … this is your friend. … It makes styling simple, easy to override styles … with other options under different conditions. … If every selector is the same specificity, …
Author
Released
5/2/2019- Targeting classes and IDs
- Working with group selectors
- Targeting element attributes
- Targeting links with pseudo-class selectors
- Targeting child elements and empty elements
- Targeting parent, child, and sibling elements
- Best practices for CSS
- The impact of CSS selectors on performance
Skill Level Intermediate
Duration
Views
Related Courses
-
HTML & CSS: Creating Forms
with Clarissa Peterson2h 30m Beginner -
Introduction to CSS
with Carrie Dils1h 58m Beginner
-
Introduction
-
The power of selectors1m 8s
-
-
1. Review of Basic CSS
-
CSS terminology2m 58s
-
Groups of selectors1m 52s
-
Compound selectors3m 19s
-
-
2. Combinator Selectors
-
Descendant selectors3m 36s
-
Parent-child selectors3m 51s
-
3. Attribute Selectors
-
Simple attribute selectors2m 47s
-
-
4. Pseudo-Classes, Pseudo-Elements, and the Universal Selector
-
Understanding :not2m 53s
-
:root and :empty4m 27s
-
5. Choosing Selectors
-
Conclusion
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Why can't I use CSS classes exclusively? Selectors best practices