Bootstrap grid classes removed from data-attribute, is it necessary?

Question

css

I recently watched a seminar on using the angular framework with a hosting company. They use the approach not to write grid classes and block behaviors, but to remove the markup in the data-attribute. I would like to do something similar for myself, for example, to remove the bootstrap grid classes in the data-attribute, and it will be easier to integrate the grid into cms. Does anyone have any thoughts on this, or a waste of time? Maybe someone will tell you about the implementation options. I would like to bring all this to the following form . I will be grateful for your answers. <div data-grid="col-md-3"></div>

Answer 1

Bredyatin.
It is not clear how this will simplify the integration into the CMS It is not clear
the profit received, except for satisfying one's "want"
But there is an opinion that the attribute selector is slower than the class selector.
Ah, well, yes. How can you do it anyway? Just rewrite the selectors in the grid:

@mixin make-grid-columns($i: 1, $list: "[data-grid=col-xs-#{$i}], [data-grid=col-sm-#{$i}], [data-grid=col-md-#{$i}], [data-grid=col-lg-#{$i}]") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, [data-grid=col-xs-#{$i}], [data-grid=col-sm-#{$i}], [data-grid=col-md-#{$i}], [data-grid=col-lg-#{$i}]";
  }
  #{$list} {
    position: relative;
    min-height: 1px;
    padding-left:  ceil(($grid-gutter-width / 2));
    padding-right: floor(($grid-gutter-width / 2));
  }
}

Well, the rest of the mixins are similar. Rebuild and use.

Answer 2

Classes for styling, data attributes for arbitrary data. No need to mix one with the other.