Abstraction Away from CSS

Abstraction away from CSS

You can always use a template engine to add variables and
calculated fields to your CSS files.

Low-level javascript framework that abstracts away html/css?

I think that a framework that abstracts away html and css, would by definition, be high level. So you are asking an invalid question.

I consider these all high level frameworks, but they are the only ones I am aware of that abstract away html and css.

qooxdo
gwt (Google Web Toolkit)
pyjamas
cappuccino

Is there a .NET based CSS abstraction library?

Less CSS for .NET was recently released.

http://www.dotlesscss.org/

XSLT Abstractions

For my own project, this is how I divided up my pages. There was a template.xsl file which was imported
by each of my XSLs. Most pages just had template.xsl, but some pages such as cart, etc. needed their own
because of the different kind of data they were parsing.

<page title="Home">
    <navigation>
        <!-- something here -->
    </navigation>
    <main>
        <!-- something here -->
    </main>
</page>

This is a snippet from my template.xsl. I threw in all the common stuff in here, and then gave the opportunity
for my pages to add their own information through call-template.

<xsl:template match="/page" name="page">  
    <html>
    <head>  
        <title><xsl:value-of select="(@title)" /></title>           
        <xsl:call-template name="css" />
        <xsl:call-template name="script" />
    </head>
    <body>
        <xsl:call-template name="container" />
    </body>
    </html>
</xsl:template>

An example of how my css tag would respond. Note that it calls css-extended. css only
had the the common css' that would apply across all pages. Some pages needed more. Those
could override css-extended. Note that is needed because call-template will fail if a
page calls a template but doesn't define it anywhere.

   <xsl:template name="css">
        <link rel="stylesheet" type="text/css" href="{$cssPath}reset.css"  />
        <link rel="stylesheet" type="text/css" href="{$cssPath}style.css"  />
        <link rel="stylesheet" type="text/css" href="{$cssPath}layout.css" />
        <xsl:call-template name="css-extended" />
    </xsl:template>   

    <!-- This is meant to be blank. It gets overriden by implementing stylesheets -->
    <xsl:template name="css-extended" />

My container would work in a similar manner-- common stuff was defined and then each page
could just provide an implementation. A default implementation was in the XSL. (in content)

  <xsl:template name="container">
        <div id="container">
            <xsl:call-template name="header" />
            <xsl:call-template name="content" />
            <xsl:call-template name="footer" />
        </div>
    </xsl:template>  

    <xsl:template name="content">
        <div id="content">
            <div id="content-inner">
                <xsl:call-template name="sideBar" />
                <xsl:call-template name="main" />
            </div>
        </div>
    </xsl:template>   

    <xsl:template name="main">
        <div id="main">
            <xsl:apply-templates select="main" />
            <xsl:call-template name="main-extended" />
       </div>
    </xsl:template>

    <!-- This is meant to be blank. It gets overriden by implementing stylesheets -->
    <xsl:template name="main-extended" />

<xsl:template name="footer">
        <div id="footer">
        <div id="footer-inner">
        <!-- Footer content here -->
        </div>
        </div>
</xsl:template>

It worked quite beautifully for me. If there are any questions I can answer for you, let me know.

Html Markup Abstraction and Consistency in SPAs

Since your question is limited to Backbone.js and Aura, I'm not sure this qualifies as an answer, but I would definitely check 3 things

AngularJS and AngularUI - the concept of directives, resembles the notion of Web Components (a work in progress W3C standard for web controls)
If you like typed coding, and likes to live on the bleeding edge, check Dart Web UI it also uses a pretty much similar concept
If you have to stay in Backbone land, then I would check Backbone UI of course

I believe the first 2 have a better chance of answering your 3 requirements.

Is there an alternative to CSS?

CSS is the only real option.

Browser support for CSS should not be a major concern (in most cases) once you learn the ins & outs of CSS. The key to understand about CSS is that its purpose is to define the style of an HTML document and it should be separate from the content.

You'll need practice in learning how to make things degrade gracefully in browsers that don't support features. The basic idea here is that you should make the lowest common denominator (Internet Explorer usually) work "good enough" that it doesn't take away from the user experience, and provide the niceties for users with better browsers. Also, don't develop for Internet Explorer first. Leave it until last, then fix its bugs. Doing things the other way around (IE first) is much harder.

You also have the option of using JavaScript to set styles, but that is not recommended because you should avoid applying styles within JavaScript since JavaScript is meant for logic, not styles.

There are 3 (depending how you look at it) components to a web page:

HTML - for content
CSS - for styling your content
JavaScript - for applying additional or dynamic logic to your content

What's going to replace HTML & CSS & JS?

Graphic Designers don't work in HTML

DTP designers don't produce paper and ink either. Design something and produce something, these are separable tasks - when you have an idea for a tv spot you still need lots of technology between your creativeness and the result, the same applies for the web.

Javascript has to have abstractions
like JQuery, and CSS has a bunch of
hacks to even start approaching
consistent predictable user
experience.

Oh man, js doesn't has to have, developers simply like to make their job easier, this rule applies to various programming languages, it's like saying python has to have django. Frameworks and libraries are over the language, they are not a must.
CSS 'has a bunch of hacks' because some browser producers don't give a damn about something called "standards", not because the language is badly designed.

Surely there is a better way?!?
Something more closely aligned with
the task at hand.. of providing a
fluid intuitive (consistent) user
experience to let users achieve their
goals.

What user experience is not provided with html,css,js? I really don't get your point, and what you expect from the Web.
Oh, and if you are like 'you know, you need flash for something or whatever', start getting interested in canvas.

Abstraction Away from CSS