Module styles overwritten by client's CSS

[erikdwallace]

My company has a directory product that lives in our clients’ webpages. As a result CSS styles on markup elements like <h1> and even class names like .nav get overwritten. What is the best way to prevent this?

In the past I’ve added a prefix like “.xyz-nav” to prevent the class from being overwritten. However after reading SMACSS I’d like to use “l-” and “m-” in my classnames to note layout and module classes. With multiple prefixes the classnames are too hard to scan. Is there a better option I haven’t considered?

A friend suggested using a unique id like “#xyz .nav” to fix the issue. However I think using an ID as a selector would be slower and less efficient.

Thanks.

[__]

An id as a parent selector is a bit inefficient, but in this case, it’s probably the best way to “scope” your style rules.

(To be clear, I’m talking about
#wrapper .class, not
#wrapper.class.)

[erikdwallace]

Thanks for the input traq.

[Author]

Posts