将大量Css样式定义置于语境中的最佳方法是什么？

Question

我们正在使用Css作为样式机制开发一个Html小部件。小部件需要是自包含的，以便它不会干扰主机网页上的任何其他组件。

我们有一个包含大量样式定义的Css文件。为了将它们上下文化，每一个都以主要小部件容器的名称开头......

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

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

有没有办法可以更全面的方式应用MainWidgetContainer上下文？

注意 - 可能是挑剔的。我可以按照它的方式生活，但我认为值得一提。

Answer 1

看看LESS：http://lesscss.org/

Answer 2

Here's the documentation on using selectors。你可以使用mainwidget容器的子代。这不是最直观的选择，但对于像这样的东西来说，这是一个真正的节省时间。

Answer 3

在这种情况下，我认为您唯一真正的选择是在所有选择器中使用#MainWidgetContainer id。任何比这更通用的风险都会与主机样式表发生冲突，或者不会被您的样式选中。如上所述，您可以使用LESS或SASS以这种方式减少单调乏味，但您的样式仍然必须使用该选择器。