Is inline CSS in Django avoidable?

Question

I've heard recommendations saying that you should not use inline CSS, like:

<div style="min-width: 10em;">...</div>

but that you should use class instead, separating the CSS from the HTML, and (if possible) putting them in a separate CSS file.

So far, so good; it all makes sense -- at least as long as things fit into your model.

Now I run into Django, and I want to say something like:

{% for a, b in bar %}
    <div style="min-width: {% widthratio a b 100 %}em;">...</div>
{% endfor %}

Is there a practical way to avoid inline CSS here? Or do I just have to break The Norm?

Answer 1

Since it's a calculated value, you would use inline CSS. Inline CSS is there for a reason: CSS that isn't reusable across multiple elements/pages/websites.

Since you can't calculate from a CSS file, clearly it makes sense to use inline CSS here.

P.S. I am doing almost the exact same thing in a Django template, except mine is to center an image vertically and horizontally, and I have to use the image's actual proportions to calculate the centering CSS, so I can't use a class either.