Mapping enumeration values to CSS classes

Developers can eliminate conditional formatting statements in CSS code by directly mapping enumerated values to CSS classes, reducing the overall footprint and execution time in the process as well as eliminating the requirement for mapping via an associative array.

There are many cases where enumerated values are used to describe values, especially in the world of infrastructure 2.0. Availability status, for example, is a commonly used enumeration to indicate whether a load balancing related object – a virtual server, a pool, a node (server) – is available, unavailable, or in some unknown state. When building web-based dashboards or management interfaces for such solutions, the server-side code often ends up with a lot of conditional formatting statements as developers map enumerated status codes to HTML to make it look, well, a lot more attractive. I’m using iControl and infrastructure as an example – any application that requires formatting based on enumerated values may find this technique useful in reducing the amount of code (and time) spent on conditional formatting.

By directly mapping enumerated values to CSS classes, you can eliminate the conditional formatting statements in the code which reduces the overall footprint and execution time but also has the added benefit of making it easier to hand off the styling and CSS chores to a web designer without having to worry about CSS class names and documentation around formatting.

Lori MacVittie discusses the logic and process behind this technique in her latest blog in the Virutalization Journal, complete with code examples that developers will find very useful.