Lightning, css and communities

Question

This question is a continuation

Bootstrap NavBar in Lightning for Communities

Problem : How to suppress/ make the external CSS property override app.css styling?

Official docs suggest using namespace when loading the external bootstrap css in s1, this would make the scope of css specific to the component, but in this case the standard app.css is affecting my lightning component.

Getting rid of app.css was an approach I thought might work and this question exactly guided me along that path

Lightning Design System is overridden by styles from app.css

I tried the approach but did not work for me in communities, I used inspect element and removed the app.css and the external CSS is applied and things work as expected, but removing app.css is not the solution since it messes up the entire community styling.

So coming back to the original question is there a way to make certain tags more important than app.css ( I do not want to inspect every detail and mark tags important, if there is an easy approach it would make life simpler) or can I alter the order in which the app.css and bootstrap.css is loaded ( I am not an expert when it comes to CSS but read somewhere the order in which the file loads matters, I could be wrong)

CSS Namespacing:

> Many 3rd party CSS libraries like Twitter Bootstrap changes styles for the entire application. This can cause problems when running your component in S1 Mobile app or inside Lightning App Builder. We strongly recommend CSS-namespacing them before using them. This namespace is not the same as your org’s namespace but a simple CSS class name to avoid your CSS bleeding into other components. This could be any unique classname name for a container (div) that wraps your component.

Answer 1

You'll have to use increased CSS Specificity in how you write your style sheet. While you can dive deep into specificity by looking into a specificity chart, the short explanation is that you'll need more selectors to identify things and then you won't need to use !important. For example, instead of this:

.myStyle { 
    background-color: #eee; 
}

do this:

#containerName .classInsideCont div .myStyle {        
    background-color: #eee; 
}

The second example has more CSS selectors and therefor overrides the first.

This image below from the style sheet in the inspector of a community page shows that this element has 4 selectors on it. You would therefore need to either use a specificity from the chart above that overrides this or the shorthand is to just use more selectors (i.e. 5) than this to override it.