JavaScript vs. CSS for style (.tss) files

Question

JavaScript vs. CSS for style (.tss) files

Closed this issue 12 years ago · 7 comments

Hi -- I think the Alloy project has great promise, and I'm excited to see it.

I'm a little concerned about the choice of JavaScript instead of CSS for style files. (At first I thought it was using JSON, but on closer observation, I realized it is actually JavaScript.)

Of course the syntax of JavaScript (when it contains only data) and CSS is somewhat similar at first glance. But there are some important differences that make JSON a difficult file format to work with here.

I would love to be able to make greater leverage of the enormous number of web development tools that are out there when writing Titanium apps. In this case, if the files were real CSS, then I could pass them through Sass.

All that extra punctuation, especially the messy commas, which are present on some lines but not others. (Yes, semicolons must be added, but at least they are on every line, not just some lines like the commas, making the code easier to modify):

/* JavaScript */
View: {
    prop1: "value",
    prop2: "value"
},
Button: {
    prop1: "value",
    prop2: "value"
}

vs.

/* CSS: removed some colons, quotation marks, and commas */
View {
    prop1: value;
    prop2: value;
}
Button {
    prop1: value;
    prop2: value;
}

(Like I mentioned above, when I first started writing this up, I thought you were using pure JSON, and that concerned me even more, because then comments wouldn't be possible, and all key names would have to be quoted.)

Answer 1 · 2012-07-24T23:53:04.000Z

Also, of course, the use of JavaScript does mean that any key that is not just a simple identifier such as "Button" will have to be quoted:

/* JavaScript: quotation marks required here */
"#myid" : { ... }

/* CSS: no quotes necessary */
#myid { ... }

Answer 2 · 2012-07-24T23:57:47.000Z

Hi Mike,

Thank you for trying Alloy. The issue of using JavaScript or JSON for our style file has been discussed quite a bit, and currently it's a mix of both and why we settled on *.tss for the extension. We do pre-process the styles so we could do things similar to Sass or Less. I'll discuss with the team but I think we all agree we want to keep extra coding like quotes and commas to minimum.

Answer 3 · 2012-07-25T00:06:34.000Z

Thanks for the quick reply.

I am pretty new to Titanium, but one of the things I like about it (at least in theory) is that it offers the potential to leverage the huge community of fun JavaScript-related tools that are out there -- you know, Underscore, Backbone, CoffeeScript, Mustache, some Node modules, and many, many more. (I say "in theory" because I haven't actually tried to do this yet.) So my point is that if you went with CSS, then instead of having to "do things similar to Sass or Less," you could simply leverage, almost "for free", the features and excitement around those tools. And as those tools evolve or others come along, you won't be playing a game of catch-up with your similar tools.

Thanks again - Mike

Answer 4 · 2012-07-25T00:23:19.000Z

Hi Mike,

Fantastic that your using Titanium and your right programming in JavaScript allows the use of some great libraries. Alloy actually has built in Underscore and Backbone support. One thing JavaScript does not have is CSS support that is actually handled and processed by a browser application. So when using CSS in JavaScript for example a node script, you need to convert the CSS into something JavaScript can work with. My understanding of Sass and Less is they are preprocessors to CSS so you would still need to convert the CSS is a JavaScript friendly format.

Answer 5 · 2012-07-25T02:05:05.000Z

You're right that using CSS would require converting the CSS into something JavaScript can work with -- but that is what Alloy is already doing with the XML files that make up the views, compiling them into JS. This would just be similar.

Just FYI: Sass and Less take different approaches. Sass is a preprocessor that (on the developer's machine) converts Sass to CSS. Less is a runtime processor that passes the Less code as-is to the browser, and then, at runtime, parses it and converts it into CSS.

For Alloy, I was picturing doing it as a preprocessor (as you do with the JavaScript). It would probably be pretty easy to take CSS in and output JSON. I'll see if I can make one or find one :)

Answer 6 · 2012-07-25T20:37:38.000Z

It seems there are a number of open-source utilities written in JavaScript to parse CSS, one of which could perhaps be used in Alloy if you wanted to go in that direction. A few of the more popular ones, it seems, are:

Answer 7 · 2012-07-25T20:55:54.000Z

Thank you for the links. I have messed around quite a bit with JSCSSP. I'll take a look at CSSOM, and Sheet.js. We are still kicking around what will do for styles. I'll discuss with the team.