动态内联CSS。这是可取的吗?

时间:2017-11-04 14:22:37

标签: html css

前一段时间我遇到了这个问题:

CSS set background-image by data-image attr

如果我正确理解了这个问题,OP需要能够在某些HTML元素上设置属性,并使随附的CSS将其解释为这些元素的背景图像的URL。

我最近遇到了类似的情况,其中一个元素的背景图像在此之前一直是静态的,它被改为从数据库中获取可变图像。我考虑了几个选项,但是,其中,用<img>元素替换受影响的元素有几个不受欢迎的副作用,构建动态.css文件似乎有点矫枉过正,所以我尝试使用自定义data-属性和CSS& #39; s attr()函数将其绑定到元素background-image,但由于attr()在不同浏览器中的实现受到限制,因此无法正常工作。

在我的情况下,我最终决定从数据库提供的背景图像是内容而不是设计并采用看起来最简单的方法,因为浏览器已经支持内联CSS样式已经有一段时间了:我应用了所有非 - 变量样式作为规则在单独的样式表上,但我将变量background-image保留为需要应用的元素中的内联样式。

由于我所指的问题中没有一个回答建议使用内联CSS样式,我自己这样做了,而my answer已被多次投票,没有任何关于原因的推理。我知道downvotes不合理,我对此很满意,但我担心没有看到一些明显的警告,等到我最不期望的时候会咬我。

我已阅读SO帖子What's so bad about in-line CSS?using inline css - a no-no or okay in certain situations?Inline styles vs styles in CSS,以及有关使用情况的一些外部讨论,例如https://teamtreehouse.com/community/when-is-inline-css-a-good-ideahttps://www.thoughtco.com/avoid-inline-styles-for-css-3466846内联CSS,我从中收集或多或少的以下内容:

  • 内联CSS是维护的噩梦。
  • 这是一个&#34;最佳实践&#34;将内容与设计分开。
  • 在原型设计时,内联CSS似乎几乎没问题。
  • 在构建HTML电子邮件时,内联CSS是一个必要的恶魔。

我认为我理解这些讨论中给出的论点,但他们似乎都没有考虑应用动态内联样式的情况,因此它们无法有效地解决我的问题。根据我自己的经验,

  • 这一特定的维护工作变得微不足道,因为它来自关系数据库,它使我们能够提供用户可自定义背景之类的东西,而无需重新访问源文件。
  • 更好的做法是单独分析每个方案,并应用以最低成本提供最大利益的特定解决方案,无论最佳实践是什么&#34;指南可能会说一般情景。
  • 我个人不使用内联CSS进行原型设计,因为浏览器&#39;开发工具在将它们应用于单独的文件时会跟踪我的更改,但在我在HTML块中定义时却不会跟踪。
  • HTML电子邮件让我颤抖。

尽管如此,我真的很想知道为什么这是个坏主意。在哪些方面我可以期望这个决定(使用内联CSS将元素的background-image样式设置为来自数据库的值)会回来困扰我?

由于

0 个答案:

没有答案