0-component.js

import makeStyle from 'ember-something-js-style-thing';
import Component from '@glimmer/component';

export default class MyComponent extends Component {
  styles = makeStyle({
    title: {
      margin: '1rem',
      color: (component) => {
        return component.isActive ? 'red' : 'black';
      }
    },
    name: {
      padding: '2rem'
    }
  });
}

1-template.hbs

<div>
  <h2 {{styled "title"}}>{{@titleMessage}}</h2>
  
  <p>Hello my name is <span {{styled "name"}}>{{@name}}</span></p>
</div>

2-compiled-output.hbs

{{!-- This is roughly what the component and template above would be equal to --}}
<div>
  <h2 class="some-bound-unique-class-for-title" style="{{if isActive "red" "black"}}">{{@titleMessage}}</h2>
  
  <p>Hello my name is <span class="some-bound-unique-class-for-name">{{@name}}</span></p>
</div>

3-compiled-component.css

.some-bound-unique-class-for-title {
  margin: 1rem;
} 

some-bound-unique-class-for-name {
  padding: 2rem;
}