Cascading Style Sheets: they take patience and must be understood. Otherwise you can get destructive and counterproductive.

Where is the example?

.feature-list {}

We’ve got a feature list that is used in several contexts: detailed, compact, expandable, etc.

If that is the case, you need to use the cascade or specificity here.

.feature-list.detailed {}
.feature-list.compact {}
.feature-list.expandable {}

Alternatively, use the cascade:

.page-summary .feature-list {}
.product-detail .feature-list {}

I just went through an example where the same .feature-list was being used in more than one context. In a very destructive way. With using littered !important rules that were conflicting with other instances of feature lists.

It can be scary when the cascade or specificity is not fully understood. Ultimately, it wastes time for all involved.

My suggestion, before you get impatient and start thrashing, please understand the technology and it’s safe practices.


Comments are closed.