A partial archive of discourse.wicg.io as of Saturday February 24, 2024.

Alternatives to CSS outside of browsers, in other UI frameworks? Is there anything better?

trusktr
2019-11-13

Searching for “alternatives to CSS outside of browsers” (f.e. styling systems in GTK, Qt, etc) yields no useful results, as usually they lead to articles on CSS pre-processors or css-in-js.

Are there styling systems that are better than CSS (in your opinion, and even if they do not run in a browser environment)?

I’m curious to know what styling paradigms exist, if any, that some may consider more evolved, more efficient, easier, more robust, or more advanced than CSS.

Or, is CSS the best styling paradigm there is? (In your opinion)

From what I can tell, the GTK and Qt engines have both adopted CSS-based styling mechanisms. For example, Gnome 3 Desktop came out with GTK CSS as the first-class styling mechanism.

If there doesn’t exist anything better (in your opinion), have you ever imagined something better?

rumkin
2019-11-13

In my opinion CSS is good enough in its current view. But such design has limitations. Probably, it could reach Turing completeness in the future (today we already have semi-conditions, variables and functions like calc). And if so, then lisp-like language could solve the same task better with more simpler parser.

jirkakosek
2019-11-14

There are styling languages that are Turing complete – have a look at DSSSL or XSL. Adding such more advanced features to CSS while retaining backward compatibility is and will be mess.

isiahmeadows
2019-11-21

I typically see it done either similar to SVG without CSS (set it directly on the node itself - pro: no need to resolve selectors, con: harder to reuse code) or literally using CSS, XSL, or other similar stylesheet languages (pro: easier to reuse code, con: need to resolve selectors).

  • iOS, Android, Windows universal apps (their C# APIs), and macOS all use XML attributes on the nodes themselves - they don’t use shared stylesheets whatsoever.
  • X and Windows native (their C/C++ APIs) use direct function calls instead, but they otherwise work equivalently.
  • JavaFX uses CSS, with a lot of -fx-* properties. If you’re used to web, this is a bit of a mind bender to use as it’s both too similar and not similar enough to the browser (they vendor-prefix a lot of properties that browsers don’t, like -fx-font and -fx-background-color, which work functionally identically to the corresponding unprefixed properties used in browsers) and it’s difficult to context-switch properly, as I learned the hard way while toying with this trying to build an app using Kotlin.
  • Qt’s QML is similar to Android and iOS in that they just set attributes on the nodes themselves.
  • GTK supports CSS natively and appears to prefer that idiomatically. There are a few -gtk-* properties, but they appear to stick very close to what browsers use.
  • I’m starting to see a pattern emerge among virtual DOM users (both React and elsewhere) where they literally set style={{"background-color": someColor}} and similar. So it’s not entirely exclusive to outside browsers.
  • XSL has basically died in terms of UI styling AFAICT. I’ve seen it literally once and it was on the MIME type registry listing where they presented a raw XML file with an XSL stylesheet to render it to HTML instead of just returning a static HTML file.

You’ll find better luck if you just scan the docs for those frameworks - there’s no real search query that can give you good answers to this in one consolidated place.

trusktr
2019-11-21

Seems like CSS is the best so far, but it seems that people are itching for something better, but can’t exactly nail it down yet. I believe this is why there are so many CSS-in-JS libs. F.e., here’s a long non-exhaustive list of them in this CSSTRicks article The Fragmented, But Evolving State of CSS-in-JS.

Some of the main things people want:

  • easy inheritance (JS objects have inheritance, as alternative to cascade, but also scoped to lexical scope)
  • no globals (lexical scope)
  • clash-free class names inside of scope.
  • attribute like styling that is overridable (HTML style attribute can’t be overriden, only overwritten)
  • functions
  • scoped variables (CSS has vars, but they’re global)
  • more

What no one has:

  • custom properties, that can be scoped to component types
  • Custom rendering for custom properties
    • at the moment it is impossible (or very difficult) to define new rendering abilities for custom properties
  • Ability to react to style changes on an element, based on changing of any upstream styles (very difficult, very easy to get wrong with MutationObserver vs new Houdini APIs).
  • etc
liamquin
2019-11-22

XSL is in two parts; XSLT, originally to transform documents into things you knew how to style, and XSL-FO, that specifies a way to put CSS properties onto XML elements and how to control the document flow through pages.

XSL-FO is not widely used outside print (but your bank statement or your driving licence might have been formatted with it).

XSLT is widely used, including for generating HTML, but you tend only to see the resulting HTML.

trusktr
2019-11-25

I suppose XSL is not desirable compared to CSS.

From what I can tell, the vast amount of CSS-in-JS libs in existence are effectively equivalent to feature requests for improvements to CSS. Maybe CSS would benefit from adopting some concepts from those libs?