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?
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.