Style attribute? Are we using this specifically for screen-readers?

I do believe that it is because the style tag in HTML does not have the same amount of functions as a css page, and it will look less confusing to have multiple pages linked together than one page containing all the information, also I think it is because of the cascading function in css.

In general, mixing styling with html is a bad idea. It's difficult to maintain. It's not at all DRY and it's difficult to get a big picture of what all the styles together are doing on the page.

But in this case, your creating a bar graph. By definition, each bar will need unique styling. You could do this with ids in a separate CSS file or within a style tag in the header. But both of those options would be adding an extra layer of abstraction to your code for zero benefit.

The defining component of bars on a bar graph is how long they are. This way, putting that very specific styling on the individual elements themselves, gives you the highest level of element specificity and conveys clearly what the overall styling is doing.

Technically, the 'style,' herein, the width, is essentially the content. As the numerical value of the farms changes, the 'style value' changes directly in proportion. So, in addition to avoiding the '...extra layer of abstraction..' as Troy Riggs mentions, this is a case in which the content and style are uniquely intertwined.

As with most best practices, they are not 'hard and fast,' and, as designers, we make the final call on how to implement them.

If we do make an exception to a 'best practice,' it may be 'best practice.' to place a comment (e.g. 'Designer's Note) justifying our decision.