Ordering of CSS rules

[chrisdavies]

CSS is order-aware, and overriding CSS rules is a commonly done thing.

For example:

[.foo {:border "5px solid transparent"
          :border-top-color "inherit"}]

I'd expect this to generate the following CSS:

.foo {
  border: 5px solid transparent;
  border-top-color: inherit;
}

Instead, it ignores order (because maps in Clojure are unordered), and in my case is producing this:

.foo {
  border-top-color: inherit;
  border: 5px solid transparent;
}

Which is wrong, as no top-border will be displayed.

So, my question is: is there a way to ensure the CSS property order? Maybe using a vector:

[.foo [:border "5px solid transparent"
          :border-top-color "inherit"]]