为什么动态css不受欢迎?

时间:2010-12-05 16:25:37

标签: dynamic-css

我通常从事更多的后端工作,所以我以前从未真正考虑过这个问题,但昨天我正在为一位朋友工作,在经历了一些挫折之后,我发现没有理由认为html文件是唯一的可以在服务器端动态生成。

我看到有人在谈论解决CSS限制的javascript解决方案,但为什么CSS不能动态“硬编码”?

我知道我不是第一个想出来的人,因为在考虑之后我查了一下,有几个例子但不是吨,我也从来没有在StackOverflow上看过它。

与在页面加载之前使用javascript调整元素大小相比,是否存在缺点?我应该注意的任何其他潜在的问题?

我在Django中这样做,但这个问题几乎与框架/语言无关。

通过查看dynamic-css标签中的问题,我发现Ruby的{less}看起来很酷,但总的来说,没有很多关于服务器端生成的css文件的讨论。

编辑: 我认为有些人可能会对动态css的意图感到困惑。我并不是说它会根据用户内容或任何内容而改变。这是我发现的如何使图像居中的例子:

img {   
   position: absolute;   
   top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}

这一切都很棒,但这意味着要知道你在css中的图像大小。此外,它意味着不同尺寸图像的不同条目。如果高度和宽度是可变的并且图像的大小是在服务器端确定的,则它变得更通用且可重复使用。

我确定还有其他一些例子,说明哪些内容会有所帮助,但是没有过多地使用css,这是我遇到麻烦的第一个与动态css配合得很好的例子。

此外,如果性能成为一个问题,我相信它可以通过一些工作正确缓存。

5 个答案:

答案 0 :(得分:2)

我同意其他人发布的内容。 HTML是由服务器端生成的,因为内容是动态的,没有人会去facebook,google,youtube或几乎任何其他地方,如果他们总是提供相同的HTML。服务器端生成允许您在用户贡献和改进内容时发布和查看内容。

另一方面,CSS很少由用户提供,如果是,他们被称为网页设计师,只是生成静态主题或文件,并由网站所有者支付。有些网站会发生这种情况,例如csszengarden,但文件仍然是静态的。然而,它们的关键区别在于,用户不会觉得他们对网站的唯一贡献是页面上的元素位置和不同的颜色。 CSS的全部要点之一是一致性。哎呀,stackoverflow可以在每次有人发布答案,重新定位所有按钮,并将整个页面更改为ltr而不是仅提供不同的html时更改css。说这会令人讨厌,这将是本世纪最大的轻描淡写。

然而,我不认为这就是你所要求的。动态CSS的一大优势就像你提到的那样:你可以动态地对它进行硬编码。 dot-less-css在其主页上有一些很好的例子。这使您可以用更简单的中间形式编写CSS,颜色存储在变量中,而不是不断重复,嵌套规则和其他功能,使编码更容易。这些功能是许多程序员都愿意支持所有浏览器的功能,所以有些人回答了这个需求,并创建了自己的框架来“混合”它们。很多人说JQuery是javscript应该一直运作的方式。

  

这有不足之处   说用尺寸调整元素   页面加载前的JavaScript?任何   我应该是其他潜在的陷阱   知道吗?

动态调整大小的最大问题是它很难且容易出错。如果你做得不对,你和你的观众可能会感到痛苦。如果很酷的动态因素对你来说是值得的大量额外工作,那就继续吧。你如何选择不会产生巨大的差异。 Javascript更加经得起考验,服务器端动态CSS是另一种做同样事情的好方法。这取决于你对自己有信心以及你有多大胆。

答案 1 :(得分:1)

你正在寻找像萨斯这样的东西吗? http://sass-lang.com/

答案 2 :(得分:1)

CSS往往被缓存,因此在运行中生成它会a)需要关闭css的缓存并且b)产生更多的服务器开销。

我认为在html中动态生成css链接是相当普遍的,根据哪个浏览器调用,但仍然指向一个静态css文件中的一个。

最后,它不是服务器生成的真正原因可能是它通常是由设计师编写的,而不是有人在做后端代码,这只是一个角色问题。

答案 3 :(得分:0)

我认为这是一个非常聪明的解决方案,虽然很多人会不同意,但我希望css的未来会更像这样。但是,标准变化的速度确实很慢,虽然有较少的框架,但它们并不是很普遍。

从某种意义上说,用javascript处理很多东西会更简单。我的意思是,如果您已经使用JS进行动画或其他操作,那么您可以使用它完成所有动态更改。使用像jQuery这样的库,它只会变得更好。

答案 4 :(得分:0)

我们已经完成了一些支持国际化的CSS。 CSS中有许多小细节必须根据您为页面提供的区域设置进行更改:主要是背景图像(我们大量使用导航按钮,因此有文本)和表单标签的宽度(其中在德语中必须要大得多 - 尽管我们应该使用更聪明的CSS来避免明确地调整它们的大小。我们没有维护N个不同的样式表,而是动态地从存储在数据库中的值中填充变量位。