Custom cell styling

[Olivier Scherler]

Hello everybody,

I am having a tough time wrapping my mind around CSS resources. I have a subclass of AbstractCell that I want to style depending on its selected state. I found that I can subclass (or rather subinterface) CellList.Resources, define a CSS file with @Source("MyCellListResources.css") and use the .cellListSelectedItem selector in that file.

However, when I do this, the cellListSelectedItem becomes obfuscated, so I cannot use it in my main stylesheet linked in the host HTML file, and modifying MyCellListResources.css requires rebuilding the project. That won’t do: styling is done by designers, not programmers; it must not require building the project and modifications should be applied with a simple page refresh.

Any hint on how I can achieve this?

Regards,

Olivier

[Thomas Broyer]

The Web evolves, as does Web development, and most people these days use build tools, even for CSS (SASS, LESS, Closure Stylesheets, etc.)

Also, designers might not be programmers, but if they code CSS, they should be capable of running the app in DevMode: tweak styles using the browser's developer tools, when it's OK, copy the styles in the CSS resource, reload and enjoy. Rinse and repeat until everything's OK.

 

Any hint on how I can achieve this?

You can use @external so mark the CSS class names as not being obfuscated. But now you're responsible for making your class names unique throughout your app, and you lose all the benefits of CssResources (though you can now use SASS or LESS)