GWT CSS choices: which to use, when and why?

| | August 6, 2015

So far I’ve accounted for four (4) different places where a GWT developer can inject CSS into a web application:

  1. Inside an HTML host page, you can place an HTML link to an external stylesheet, such as having MyWebApp/war/hello_gwt.html containing the following line: <link type="text/css" rel="stylesheet" href="mywebapp/webModule.css">
  2. Through the use of implementing ClientBundles that give your app access to binded CssResource subclasses
  3. Via UI Binder XML
  4. You can include theme/styling in your gwt.xml file like <inherits name="com.google.gwt.user.theme.standard.Standard"/>

I’m confused about what job each one of these four is supposed to accomplish. In other words, how do these “CSS mechanisms” work together to provide a web app with all the styling it needs, or are they just different ways of accomplishing the same thing? Do they each have different pros/cons in different scenarios, and if so, what are they?

I like the strategy of using a Layout or LayoutPanel to position the major display regions of my app, and then using CSS to style the individual regions, containers, etc. So it seems like the first case above (HTML external CSS link) would not be something I’d be looking for, seeing that I would want to customize the CSS for each new widget as my UI evolves.

I guess I’m just looking for a litmus to go by when trying to choose between my CSS options in GWT-land. Thanks in advance!

2 Responses to “GWT CSS choices: which to use, when and why?”

  1. I would strongly recommend not to define styles in Ui:Binder. It makes it very difficult to maintain and ensure style consistency throughout your app. The best practice is to keep all CSS in one place.

    You can “customize style for each new widget”, as you put it, using both an external CSS method and CssResource. With the external file you simply use class names from this file to set styles. You can add new classes or modify existing classes as your UI evolves. You can also easily create themes using external CSS file too.

    There are other differences between external CSS and CssResource methods.

    CSS file is a more traditional approach. It’s easier to use, and much easier for UI designers to work with.

    CssResource, on the other hand, is easier to maintain in a large project with many developers. It also offers many useful features like conditional CSS, obfuscation, runtime substitutions, etc.

  2. Krzysztof Zielinski on November 30, -0001 @ 12:00 AM

    The 1. and 3. (css file and ui binder xml)s are different mechanisms to do the same things.

    If you put style in UI binder it will be visible only in this ui binder so you cannot (easly) reuse it for other classes. However this way makes it easier to keep your style clean cause you see all styles used for the component in one place.

    If you put the style in CSS you can reuse styles for different components, but you need to edit two files when working on widgets.

    Of course you can use both of them: UI binder styles and “separate CSS file”.

    The 4. is just notification which GWT predefined style you use. GWT have default style for all widgets and this inherit tells which will be used in your app.

Leave a Reply