1

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?
  • Have a look at cssQuery. – Robert Harvey Jul 12 '14 at 15:54
  • @RobertHarvey: thanks, that might be a nice starting point to actually write a CSS generator as the one I described. cssQuery on its own is not what I had in mind though, since it gets the HTML elements in a page that match some selectors (kind of like jQuery also does), but it's not statically handling CSS. – peoro Jul 12 '14 at 16:01
  • I think you might find that, once you understand CSS well enough to write the generator, that you'll actually prefer writing CSS directly. I also wonder how the CSS you generate would actually get incorporated into the web page so that it will be used, and how your process will impact performance. – Robert Harvey Jul 12 '14 at 16:03
  • Ah, just noticed that you can run LESS server-side. – Robert Harvey Jul 12 '14 at 16:05
  • LESS files are compiled to create your CSS. LESS simplifies the creation of CSS because you often want to use the same colors or fonts for many different selectors and they make it easy to change this once, change everywhere (by recompiling). Your LESS compiler is, of course, written in a "real programming language." If you find that your compiler is producing a lot of duplication then you should probably write or find a better compiler. In a complex website the uncompressed style sheet might be many thousands of lines long. – Elin Jul 13 '14 at 9:52
1

Is there any to generate CSS similar to this idea?

There has been some progress with the concept of CSS-IN-JS. You won't need to build your own tool to generate css as there are dozens available.

Do you think such an approach would work?

It will, subjected to some tradeoffs.

  1. The style of working will be different especially if you are working with other developers who are foreign to the idea of CSS in JS, it will require them significant time to first appreciate and secondly pick up something like https://www.styled-components.com. This might affect hire-ability and onboarding as well.

  2. Integration with existing frameworks or libraries might be an issue as well. For example, if your company has some global stylesheet written in SASS, and you want to include a few of these SASS modules into your favorite CSS IN JS framework, you might need to write extra tools to join the two together.

  3. Existing tooling might not work. You will also need to investigate and see whether existing tools that work on stylesheets like autoprefixer (which works on stylesheets) will work on CSS-IN-JS. The worry is that generated styles do not work in a cross browser setting.

  4. Additionally, consider how much impact will the extra compilation step (CSS-IN-JS to raw stylesheets) cost you in terms of build pipeline time.

What disadvantages would this approach have with respect to CSS/SASS/LESS?

See the tradeoffs above.

0

I'd like to handle a stylesheet as if it was a database queryable from a real programming language.

There is a Java implementation of the following:

SAC also has a C implementation

References

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.