Themes, jQuery plugins and all sorts of widgets from outside of concrete5 often come with CSS that interferes with other aspects of a site or the concrete5 dashboard. You can easily use a LESS or SASS compiler to quickly limit the scope of such CSS.
Even if you have not spotted any conflicts yet, limiting the scope of CSS is generally a good design practice that can help avoid trouble in the future. Limiting the scope of CSS is actually recommended in concrete5 theme guidelines.
The first step is to decide which HTML element you need to scope the CSS to and whether to identify it with an id or with a class. An id has stronger association for CSS, but you can only use an id once on a page. A class has weaker association, but can be used in many places.
For a theme, you could use an id like my-theme-content on an outer div to scope the theme.
/*
Please interpret the square's as angles. There is a bug in the c5
markdown that prevents angles or less-than codes from translating
*/
...
... c5 and theme header stuff ...
...
[body]
... concrete5 preamble stuff
[div id="my-theme-content"]
...
... page type layout for theme
...
[/div]
... concrete5 footer stuff...
[/body]
That is just background. If you look through the documentation and howtos there is plenty more to read about structuring themes.
Suppose you already have a mass of CSS, from a theme you are importing or from a framework you are building a theme from. It may contain hundreds or thousands of styles. You don’t really want to have to go through all those styles one-by-one and prefix them with #my-theme-container. It’s a tedious and error prone task that can only becomes a maintenance nightmare.
The trick is to use LESS or SASS to add scope. LESS and SASS are extensions to CSS that, when processed by a respective compiler, output pure CSS. Take all the CSS you want to scope, wrap it in a single scope declaration and apply the LESS or SASS compiler. The output will be fully scoped CSS.
There are many ways to implement the detrails. If the theme is already built from LESS or SASS, you can usually just create another file with the scope declaration that @includes all the various component files within the scope declaration. Or you could edit the outermost file to add a line to open the scope at the top and another close it at the end. You may also need to change the extension of all the files you are compiling to end in .less or .sass so the compiler will know to process them.
Do some Googling and you will soon find LESS and SASS compilers that you can run from the desktop, run online from a web site or build directly into your site to compile on demand.
Lets begin with the trivial case of a simple style sheet for the "Monster Font" theme that inconveniently globally over-sizes all paragraphs. That may be what the theme wants, but it turns out some parts of the dashboard are also suffering monster sizing.
p{
font-size:50px;
}
To limit the scope you can wrap it to be:
#my-theme-content{
p{
font-size:50px;
}
}
When you then compile the LESS or SASS, the resulting CSS will be:
#my-theme-content p{
font-size:50px;
}
The over-sized paragraph font is now constrained to only apply to paragraphs inside #my-theme-content and cannot interfere with anything outside that container.
That was just a trivial example. The technique extends to wrapping many styles in one go. What you are aiming for is an outer wrapper for all the styles that looks like:
#my-theme-content{
// wrap all styles inside here
...
}
When you compile the LESS or SASS, the output will be CSS that is all instantly scoped to your container. Styles that argue with the dashboard, with other themes, other block templates or other jQuery widgets should be a thing of the past.