Good article. I’d like to add a bigger concern is unnecessary nesting or using ids as parent selectors. That’s the reason we use the important in the first place, because the logic behind all the unncessary specifity gets so complicated it takes us too long to do our job and just style it.
example:
#component ul li a span.
While used for one isolated situation this may seem fine, but when wrapped in another component, or a state change, or looks different in a different screen size or needs a browser/device specific fix then it multiplies the amount of overrides you need. Sometimes you can’t avoid all the overrides, but we can avoid unnecessary nesting.
consider this:
@media (max-width:768){
.ff body.modelOpen .modal .drawer.expanded .accordian .accordianInner.expanded #component ul li span
}
Then this:
@media (max-width:768){
.ff body.modelOpen .modal .drawer.expanded .accordian .accordianInner.expanded #component ul li span
}
Steve
Good article. I’d like to add a bigger concern is unnecessary nesting or using ids as parent selectors. That’s the reason we use the important in the first place, because the logic behind all the unncessary specifity gets so complicated it takes us too long to do our job and just style it.
example:
#component ul li a span.
While used for one isolated situation this may seem fine, but when wrapped in another component, or a state change, or looks different in a different screen size or needs a browser/device specific fix then it multiplies the amount of overrides you need. Sometimes you can’t avoid all the overrides, but we can avoid unnecessary nesting.
consider this:
@media (max-width:768){ .ff body.modelOpen .modal .drawer.expanded .accordian .accordianInner.expanded #component ul li span
}
Then this:
@media (max-width:768){ .ff body.modelOpen .modal .drawer.expanded .accordian .accordianInner.expanded #component ul li span
}