1

A while ago I came across this SO question:

CSS set background-image by data-image attr

If I understand the question correctly, the OP needed the ability to set an attribute on certain HTML elements and make the accompanying CSS interpret it as a URL to the background image of such elements.

I had recently faced a similar situation, where the background image of an element that had until then been static was changed into getting a variable image from a database. I considered several options but, among them, replacing the affected element with an <img> element had several undesired side effects and building dynamic .css files seemed an overkill, so I tried using a custom data- attribute and CSS's attr() function to bind it to the element's background-image, but it did not quite work due to the then limited implementation of attr() among different browsers.

In my case, I ended up deciding that a background image served from a database was content rather than design and took the approach that seemed easiest, given that browsers have supported inline CSS styles for quite a while now: I applied all non-variable styles as a rule on a separate stylesheet but I kept the variable background-image as an inline style in the element where it needed to be applied.

Since none of the answers posted to the question I am referring to suggested the usage of inline CSS styles, I did so myself and my answer has since been downvoted several times without a hint of reasoning regarding why. I understand that downvotes needn't be justified and I am happy with that, but I am worried about not seeing some obvious caveats that are waiting to bite me when I least expect it.

I have read SO threads What's so bad about in-line CSS?, using inline css - a no-no or okay in certain situations? and Inline styles vs styles in CSS, as well as some external discussions such as https://teamtreehouse.com/community/when-is-inline-css-a-good-idea and https://www.thoughtco.com/avoid-inline-styles-for-css-3466846 with respect to the usage of inline CSS, and from them I gather more or less the following:

  • Inline CSS is a maintenance nightmare.
  • It is a "best practice" separating content from design.
  • Inline CSS seems to be almost OK when prototyping.
  • Inline CSS is a necessary evil when building HTML emails.

I think I understand the arguments given in those discussions, but none of them seem to consider cases of dynamic inline styles being applied, so they do not effectively address my scenario. Based on my own experience,

  • That particular piece of maintenance has become trivial, since the value comes from a relational database, which has enabled us to provide things like user-customizable backgrounds without ever revisiting the source files.
  • It is an even better practice to analyse each scenario individually and apply the specific solutions that provide the greatest benefit at the lowest cost, regardless of what "best practices" guides may say about general scenarios.
  • I personally do not use inline CSS for prototyping because the browsers' development tools keep track of my changes when they are applied on a separate file but not when I define them inside the HTML block.
  • HTML emails make me shiver.

Nevertheless, I would really like to know why is this such a bad idea. In what ways can I expect this decision (using inline CSS to set the background-image style of an element to a value coming from a database) will come back to haunt me?

Thanks

Carvo Loco
  • 2,068
  • 13
  • 21
  • this other stack exchange site might be a better place for your question: https://codereview.stackexchange.com/search?q=%5Bcss%5Dinline **root** https://codereview.stackexchange.com – G-Cyrillus Nov 04 '17 at 15:09
  • 1
    It's not a bad idea. Indeed, trying to re-invent inline styles via data attributes as that question tries to do is the bad idea. But your answer was unlikely to be well received by the OP since they were plainly trying to avoid inline styles, and the use of inline styles can invoke strong negative opinions in some developers. Sometimes, you just have to let it go. Just accept the downvotes as the opinions of devs that differ from yours and move on. – Alohci Nov 04 '17 at 15:23
  • Thanks @Alohci. I am not as worried about the downvotes as I am about my own possible blindness when it comes to not seeing caveats, but yours is a very sensible suggestion. – Carvo Loco Nov 04 '17 at 15:28
  • Inline css is perfect with something like the property background-image. Since if you need the url or location of an image from your database you cant use that info in your stylesheet. So no it isnt bad practice in certain situations – littleboots Nov 04 '17 at 19:29

0 Answers0