Question

I am wondering what the best practices in developing an application where an external CSS developer is involved in designing the look and feel of the site?

Ideally, they would be creating CSS files that we could easily integrate into the site over multiple iterations, and the development team would not have to do any manipulation of these files (obviously there would be HTML or template changes to point to the appropriate classes).

GWT documentation (http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html) lists four approaches:

1. Using a tag in the host HTML page.
2. Using the element in the module XML file.
3. Using a CssResource contained within a ClientBundle.
4. Using an inline element in a UiBinder template.

The documentation suggests that modern applications would tend to use approaches 3 and 4, however these seem intrusive to the development process, as we do not want to have to constantly update CssResource interfaces with changes to the CSS each iteration (in approach 3) or have to chop and split the CSS files to inline them into our ui.xml files (in approach 4).

We are thinking of using approach 2, and hand coding the CSS classes. This would allow us to easily drop in CSS file updates and not have the developers need to touch them. We would lose obfuscation and there would be some work to manage changes to CSS names, though no more than the other approaches. Are there any other considerations I am missing?

Is there a best practice for building GWT applications where external CSS designers are involved?

Answer 1

There can be issues if you have team who is not conversant in both HTML/CSS/JS & GWT/Java. Let’s assume you have rock starts, which you should strive for. Then you want to get the following CSS GWT benefits:

• No string literal class name references
• No CSS namespace conflicts/pollution
• Minimization of CSS classes (compress selectors and properties)
• Compiler optimization of CSS rules (combine similar rules), exclusion of unused rules
• Compiler time checking of CSS validity and missing classes
• No heap of external CSS files
• No issues when running DevMode in remote mode (otherwise browser pulls remote CSS, not new CSS you’re working on)

I find the best way to do so is with the UiBinder & the Java class for that UiBinder, all in one place. See below example. This will in my experience produce the most robust, compressed, fastest, reliable app possible, and adds no additional files.

Everything is in one place:

• CSS defined in UiBinder, where it’s used
• CSS interfaces defined in Java file, where they’re used

Widget

class MyClass extends Widget {
    ... // jave UI binder class

    public interface MyStyle extends CSSBundle {
        String someClassName();
    }

    @UiField
    MyStyle style;

    ...
    something.setClassName(style.someClassName());
    ...
}

UiBinder

<!-- UiBinder File -->
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>

    <ui:style type='com.my.app.MyFoo.MyStyle'>
        .someClassName { background-color:pink; }
    </ui:style>

    <div class='{style.someClassName}'>Sample text.</div>

</ui:UiBinder>

I’ve asked this question before, check it out here.