Panels creates different pane number for any mini-panel inside a panel-node It's kind of hard to explain this but I'll try in a pragmatic example:

You have a mini-panel in a block, somewhere around a panel-node (say node/1, your homepage):


in the first panel-node (your homepage) this mini-panel has a CSS class named (For example): .pane-1
in the second panel-node (your "about-us" page) this mini-panel has the CSS class .pane-6
in the third panel-node (your "customers" page) this mini-panel has the CSS class .pane-11
in the forth panel-node (your "contact-us" page) this mini-panel has the CSS class .pane 14


And so on and so forth, you get the idea.

I would like to know why Panels creates different pane classes for mini-panels that appear inside panel-nodes?... It makes the CSS development very very hard, forcing me to fill the Style.css file with different classes that all has the same properties. It is also problematic in the sense that we shouldn't and can't adding a class to the Style.CSS each time when creating panel-nodes...

What is your most efficient way to handle with this and to achieve working just with a single general class for this same pane?

Please help,

Notes:




This problem doesn't occur in Nodes, it occurs only with Panel-nodes. In regular nodes it uses the same basic panel-pane class (for example .pane-1).
I Could supply direct links for examples in my site.




Here is but a very gentle example for the inefficacy of this method Panels works with that forces filling of Style.css with repitative lines of code.
I recommend using the pane configuration itself under CSS Properties to provide semantic class names for each pane. Create some sensible defaults for .panel-pane and extend it by adding classes. Eg users or themed-list list-striped. If necessary extend the concept using CSS ID's. But I think that's taking it a little far.

If that isn't enough then sometimes I create a custom panel layout with additional wrappers, classes and regions.