GWT and CSS Development Best Practices

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.

Answer 2

It's very hard to have a "best practice" here as the four different approaches work well in different situations. Depending on how you use GWT, will determine the best option to use.

If your team is made up of A) Java-only and B) CSS/HTML only, options 1 or 2 will work. However, if you have a UX role who understands the integration point of GWT and CSS/HTML/XML (read: UiBinder). This person may understand how to best set up a UiBinder inorder to maximize the functionality give to the Java-only role.

UiBinder + ClientBundle add an extra layer of complexity to your project. With this comes many advantages, but if your team is'nt a good fit you may end up causing too much harm.

A "Best Practice" may included organizing a main CSS file (either used via ClientBundle or options 1 or 2) that is organized in a way that gives the overall application consistency while at the same time using specific styling in UiBinders for local stuff

If you want to go all out, I think you should focus on using UiBinder and CssResource/ClientBundle to the max (Externs CssResource/ClientBundel stuff as well as giving programmatic access to UiBinder styles via

Use the external stuff for reuse + added consistency