Is there any shortcut to make css positioning programmatic instead of declarative?

Question

How complicated will it be to implement from scratch?

Mainly for layout issues.

The reason I want to make it declarative is that I hope to encapsulate it into a javascript class,so that I don't need to cope with css deficits once and again,instead,once for all.

Answer 1

It's not really a big deal at all. You just do things like

document.getElementById('whatever').style.width = 100;

or, in jQuery,

$('#whatever').css('width', 100);

Gotta say, though, it sounds like you want to completely replace stylesheets with programmatic style manipulation, and that's probably a terrible idea.

Answer 2

You should clarify your question. If I understand it is as "Why is it that CSS is a declarative language rather then imperative" then it's because it's conceptually closer to how humans want webpages to be styled (and how browsers feel comfortable reading it).

Answer 3

Honestly, the only correct answer here is don't do it - learn CSS properly. You seem to want to get around some deficiencies in CSS, but you don't say what they are, apart from "layout" which is about as vague as you can get. CSS does layout fine (using floats, not positioning - the latter is rarely used for layout).

Setting CSS styles using Javascript isn't really solving any problem as far as I can see. Maybe you need to explain more clearly (with examples) what your problem is.

Answer 4

Check out JSON CSS. It's a rather interesting method of using the power of Javascript (performing logic, etc) in a nice and orderly fashion to set styles. Arc90.Labs has a nice write-up on the topic with examples.

http://lab.arc90.com/2009/01/json_css.php (also on Google Code)

Demo JSON CSS Stylesheet:

{
    "@variables": {
        "demoBgColor": "#FBFAF4"
    },

    "#demoContainer": {
        "background-color": "@{demoBgColor}",
        "border": "1px dotted #CCC",
        "padding": "0.5em",
        "width": "40em",
        "@browser[msie-6]": {
            "width": "400px"
        },

        "h3.header": {
            "text-decoration": "underline"
        },

        "div:first": {
            "font-weight": "bold"
        }
    }
}