Should you use data attributes for primary element styling?

I am having a discussion with a my technical director on the best way to style some forms on a website. The forms already have the data-ui=“form” attribute in place on each form tag.

I would like to use this:

<form data-ui=“form” class=“c-form”>

and apply styling thus:

.c-form {
background: red;
}

The advantages are:

• We are using BEM notation consistent with other parts of the site
• We can easily change the class name to change the look of the form in the future, e.g. to add a new form style
• Separation of concerns- the class is used for CSS and the data-ui attribute can be used as a Javascript selector

The disadvantages are:

• An extra class attribute in the markup

He would prefer to use:

<form data-ui=“form”>

and apply styling thus:

[data-ui=“form”] {
background: red;
}

The advantages are:

• No extra classname needed

The disadvantages are:

• You can’t easily add new styles of forms (although he says just one for the whole site)
• Not consistent with the BEM styling used on the rest of the site
• Should data attributes be used for primary element styling - conflict of concerns?

What are your thoughts?