Lately I've been playing with CSS (and other web technologies). I'm a non-web programmer, and probably this is influencing way too much my approach.
I found CSS syntax very limited, thus gave a shot to SASS and LESS (mostly the latter). These two languages are a lot more handy, but I'm still getting into several issues: it looks like these languages don't allow me to do most of the things I'd like to do. I have the feeling that these languages aim to be as unobtrusive as possible, remaining very close to CSS and having a very little understanding on what's happening; the result is a kind of weird mix between a macro processor and a declarative language.
For instance, some of the things that are giving me headaches in LESS are:
- The lazyness of the language makes it quite difficult to understand the execution flow (and to foresee whether something is defined and what its value is)
- CSS properties cannot be accessed, you are forced to rely on LESS variables
- Scoping is somehow unclear (probably because of the laziness and of the way mixins are extended)
- If you don't pay a lot of attention, the result tends to be suboptimal, with a lot of dublication etc
- The syntax is not very nice: I dislike using @ for variables, @{} for variable class names,
I believe that a better solution might be to generate CSS from a real programming language (with a well known syntax and a load of functions available) that keeps track of all the properties of every selector and where my logic is executed sequentially. Here I'll try to sketch an example of what I've got in mind; I'm using JavaScript and an approach inspired by jQuery:
var x = new CSS('HTML5');
// `x` is my Style it started off from the default HTML5 CSS stylesheet.
// `x(selector)` will allow us to access the style of the `selector` CSS selector.
x.import('file.css'); // let's import some more rules
console.log( x('a').fontSize ); // Prints the default font-size property for 'a' elements
x('.myClass > p').display = 'block'; // CSS: .myClass > p { display: block; };
var c1 = x('body > div .class1'); // Just for commodity...
c1.width = x('.class2 > div').width; // Cannot be done in CSS/LESS/SASS :(
// It should fall back properly, of course, or give error if that property is not found
x('.class3').set( c1.deepCopy() ); // Bringing in nested selectors
x('.class4').set( c1.copy() ); // Only copying properties
// Introspection! F**k yeah!
c1.forEachProperty( function(property){ ... } );
c1.forEachChild( function(selector){ ... } );
c1.forEachDescendant( function(selector){ ... } );
x.forEachElement( function(selector){ ... } );
var c1Rule = c1.generate(); // Generating the CSS rule for a specific selector
x.delete('.class1'); // We no longer need/want `.class1` in our stylesheet
x.deepDelete('.class1'); // Removing also its nested selectors
// Let's now generate our final stylesheet.
// The `generate` function might take care of optimizing the stylesheet.
var stylesheet = x.generate();
Tl;dr: I'd like to handle a stylesheet as if it was a database queryable from a real programming language.
Now, I'm wondering:
- Is there any to generate CSS similar to this idea?
- Do you think such an approach would work?
- What disadvantages would this approach have with respect to CSS/SASS/LESS?
