Ideas for using attributes as styling hooks in Shopify's admin

my_page.erb

<%= ui_banner(emphasized: true, status: 'success') %>

output.html

<!-- with regular BEM -->
<div class="ui-banner ui-banner--emphasized ui-banner--success">
  <div class="ui-banner__ribbon"></div>
  <div class="ui-banner__content"></div>
</div>

<!-- with attributes -->
<div class="ui-banner" emphasized status="success">
  <div class="ui-banner__ribbon"></div>
  <div class="ui-banner__content"></div>
</div>

<!-- with more attributes, plus some SUIT-ey style BEM for the component name -->
<div component="UIBanner" emphasized status="success">
  <div component="UIBanner-Ribbon"></div>
  <div component="UIBanner-Content"></div>
</div>

style.css

/* with regular BEM */

.ui-banner {}
.ui-banner--emphasized {}
.ui-banner--success {}
.ui-banner__ribbon {}

/* with attributes */

.ui-banner {
  &[emphasized] {}
  &[status="success"] {}
}

UIBannerInReact.js

import React, {Component} from 'react';
import {UIBanner} from 'UIComponents';

export default class MyComponent extends Component {
  render() {
    return <UIBanner emphasized status="success" />
  }
}