Styling with classes in Pyside + Python

Question

How can I better style this app using classes rather than redefining the same styles for every label that should look the same. It makes it a pain to change a style because I then have to go through every label that is suppose to look the same and paste the code to match.

#!/usr/bin/python
# -*- coding: utf-8 -*-

import sys
from PySide import QtGui, QtCore

class Example(QtGui.QWidget):

    def __init__(self):
        super(Example, self).__init__()

        self.initUI()

    def initUI(self):

        #Add all GUI Elements to Class
        self.amountLabel = QtGui.QLabel('Amount')
        self.counterLabel = QtGui.QLabel('Counter')
        self.totalLabel = QtGui.QLabel('Total')
        self.amountSpin = QtGui.QSpinBox()
        self.counterSpin = QtGui.QSpinBox()

        self.totalOutput = QtGui.QLabel('0')

        grid = QtGui.QGridLayout()
        grid.setSpacing(0)

        grid.addWidget(self.amountLabel, 3, 0)
        grid.addWidget(self.counterLabel, 3, 1)
        grid.addWidget(self.totalLabel, 3, 2)

        grid.addWidget(self.amountSpin, 4, 0)
        grid.addWidget(self.counterSpin, 4, 1)
        grid.addWidget(self.totalOutput, 4, 2)

        self.setLayout(grid)

        # STYLING
        self.amountLabel.setStyleSheet("QLabel { color: rgb(50, 50, 50); font-size: 11px; background-color: rgba(188, 188, 188, 50); border: 1px solid rgba(188, 188, 188, 250); }")
        self.amountSpin.setStyleSheet("QSpinBox { color: rgb(50, 50, 50); font-size: 11px; background-color: rgba(255, 188, 20, 50); }")

        self.counterLabel.setStyleSheet("QLabel { color: rgb(50, 50, 50); font-size: 11px; background-color: rgba(188, 188, 188, 50); border: 1px solid rgba(188, 188, 188, 250); }")
        self.counterSpin.setStyleSheet("QSpinBox { color: rgb(50, 50, 50); font-size: 11px; background-color: rgba(255, 188, 20, 50); }")

        self.totalLabel.setStyleSheet("QLabel { color: rgb(50, 50, 50); font-weight:bold; font-size: 11px; background-color: rgba(26, 188, 182, 150); border: 1px solid rgba(26, 188, 182, 255); }")
        self.totalOutput.setStyleSheet("QLabel { color: rgb(50, 50, 50); font-weight:bold; font-size: 11px; background-color: rgba(26, 188, 182, 50); border: 1px solid rgba(26, 188, 182, 255); }")

        self.setGeometry(800, 400, 250, 80)
        self.setWindowTitle('Simple Calculator')
        self.show()

def main():

    app = QtGui.QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())


if __name__ == '__main__':
    main()

Answer 1

If I am not mistaken, stylesheets of a parent are applied to all children unless overwritten.

You can try this:

    # STYLING
    self.setStyleSheet("QLabel { color: rgb(50, 50, 50); font-size: 11px; background-color: rgba(188, 188, 188, 50); border: 1px solid rgba(188, 188, 188, 250); } QSpinBox { color: rgb(50, 50, 50); font-size: 11px; background-color: rgba(255, 188, 20, 50); }")

    #setting CS of self (the widget) and not the children

    self.setGeometry(800, 400, 250, 80)
    self.setWindowTitle('Simple Calculator')
    self.show()

Concerning your different buttons:

label1.setProperty('labelClass', 'red')
label2.setProperty('labelClass', 'blue')

and in the CS of the widget:

QLabel[labelClass="red"] {...}
QLabel[labelClass="blue"] {...}