How to work effectively with inheriting style sheets

Justin Sayne

My company put me on a new project in which I have to put together the user-interface of a reasonably sized application and our workflow is so cumbersome that I'm certain, there has to be a better way.

My problem is as follows: We have a Qt widget hierarchy of depth around maybe 10. In the main widget root we defined some style properties for lets say all PushButtons to make them appear consistently and not having to copy and paste the same style sheet over to every single button (or write ID selectors for each one). Now, in the child widget, we might have styled them differently because it might have been a dialog window where everything is a lot smaller and the PushButton style of the parent window not applicable anymore. If we keep going further down the hierarchy, there will be widgets inheriting properties from their parents, the parent of the parent till all the way to the root widget. At some point we don't have any clue whatsoever which properties are inerhited/active now. For example I'd like to set a button to a fixed size of 26x26 but then it ends up in some weird 29x38 because some parent widget along the hierarchy had padding or margin set for all of its PushButtons. Finding our which widget or property it is to blame takes an awful lot of time.
How do others go about this? Can you somehow filter which properties you'd like to inherit from parents and which you don't? Is there some way to reset properties to their default values? I really can't imaging every Qt developer going through this process everytime...

Worst of all: Since the widget inheritance hierarchy isn't defined before runtime, I don't even get an accurate representation when working on widgets in QtDesigner.

Chris Kawa

I don't think there's a silver bullet to it. The cascading nature of stylesheets makes them powerful but also easy to get lost in. It's something web designers struggle with every day.
To think of it - it's not that different from inheritance in c++. A class 10 layers deep can easily become a bag of garbage if you don't plan it wisely.
I guess it comes down to careful planning, consistency and minding the scope.
One approach is to "reset" all the properties at some levels e.g. at a QMainWindow, QDialog, QPushButton that is a child of a dialog etc. Set all the margins, paddings, borders etc. to them to cut off the cascaded parent styles. Having such "clean" sections you can work your way down, always scoping to the nearest "cut off point" e.g. QDialog QStackedWidget QPushButton { ... }, where QDialog and QDialog QStackedWidget are such reset points.
It might also be useful to mark the cut-off points in your app using dynamic property styling.

As a footnote, it's also worth mentioning that, although powerful, stylesheets are kinda heavy so keeping them lean and small is something to strive for. It's also easier to use a single, top level stylesheeet (e.g on the qApp object) then to style individual widgets. Finding in which widget was that extra 1px padding defined is not something you want to do. It's a lot easier to do by analyzing one stylesheet file.