I'm writing a layout that I intend to contribute to Backdrop, but all of the core themes are overriding it in one way or another, none of which are desirable...

For example, Basis and Bartik both include the following CSS:

.layout {
  display: flex;
  flex-direction: column;

I'd prefer to use display: block; but even if I tried to setup my layout to use display: flex;, I still can't override the flex-direction: column; part (to make it flex-direction: row;)...

How is a layout meant to style itself (for layout purposes) if core themes override them?


It seems that another contrib layout in a similar situation decided to override any theme's styling by making it own styles '!important': https://github.com/backdrop-contrib/juiced_up_layouts/blob/master/juiced_up_split_screen/juiced-up-split-screen.css#L2294

And their README says:

These layouts over-ride your theme's CSS for they pages they are enabled on.

I don't really want to do that here, but are there other options? What's the best-practice scenario?

Can you add a class to the layout with the specific name of the layout, and use a double class in the CSS?

e.g. If the layout template is called `bwpanda` you could add something like this at the top of the `.tpl` for the layout:

$classes[] = 'layout--bwpanda';

Then in the CSS you could do:

.layout.layout--bwpanda {
  // your CSS here


To quote Earl Miles; "that is a decently good idea."

Thanks @laryn! It's less hacky than using !important, but still allows me to override select styling from core themes.