What is the best way to contextualise a large number of Css style definitions?

Question

We are developing a Html widget using Css as the styling mechanism. The widget needs to be self-contained such that it doesn’t interfere with any other component on the host webpage.

We have a single Css file with a large number of style definitions in it. In order to contextualise them, every single one starts with the name of the main widget container...

#MainWidgetContainer .class1.....
{...}

#MainWidgetContainer .class2.....
{...}

Is there a way I can apply the MainWidgetContainer context in a more global way?

Note – Possibly being picky. I can live with it the way it is but I thought it was worth an ask.

Answer 1

Here's the documentation on using selectors. You could use child of mainwidget container. It's not the most intuitive thing to pick up, but it's a real timesaver for stuff like this.

Answer 2

Take a look at LESS: http://lesscss.org/

Answer 3

In this instance, I think your only real option is to use the #MainWidgetContainer id in all your selectors. Anything more generic than that risks clashing with the host stylesheets or won't be picked up by your styles. As mentioned above, you can use LESS, or SASS to reduce the tedium of writing in this way, but your styles still have to use that selector.