Improve markup and CSS generated for the layout

The current markup / CSS tries to support the use case of various breakpoints using proper classes and media queries in the CSS. The structure of the CSS is follows:

media query {
  - general css
  - class for 1 column { styles }
  - class for 2 column { styles }
  - class for 3 column { styles }
  - ...
}
media query {
  - general css
  - class for 1 column { styles }
  - class for 2 column { styles }
  - class for 3 column { styles }
  - ...
}

Each "progression" (the media query wrapped sections which have lower and higher bounds defined for their width as appropriate) can have any grid assigned, so the number of selectors are dependent on number of columns and the classes use the name for the defining breakpoint, so we get selectors like: .panel-responsive .rld-span-tablet_6 where tablet is the breakpoint name and the selector refers to 6 columns.

Then the markup has the regions all wrapped in a wrapper class="panel-responsive" and the individual panes (regions) classed excessively for each breakpoint, so a demonstration of the markup would be:

<div class="panel-responsive clearfix">
  <div class="layout-responsive-region layout-responsive-region-header_a rld-col rld-span-smartphone_first rld-span-smartphone_3 rld-span-tablet_first rld-span-tablet_2 rld-span-standard_first rld-span-standard_6">...</div>
  <div class="layout-responsive-region layout-responsive-region-header_c rld-col rld-span-smartphone_first rld-span-smartphone_3 rld-span-tablet_2 rld-span-standard_3">...</div>
</div>

This is pretty excessive. We class the divs as being regions, then their specific region name, then the classes for the grid come with classing for it being a grid element and then classes for its width specific to all breakpoints and even classes for if the element is first in a breakpoint.

- rld-span-smartphone_first: means the element is first in the smartphone breakpoint (left margin should not be applied)
- rld-span-smartphone_3: refers to the class in the grid CSS making this a 3 column wide region on the smartphone breakpoint
- rld-span-tablet_2: refers to the class in the grid CSS for the tablet breakpoint
- etc...

We cannot use row wrapping and row classing at all to exploit CSS :first selectors to pick the first elements, because first elements can be different per breakpoint based on the grids / placement. The header_c region I posted above is first on smartphone but not first on tablet or standard size.

A possible improvement for this would be to turn this upside down and instead of generating a whole lot of CSS selectors into the markup, we would generate the CSS based on specific selectors for elements based on breakpoints. That would mean we'd loose the reusability of the CSS across different layouts, so we'd have a CSS generated specific to each layout, but we'd have a whole lot less classes. That would not be easily achievable for the backend editor of the layout or if we ever want to make frontend editing of the layout possible (as in resize regions on the fly), because then we'd need to manipulate the CSS instead of just classing on elements.

Any opinions? Is it not too horrifying? Or are you running out of the window already?

Let's make this much better together! If we want to include this in core, it should have gorgeous markup and CSS or at least much more acceptable :)