This gives up some flexibility. If you want to switch from horizontal to vertical you have to change a lot more code. If you want to introduce a new face style that color codes bars based on height this wouldn't work.

Agreed, especially since the inline approach allows more flexibility, like 66%.

I just came here to say the same. You can accomplish the first two chart styles quite easily, though the last might be a bit more involved.

yep... been using that technic for years.

Why do you bring this up? Is this more ideal? I thought writing inline css was an accepted awful thing to do. Or is that just a simplification for new developers? Why do you benefit from doing this?

Inline CSS isn't any more awful than any other meaningless presentational markup.

Why use inline CSS? Because it's simpler and obvious. The proposed hack has no upsides: it isn't any more accessible, isn't any more maintainable, and it isn't any more performant (quite the opposite).

To me it's in the same category as replacing `<font color=red>` with `<span class=red>`, because "font is bad".

The proposed hack has the upside that all of the bar charts on a site are governed by the same CSS.

The CSS is ugly because of the many redundant rules. But if you have x bar charts on y pages, then one ugly CSS file is better than x repeated ugly spots spread out in y HTML files.

Inline style for bar height doesn't preclude use of external styles for common properties like color, borders, etc.

Also it's very unlikely you'd have many charts with markup written by hand. I'd expect charts to be generated from a template from a proper data source, so change in markup of all charts would still be done in one place.

If you look at the example on Github, it looks exactly the same as the GP with inline styles, except it uses data params.

GP is saying that there is next to no benefit to the approach proposed in this project compared to just using [the ugly and terrible] inline CSS.

      <div class="bar-chart">
          <ul class="container">
              <li data-cp-size="99">99%</li>
              <li data-cp-size="50">50%</li>
              <li data-cp-size="30">30%</li>
              <li data-cp-size="90">90%</li>
              <li data-cp-size="10">10%</li>
              <li data-cp-size="70">70%</li>
              <li data-cp-size="30">30%</li>
              <li data-cp-size="90">90%</li>
          </ul>
      </div>

It's not worse to put inline style on a tag, than bruteforcing all the possibilities in a css.

At least with inline style you can have the precision you want and are not forced to round your value.

Sooo, yeah it's an interesting exercise but I'm not convinced about the usefulness of that project.

I think for graphing, its far better then whatever this library is doing.