CSS Mastery (3rd Edition) – Advanced Web Standards Solutions [PDF]

Summary
Here on this page, we have provided the latest download link for CSS Mastery – Advanced Web Standards Solutions PDF. Please feel free to download it on your computer/mobile. For further reference, you can go to springer.com

CSS Mastery – Advanced Web Standards Solutions – Book

The first thing to note is the use of an id in the selector. This prevents the reuse of this selector anywhere else on the page, which is unnecessarily limiting. There is nothing wrong with using id attributes per se: they are great for in-page links or JavaScript hooks.

There’s nothing preventing you from using them as CSS selectors either, but the high specificity makes it troublesome to override any variations of the rule. Something like a message component is likely to be both overridden and repeated on the page, so in this case, an ID is definitely a problem.

Furthermore, we’ve added a completely unnecessarily div qualifier to the selector, which does nothing but increase the specificity even more in this case. It’s common to see element selectors used together with id s or classes in this way—usually, it’s a result of trying to override some all-too specific rule somewhere else. Often, the solution is not to escalate the specificity “arms race” but to rethink your naming strategy.

Another thing to note is the id attribute name: #pink-box is describing a specific property of the alert message box. We could decide to change the warning message to a white box with a red icon inside instead, and the class name would no longer make sense.