[lmm]

I know it's not a class in CSS terms, I didn't think that distinction was relevant.

>No one expects a layperson to read or edit HTML, but they do have to receive it in some manner and your method is the most bloated way to do so.

Sending things over the wire in compressed form is trivial (many servers do it already) so this doesn't bother me.

>Why can't your magical application just output proper HTML and CSS, with external files if need be, without you ever having to deal with it?

My goal here is to reduce the number of layers you need to understand to debug your webapp. Fundamentally CSS selectors provide a way to reuse (some small specific parts of) your markup in several places - but any web application framework will already provide a way to reuse markup, with its own logic. So why should developers have to learn two different ways of abstracting their markup?

[talmand]

The distinction is relevant in that you seem to want to ignore them for a less efficient method.

Yes, indeed, many servers send the HTML, CSS, and JS files compressed and is trivial, but bloated code that is compressed still takes more bandwidth than more efficient code compressed. There might be something said about combining all three into one HTTP request but to say that there's little difference between bloated inline styles and a properly created style sheet is an odd one. Even if the difference between the two is 10k per page then it adds up over time. It would be far better to rely on CSS classes in the head section of the document than to have duplicated inline styles throughout the document. It seems you are willing to create inefficient output for the sake of attempting efficient input, which only benefits you personally as the coder during the creation process of the project.

Therefore I don't think you are reducing the number of layers involved, but only masking it. In the end you will still have HTML and CSS but with a slightly different way to code them. If that's the extent of the goal then congratulations on duplicating what we already have. Although these applications are interesting and have intriguing ideas, they don't fundamentally address the inherent problems of HTML and CSS. For things like this all your doing is creating a new way to write inline styles which can be done right now without adding in new inherent problems.

What's the difference between this:

STYLE.on("element", {textAlign: "center", fontSize: 50})

or this:

element style="text-align: center; font-size: 50px;"

or this: .element {text-align: center; font-size: 50px;}

Almost nothing, in terms of inline styles. Except that the first two have to be duplicated throughout the code wherever they are required while the third only requires a reference. Now, if you need to change that text-align to left you have to change every instance of it throughout your code, except for the third where it only needs to be changed once. If this code is duplicated in multiple files then you've added complexity to the task, while with a single style sheet you only change one line. Also keep in mind that with the first example that code has to parsed on every single page load before it can be rendered.

Now, in the cases of small webapps I can see these things being of little concern. But for large projects or a regular website it's asking for headaches. Not because of things like domo, but because the end result has to be what the browser expects. Plus, there's the issue that if you want this web page to be indexed by search engines you're going to have problems. If people have turned javascript off or use a white list to control scripts then this page simply will not work with very little available fallback. If someone other than you needs to maintain or update this code and don't know this system then you will have problems.

So, am I saying that people should stop making these type of things and stop experimenting? Of course not, this type of exercise is interesting if the end goal is to determine how we could possibly replace HTML/CSS with something more useful in terms of modern websites and apps. For instance, being able to do mixins and the like in CSS is incredibly useful, which is why the CSS processors are popular. But to say that we can take something like domo to be used today as a replacement to HTML/CSS is a bit misguided. In the end it is still HTML/CSS, what we have here is the equivalent of a WYSIWYG editor for javascript coders who, for whatever reason, don't/can't/won't learn HTML and CSS even though those are the easiest parts of the equation.

Keep in mind this thread started for me because of your statement that CSS is not powerful enough to express styling when that's exactly what it does and all that it does. In the end I fail to see how what you propose is better than what we have today, in fact I feel it is worse.

By the way, CSS selectors do not provide a way to reuse your markup in several places. That is, if you are referring to HTML when you say markup, which is the usual definition of the word. CSS selectors let you target elements in your markup to style them, nothing else. You can use these selectors to reuse your CSS stylings for duplicate elements that require the same styling. It is statements like that suggest to me you don't fully understand the relationship between HTML and CSS.

[lmm]

>What's the difference between this: >STYLE.on("element", {textAlign: "center", fontSize: 50}) >or this: >element style="text-align: center; font-size: 50px;" >or this: .element {text-align: center; font-size: 50px;}

The difference is that CSS has its own syntax, its own semantics, and its own set of gotchas to learn, different from any other language. (Obviously for a simple selector like .element it's easy to know what it's going to refer to, but CSS is not limited to things that are so clear).

>Now, if you need to change that text-align to left you have to change every instance of it throughout your code, except for the third where it only needs to be changed once.

Only if you're a muppet. Your HTML is being generated by a program; that program should have a single place where it knows what the text-align of this class (in the general sense of the term) of elements should be, and you can change it in that one place if you want to change it.

>Plus, there's the issue that if you want this web page to be indexed by search engines you're going to have problems. If people have turned javascript off or use a white list to control scripts then this page simply will not work with very little available fallback.

Right; it only makes sense to use javascript if you're already using javascript for major functionality. That's what I'm really advocating for here: write your styling logic in the same language as the rest of your site's logic.

>Keep in mind this thread started for me because of your statement that CSS is not powerful enough to express styling when that's exactly what it does and all that it does.

My point was that it isn't powerful enough to express your styling in a fully abstracted way. E.g. if your website's general colour scheme is blue and you have parts that are a light blue, a mid blue and a dark blue, CSS doesn't let you define these colours in terms of each other - so if you want to change it to be green, you have to change three different colour definitions. Because of this kind of thing, people use pre-processors like LESS - which means using yet another language with its own syntax and logic to learn, when you're already using a perfectly good programming language to generate most of your site.

>CSS selectors let you target elements in your markup to style them, nothing else. You can use these selectors to reuse your CSS stylings for duplicate elements that require the same styling.

Yes, that was why I took pains to say "some small specific parts of your markup". Your styles are part of your markup, at least traditionally.

[talmand]

But if you use CSS within javascript you are still using CSS syntax. The only thing you seem to be saying is that you've removed the need for selectors. Which you can do right now with inline styles, which I've been saying is not the best thing to do. If the CSS selectors for a page are difficult for you to understand then the problem lay in the HTML, not the CSS.

I guess I'm a muppet that doesn't understand how you avoid having to update lines of code all over the place when your code is sprinkled with inline styles. Unless you are advocating using some kind of class system for styling within javascript, which is odd since CSS already offers that. If you are speaking of applying CSS classes through javascript, which sounds like what you are describing, then I'm confused over what the point is. You can create CSS classes and apply them to elements on the fly right now, you just seem to saying you want to create the CSS classes in javascript. Which makes no sense when you can do the exact same thing more efficiently in an external style sheet. The reason it is more efficient is because those classes will not need to be created on every single page load.

So your answer to the problems I point out is to ignore the problems I point out. Sure, use javascript for everything and wonder why no one can find your site on their favorite search engine or why some people cannot see your site at all. I understand what you're saying about writing your styling in javascript, which is really CSS, but you are skipping over the problems I point out that are inherent in that solution.

I've already agreed that CSS has serious limitations and that pre-processors (even domo) attempt to address them, some do so quite well. The syntax that SASS and Less use is actually existing CSS syntax with extensions, there's very little new syntax to learn. I would say your solution has more of a learning curve involved because you are adding completely new syntax and logic to javascript when it wasn't designed to do these things. The solution is to update what the browsers expect from CSS. There is no reason why CSS itself cannot be extended to do what you are speaking of, probably most people (including me) would want that functionality right now. But again, the very thing you speak of is CSS, syntax and all, it changes nothing other than how you code it. Much like my three examples you pretty much ignored, you still have to learn the CSS syntax and capabilities regardless of how you feed it to browser. Unless you advocate coming up with a whole new styling language that eventually outputs to CSS, which is required because that's what the browsers expect. In the end, it doesn't matter how you use CSS but you are advocating an inefficient way of doing it.

As I said before, creating a more inefficient output for the sake of maybe, just maybe, slighly more efficient input is not the solution. What you want is to reverse the progress that's been made over the last ten years or so because you can't be bothered to learn some of the easiest syntax in the industry. Well, actually with your solution you still have to learn the same syntax. It's not even as if HTML and CSS were programming languages. There's next to no functionality involved with these two. I would say what you want would make these things more complicated for the coder and less useful to the end-user.

Again, CSS has nothing at all to do with markup. Saying "small specific part of your markup" doesn't qualify your statement, since it doesn't actually do that. Styles are not part of your markup, period. Well, maybe inline styles but, again, that's bad. Sure, you can add classes and ids to your markup for CSS to use as selectors but even then they are not required. Plus the fact that ids are already needed within HTML for various things and using classes with javascript libraries such as jQuery (javascript is almost ready out of the box to do this itself) has become almost standard. Basically, you are already using for other purposes the very things that CSS needs to make coding easier, yet you say selectors are difficult and confusing to use. If they are difficult and confusing to use then you shouldn't be using them in javascript, which I bet you do. The closest to providing markup in CSS is with using :after or :before pseudo-classes with the content property, which has its uses but severely limited. But you've given up on pseudo-classes so that is irrelevant to you.

I haven't even brought up the serious accessibility problems this solution has which can get you sued in the real world, or the US at least.

By the way, stimulating conversation we have here.

[lmm]

>Unless you are advocating using some kind of class system for styling within javascript, which is odd since CSS already offers that. If you are speaking of applying CSS classes through javascript, which sounds like what you are describing, then I'm confused over what the point is. You can create CSS classes and apply them to elements on the fly right now, you just seem to saying you want to create the CSS classes in javascript. Which makes no sense when you can do the exact same thing more efficiently in an external style sheet. The reason it is more efficient is because those classes will not need to be created on every single page load.

I'm advocating using whatever programming language you use to apply behaviour to your site, whether that be javascript or something else, to apply a style where it's needed, rather than via CSS selectors. Any language you're using to generate web pages will already have this functionality, because it's needed to e.g. attach event handlers (or equivalent) to text boxes. If your application uses jquery, use that (but it's probably not the best example, because jquery uses pretty much the same selector syntax). If your application uses some awful adobe templating engine and does everything via XPath, use that. If your application uses a java class hierarchy, use that. Etc.

>I would say your solution has more of a learning curve involved because you are adding completely new syntax and logic to javascript when it wasn't designed to do these things.

I think javascript is already very much optimized for functions of the form: find some subset of the elements on the page, and then do something to them.

>The solution is to update what the browsers expect from CSS. There is no reason why CSS itself cannot be extended to do what you are speaking of, probably most people (including me) would want that functionality right now.

Unfortunately the W3C is unwilling to even add variables to CSS. Even if they did, it would be years before we could rely on new functionality being present in end-user browers - and then what if we realised we wanted some additional functionality? Better for the logic to be written in server-side code, and we can use new languages as they're invented. (With javascript we don't get to use new language features but we can at least use new libraries, which is more than can be said for CSS)

>Much like my three examples you pretty much ignored, you still have to learn the CSS syntax and capabilities regardless of how you feed it to browser. Unless you advocate coming up with a whole new styling language that eventually outputs to CSS

Up to a point. Things like the box model there's no getting away from, but I see no need to use the CSS syntax or CSS selectors. Just like the way we currently handle the DOM, there can be a single styling API but you can use it in javascript with javascript syntax, or in python with python syntax, or in whichever language you like.

>Styles are not part of your markup, period. Well, maybe inline styles but, again, that's bad.

Without/before CSS, all styling was inline, i.e. part of your markup. The whole reason CSS was invented was, as I originally said, to provide a way to reuse (some small specific parts of) your markup in several places.

[talmand]

I apologize, I fail to see how what you want to do is any different than what you can do today. Almost everything you just said is what I've been saying the whole time. You can create a CSS class in either a external style sheet or in a style section in the head of the document and use javascript to apply that class to any element on the page. Since you are already using CSS selector syntax in javascript to target these elements I really don't see how having something in between that makes it any easier. If I understand what you are saying, you wish to remove the selector part out of CSS and apply it directly to elements as they are used. But, again, that's already there, right now, today, for you to use with no third-party tool with its own syntax/language to get in the way.

All I can see at this point is that you wish to stop using CSS selectors but still use CSS syntax in describing properties of the elements to be styled. As stated in the beginning, you wish to remove CSS for styling and replace it with something else for, styling. That makes no sense. You are already using these very same selectors to target these elements with javascript. Plus the same syntax can be used in any programming language that outputs HTML, just assign class names to the element as they are created.

Since you propose to no longer use CSS syntax nor selectors in styling elements then I require an example of how you propose to handle this with current browsers. I really just don't understand the concept of creating CSS to style elements without using CSS, that's the circular argument you are using.

You say you want a single styling API, that already exists and it's named CSS.

[lmm]

>Since you are already using CSS selector syntax in javascript to target these elements I really don't see how having something in between that makes it any easier.

Stop fixating on javascript. Sure, javascript uses the CSS selector syntax. But other languages use other ways of addressing particular page elements, and I don't think the CSS selector syntax is a good way in general.

>Plus the same syntax can be used in any programming language that outputs HTML, just assign class names to the element as they are created.

The same syntax as CSS, which is different from that programming language's natural syntax. Outputting class names adds an extra level of indirection that's just unnecessary. Why not just add the relevant style inline?

>You say you want a single styling API, that already exists and it's named CSS.

A single API, not a single syntax. What I want is two things: 1. A natural way to build up a style declaration programatically in python or java (javascript already has this to a certain extent), not a string in CSS property syntax. 2. A natural way to apply this to some subset of the elements on my page, which I identify using whatever tools my programming language has (which in javascript might be CSS selectors, but in general won't be).

Now you're right that the second half is almost-possible. I can use my language to put class attributes on those elements I want to style, and then have a CSS file (or rather, a CSS-preprocessor file) that only ever uses these classes as selectors. As long as I keep the class names unique that works and it keeps the CSS comprehensible.

But I've still got two separate programs in different languages that don't need to be separate - my main program generates a mapping from page element to classname, and my CSS-preprocessor program generates a mapping from classname to set of properties[1]. The latter is a task that my primary programming language is perfectly adequate for (and vanilla CSS is not, because it's not powerful enough, hence the need for a preprocessor). So what I want is to have a bit of code that generates an object representing a set of properties (which would "really" be a string in CSS property syntax, sure, I don't care as long as it has a reasonable API for manipulating it in my programming language), and then rather than attaching a classname to the elements I want to style, I attach this style object, which applies it directly inline.

At that point the inline style would still be sent to the browser with CSS property syntax, but there'd be no separate CSS file and no cascading, so I think it's fair to say this would not be using CSS.

[1] A program which happens to be interpreted by the browser (after preprocessing), but conceptually a program nonetheless.