GWT + CSS样式重载

Question

I'm looking at making some custom GWT widgets styled in a uniform fashion without requiring the designer to go into each widget's UI file every time they want something to appear differently. I would provide a bunch of base styles for elements in the widget and the designer comes along later and sets, in UIBinder, HTML, CSS, anything really, the style using the same selector.

For example: I have a composite widget which I have setup to use a CSSResource. This CSS resource has a style named .myHeaderStyle which is applied to an element on the composite.

This composite is used in another GWT Widget and needs to appear slightly differently when used in the enclosing widget.

My hope here is that I can specify another style in the UIBinder definition of that UI also named .myHeaderStyle and have this style override the style specified in the composite widget's CSSResource.

However, in my attempts to make this happen even with !important included on the style properties that are to override the initial style, I'm only getting the original .myHeaderStyle set on the composite widget.

I'm trying to specifically avoid adding/changing the style in the composite every time we compile, I want it to inherit from the enclosing page effectively overriding the composite widget's original styling.

Is what I'm trying to do possible in some form with GWT+CSS?

Answer 1

After building complex GWT apps for 6 years, I am a big proponent of using a single CSS file for the entire app, and never using CSS resources or UIBinder definitions. Then you can set ".myWidget" style in your widget, and your designer can do:

.myHeaderStyle {
   font-size: 1.4rem;
}
.myWidget .myHeaderStyle {
   font-size: 1.6rem;
}

In my opinion, this is the easiest way to maintain consistency throughout the app - all styles are in one place, using inheritance, rem, and other best practices. It's much easier for designers that CSS resources scattered throughout the app.

By the way, this is also the easiest approach to implement themes (or skins), or change CSS based on the screen size without touching the code.

EDIT:

This is an example from one of my apps:

<g:HTMLPanel>
    <g:Label ui:field="logo" styleName="logo">My App</g:Label>
    <div class="menu" >
        <div class="tab" >
            <g:Label ui:field="tab1" ><ui:text from="{constants.tab1}" /></g:Label>
            <g:Label ui:field="tab2" ><ui:text from="{constants.tab2}" /></g:Label>
            <g:Label ui:field="tab3" ><ui:text from="{constants.tab3}" /></g:Label>
        </div>
    </div>
</g:HTMLPanel>

Note that I use 'class' for div element, but styleName for a widget. I don't set style on my tab labels, because I use CSS to style all of them at once:

.tab>div {
    float: right;
    margin: 0 0 0 6px;
    padding: 2px 6px;
    width: 120px;
}