Applying CSS to A-frame's components

[weiying-chen]

Is it possible to do this in some way? I noticed that using normal CSS doesn't work.

How to, for example, hide and show the elements with CSS?

[dmarcos]

To hide/show an entity you can use the visible attribute

<a-entity visible="false:></a-entity>

We have mixins as an analog of CSS. This allows you to group a set of components/properties and apply them to multiple entities the same way you group CSS properties in classes.

We could have used a CSS syntax for mixins but custom properties on CSS are discarded by many browsers. Their properties are not calculated and the values not shown in the dev tools. We could have carried our own parser but using CSS can lead to misunderstandigs. Most of the standard CSS properties don't apply to a 3D scene. We would have recreated CSS with complete different semantics. Also the CSS syntax does not accommodate well properties with complex values. background, padding or border have unlabeled complex values but it would be very confusing in the case of components. We would have to come up with an extended CSS syntax that allows for things like this:

.red-cube {
  geometry: { primitive: box; size: 5 }
  material: { color: red }
}

[weiying-chen]

@dmarcos Oh, okay. Thanks for the info (I found out though that the attributes for material are exactly like CSS. So I'm using those.)

[trusktr]

properties on CSS are discarded by many browsers

@dmarcos Is that statement outdated? MDN says that all the modern browsers support custom properties.

We would have recreated CSS with complete different semantics.

That's totally fine. For example, SVG has fill, stroke, stroke-width, etc, which are SVG-specific. A-Frame-specific properties would be fine.

background, padding or border have unlabeled complex values but it would be very confusing in the case of components

Instead of background you might have --material-texture, etc.

Just an idea, but

<a-entity light="color: #AFA; intensity: 1.5" position="-1 1 0"></a-entity>

could be written as

/* apply to all a-entity elements  */
a-entity {
  --light: color: #AFA, intensity: 1.5;
  --position: -1 1 0;
}

With simple parsing of the property values, you'd apply them just like with attribute values. This is, in fact, very similar to SVG where some features that can be specified via attributes can also be specified via CSS. In SVG:

<rect transform="rotate(45 50 50)"></rect>

or

/* apply to all rects in a similar way with CSS */
rect {
  transform: rotate(45deg) transform-origin: 50px 50px;
}

---

TLDR: it's totally doable from what I can tell!

[trusktr]

By the way, I saw @ngokevin's MSS, which is similar and useful!

I also forgot to mention that it's simple to get the property values to JS:

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Values_in_JavaScript

This could be done in a MutationObserver callback that observes a stylesheet for changes.

[dmarcos]

@trusktr Have you tried a MutationObserver on a stylesheet? I could not apply them to CSSStyleRule elements. What would be the advantage of using CSS over the current mixins mechanism? Reusing CSS comes with a lot of baggage and we would like to explain why traditional properties don't work . Why does visibility: hidden; not work? Mixins are close enough to CSS, we can break expectations and we don't have to support all the functionality and intricacies of traditional style sheets. I'm more than happy to see the community experimenting with different approaches. Concerning the core, browsers are not ready to implement the functionality we need (lack of MutationObserver) and in my opinion the cost of implementation, maintenance and user reeducation are not worth the delivered value.

[trusktr]

Have you tried a MutationObserver on a stylesheet? I could not apply them to CSSStyleRule elements.

I believe you'd have to watch for changes in characterData.

What would be the advantage of using CSS over the current mixins mechanism?

Maybe that the property syntax is official, part of CSS, so more flexible. One example: styles for regular elements as well as a-frame elements can be contained inside a single stylesheet. There's existing tooling for CSS (stylus, less, sass, postCSS, JSinCSS, etc).

Why does visibility: hidden; not work? Mixins are close enough to CSS, we can break expectations and we don't have to support all the functionality and intricacies of traditional style sheets.

That's true and a good point. It's not easy to tell Custom Elements how to behave whenever they have display: none if those elements render with WebGL rather than with normal DOM styling. Downsides are less tooling for MSS and something new to learn (a designer may already know CSS, and now needs to learn MSS).

[trusktr]

Regardless, MSS is super nice, I definitely have to say! Inspiring. :)

[theredwillow]

@trusktr Why does visibility: hidden; not work?

It works, but it's reliant on JavaScript in many cases. I would like a CSS-like interface to create custom classes like ".hide-walls" on a house that would normally use CSS like this: .hide-walls > .wall { visibility:hidden; } (reusing a class on parent elements, instead of manipulating all of the children walls' inline code).

[LukeTOBrien]

I know this issue is close but I would like to add my use case to the question:

What would be the advantage of using CSS over the current mixins mechanism?

In my app I am combining A-Frame with regular HTML using HTML Shaders, so I am already styling my HTML content using CSS, so it would be nice to use CSS with A-Frame too.

@trusktr Makes good points about SVG and postCSS, Sass etc and I also see how the CSS properties rotate() could match up to the A-Frame rotation.

So I think CSS is the right way to go and I would encourage you open up debate about this.

Custom Elements is still only v1, so maybe A-Frame could influence how the standard evolves.