Screen/App and TCSS relationship when changing screens

[BaccanoMob]

Any stylesheet added through CSS or CSS_PATH gets implemented throughout the app and various screens and the latest added gets more proirity.

class Screen1(Screen):
    CSS = """
Button {
    background: blue;
}    
    """

    def compose(self):
        yield Button("Yello!")
    
    @on(Button.Pressed)
    def on_btn_press(self):
        self.app.push_screen(Screen2())


class Screen2(Screen):
    CSS = """
Button {
    background: red;
}
    """
    def compose(self):
        yield Button(label="hel")

    @on(Button.Pressed)
    def on_btn_press(self):
        self.app.push_screen(Screen1())

class TestApp(App):
    def on_mount(self):
        self.push_screen(Screen1())

For example, above code gives a blue button at for Screen 1 only at the first run but after it changes to different screens we only get red since CSS for second screen is added last.

It would be a good idea implement screen specific CSS and CSS in App class be used as a global. Similar to how webpages link to stylesheets under the head tag, screens should use the CSS defined in App class by default and then include the CSS of the screen. Whenever a screen is change the CSS of screen gets switched according to the current screen than just adding to CSS globally.

This will be helpful for beginners how just know to implement CSS (so it be easier for them to design per screen than for the whole app) as well as complex app with multiple screens so maintaining/managing CSS will be easier.

[davep]

I seem to remember we have had some conversation about if CSS on a Screen should imply that every rule has a type selector for that screen at the start. I thought there was an issue for this but can't locate it right now.

So, in your example above, the styling for Button can be done like this:

Screen1 Button {
    background: blue;
} 

If we were to make this change then the Screen1 in the above would be implied.