为什么动态CSS没有更流行？
我通常从事更多的后端工作，所以我以前从未真正考虑过它，但昨天我正在为一个朋友开发一个网站，经过一番挫折后，我突然想到，没有理由 html 文件是唯一可以使用的文件。服务器端动态生成。
我看到人们谈论 JavaScript 解决方案来解决 CSS 的限制，但为什么 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 配合良好的例子。
此外，如果性能成为一个问题，我相信它可以通过一些工作正确缓存。
I normally work on more back-end stuff so I never really thought about it before, but yesterday I was working on a site for a friend and after some frustration it occurred to me that there's no reason html files are the only ones that can be dynamically generated server-side.
I see people talking about javascript solutions to work around limitations of CSS, but why can't the CSS be dynamically "hard-coded"?
I know I'm not the first to come up with it because after thinking of it I looked it up and there were several examples but not tons, and I'd never seen it mentioned here on StackOverflow either.
Are there downsides to this compared to say resizing elements with javascript before the page loads? Any other potential gotchas I should be aware of?
I'm doing it in Django, but the question pretty much framework/language agnostic.
Looking through questions in the dynamic-css tag here I found {less} for Ruby which looks pretty cool, but overall there isn't a lot of talk about css files generated server-side.
EDIT:
I think some people may be confused about the intent of what I mean by dynamic css. I don't mean that it changes based on user content or anything. This is an example I found of how to center an image:
img {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
That's all great but that means knowing the size of your image in the css. Furthermore it means a different entry for different sized images. If the height and width were variable and the size of the image was determined server-side then it becomes more generic and reusable.
I'm sure there's other examples of where that would be helpful, but not having worked with css too much, that's the first one that I had trouble with that worked nicely with dynamic css.
Furthermore if performance became a concern I'm sure it could be cached properly with a little bit of work.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
我同意其他人发布的内容。 HTML 是在服务器端生成的，因为内容是动态的，如果 Facebook、Google、YouTube 或几乎任何其他地方总是提供相同的 html，那么没有人会去。服务器端生成允许您发布和查看用户贡献和改进的内容。
另一方面，CSS 很少由用户贡献，如果是的话，他们被称为网页设计师，只是生成静态主题或文件，并由网站所有者付费。有些网站确实会发生这种情况，例如 csszengarden，但文件仍然是静态的。然而，它们的主要区别在于，用户不希望他们对网站的唯一贡献是页面上元素的位置和不同的颜色。 CSS 的要点之一就是一致性。哎呀，每次有人发布答案时，stackoverflow 都可以更改 css，重新定位所有按钮，并将整个页面更改为
ltr，而不仅仅是提供不同的 html。说这会很烦人将是本世纪最轻描淡写的说法。但是，我认为这不是您要问的。正如您所提到的，动态 CSS 的一大优点是：您可以动态地对其进行硬编码。 dot-less-css 在其主页上有一些很棒的示例。这使您可以以更简单的中间形式编写 CSS，将颜色存储在变量中，而不是不断重复、嵌套规则和其他功能，以使编码更容易。这些是许多编码人员希望所有浏览器都支持的功能，因此有些人满足了需求并创建了自己的框架来将其“破解”在一起。很多人都说 JQuery 是 javscript 一直以来应该工作的方式。
动态调整大小的最大问题是它很困难并且容易出错。如果你做得不对，这可能会给你和你的观众带来痛苦。如果酷炫的动态因素值得您付出大量的额外工作，那么就继续吧。你如何选择并没有太大的区别。 Javascript 更加可靠，服务器端动态 CSS 是做同样事情的另一种很酷的方法。这取决于你对什么有信心以及你有多大胆。
I agree with what others have posted. HTML is generated server side because the content is dynamic and no one would go to facebook, google, youtube, or almost anywhere else if they always served the same html. Server-side generation lets you post and view content as it is contributed and improved by users.
CSS on the other hand, is rarely contributed by users, and if it is, they are called web-designers and just generate static themes or files and are paid by the site owner. There are some sites where this does happen, like csszengarden, but the files are still static. However, they key difference is that users don't feel like having their only contribution to a site be the position of elements on a page and different colors. One of the whole points of CSS is consistency. Heck, stackoverflow could change the css every time someone posted an answer, relocate all the buttons, and change the whole page to
ltrinstead of just serving different html. Saying this would be annoying would be the biggest understatement of the century.However, I don't think that's what you were asking about. The big advantage of dynamic CSS is as you mentioned: you can dynamically hard-code it. dot-less-css has some great examples on its homepage. This lets you write CSS in a simpler intermediate form, with colors stored in variables instead of constantly repeated, nested rule, and others features to make coding easier. These are features which many coders would LOVE to have supported by all browsers, so some people answered the need and created their own frameworks to 'hack' it together. Kind of the many say JQuery is how javscript should have worked the whole time.
The biggest issue with dynamic resizing is that it's difficult and error prone. If you don't do it right it can be a pain in the arse for you and your viewers. If the cool dynamic factor is worth the substantial extra work for you, then go ahead and do it. How you choose to doesn't make a huge difference. Javascript is more tried and true, server-side dynamic CSS is another cool way of doing the same thing. It depends what you're confident with and how bold you are.
你在寻找像 Sass 这样的东西吗？ http://sass-lang.com/
Are you looking for something like Sass? http://sass-lang.com/
CSS 往往会被缓存，因此动态生成它会 a) 需要关闭 css 缓存，b) 会产生更多的服务器开销。
我认为根据调用的浏览器在 html 中动态生成 css 链接是相当常见的，但仍然指向静态 css 文件的选择之一。
最后，它不是服务器生成的真正原因可能是它通常是由设计师编写的，而不是由编写后端代码的人编写的，这只是角色的问题。
CSS tends to be cached, so generating it on the fly would a) need caching of css turned off and b) generate plenty more server overhead.
I assume it's fairly common to generate the css link in html on the fly, according to which browser was calling, but still pointing to one of a selection of static css files.
Lastly, the real reason it isn't server generated is probably that it's usually written by a designer, not someone doing back-end code, it's just a question of roles.
我认为这是一个非常聪明的解决方案，尽管很多人不同意，但我希望 css 的未来看起来更像这样。然而，标准的改变确实很慢，尽管有像 less 这样的框架，但它们还不够流行。
从某种意义上来说，用javascript处理很多事情更加简单。我的意思是，如果你已经在用 JS 做动画或其他事情，你不妨用它来做所有的动态变化。使用像 jQuery 这样的库，它只会变得更好。
I think it's quite a clever solution and though many will disagree, I hope that the future of css will look more like that. However, standards are really slow to change and though there are frameworks like less, they're not nearly prevalent enough.
In a sense, it is simpler to handle a lot of things with javascript. What I mean by this is that if you're already doing animations or other things with JS, you might as well do all your dynamic changes with it. Use a library like jQuery and it only gets better.
我们做了一些 CSS 来支持国际化。 CSS 中有很多小细节，必须根据您提供页面的区域设置进行更改：主要是背景图像（我们经常将其用于导航按钮，因此上面有文本）和表单标签的宽度（其中在德语中必须要大得多 - 尽管我们确实应该使用更聪明的 CSS 来避免必须明确地调整它们的大小）。我们没有维护 N 个不同的样式表，而是拥有一个，但是动态地填充数据库中存储的值的变量位。
We've done a bit of CSS to support internationalisation. There are lots of small details in CSS that have to change according to the locale you're serving a page in: mostly background images (which we use a lot for navigation buttons, and therefore have text on) and widths of form labels (which have to be a lot bigger in German - although we should really use cleverer CSS to avoid having to size them explicitly). Rather than maintaining N different stylesheets, we have one, but dynamically fill in the variable bits from values stored in a database.