Decoupling styles from HTML

[wesleycho]

Hello,

Just to give a background on this request, I am one of the developers on the UI Bootstrap project, and am on the ng-bootstrap team for implementing Bootstrap 4 with Angular 2 usage through writing idiomatic Angular 2 components around Bootstrap.

One problem we have had in UI Bootstrap with Bootstrap 3 is that the DOM structure is very tightly coupled by the CSS in a way that is hard to negotiate with. One example of this is with the accordion groups/tabs. There is no allowance for intermediary empty elements, so this creates a problem if our generated HTML ends up like

<div class="panel-group">
  <uib-accordion-group>
    <div class="panel">
      ...
    </div>
  </uib-accordion-group>
  <uib-accordion-group>
    <div class="panel">
      ...
    </div>
  </uib-accordion-group>
  ...
</div>

This situation results in third party libraries having to hack around this undesired coupling in a way that goes against consumption in libraries such as Angular. I realize in Bootstrap 4 that implementations are a little different, but a good solution here is important to us. Any guidance/thoughts on the Bootstrap's team's position here is much appreciated.

Reference to issue where this causes problem in Angular 1.x: angular/angular.js#13805

[cvrebert]

Bootstrap v4 is moving towards using explicit classes wherever feasible, and avoiding tag name selectors and child selectors, which should help with this generally, although perhaps not in the specific case of accordions.
CC: @mdo

@wesleycho Out of curiosity, what's the technical reason that UI Bootstrap can't generate <uib-accordion-group class="panel"> instead?

[wesleycho]

@cvrebert problem is that we must explicitly set the display: block styling for it in that case, which may not necessarily be desired for a user (say if they want display: flex instead).

[cvrebert]

@wesleycho Could you set uib-accordion-group { display: block; } and then the user could use a class to override the display if need be (and their class would win over your tag-name selectors because of CSS specificity)?

[wesleycho]

@cvrebert for those situations, that would work - for something like the carousel or tabs, in v3 they have some direct child selectors, which creates a tighter coupling. Perhaps this would be enough to override that problem though, would need to investigate this more deeply.

[mdo]

As @cvrebert mentioned, we're trying to decouple structured markup from styles through the use of singular classes in our selectors. That's about all we can offer right now I'm afraid.