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.