模块化 CSS 技术
我想开始使用模块化 CSS，但我无法找出实现它的最佳方法。我想我可以使用一种桥接技术，我的 HTML 中有一个桥接技术，然后为每个模块添加 @import 语句。虽然我喜欢该方法的简单性，但我担心它对性能的负面影响，因为 @import-ed 样式表将稍后下载，并且不一定并行下载。所以我想知道是否还有其他流行的技术来实现模块化 CSS。我真的不想做多个标签，因为 PageSpeed 和 Yslow 抱怨太多的样式表（尽管我知道它实际上比 @import 更有效）。理想情况下，我想将样式表合并到服务器上，这样浏览器每次只请求一个样式表。
I want to start using modular CSS, but I'm having trouble figuring out the best way to implement it. I was thinking I could just use a bridging technique, where I have one in my HTML and then @import statements for each module. While I like the simplicity of that method, I'm concerned about the negative effects it has on performance, since the @import-ed stylesheets will download later and not necessarily in parallel. So I want to know if there are any other popular techniques for implementing modular CSS. I don't really want to do multiple tags because PageSpeed and Yslow complain about so many stylesheets (although I know it is actually more efficient than @import). Ideally I would like to combine the stylesheets into one on the server, so the browser only every requests one stylesheet.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这里绝对推荐使用服务器端包含将“模块”组装到服务器端的一个样式表中。服务器上有某种缓存也是如此，这样就不必对每个请求进行组装。有很多技术可用于此目的，但您的消息不包含有关您的软件堆栈的任何信息。
Using server side includes to assemble your "modules" into one style sheet on the server side is definitely recommended here. So is having some sort of cache on the server so it doesn't have to do the assembly on every request. There are lots of technologies available for this but your message doesn't include anything about your software stack.
请务必非常小心地执行此操作。缓存是您的朋友，如果您选择提供专门交付的、服务器端生成的 CSS 页面，您将失去缓存的好处。这是经典的先有鸡还是先有蛋的问题。您是否预加载并缓存所有 CSS 并预先进行点击，或者自定义加载每个页面并在每次页面更改时产生点击？只有你知道什么是最好的。
不要在这方面做得太过分。我曾在大型商店工作过，其中一个微小的缩小更改导致每天 5 演出的改进（有数百万个唯一身份）......但我工作过的大多数网站都看不到太多（如果有的话）。如果你有时间，就发疯吧。否则，请根据需要调整您的响应。这些优化器报告理想条件，但我们都知道现实生活中情况并非如此。有时尝试在一些主要网站上运行优化器（也不要错过尝试验证它们）为网络极客带来乐趣。
Just be extremely careful how you do this. Caching is your friend, and if you opt to deliver purpose-delivered, server-side generated CSS pages, you'll lose the benefit of caching. It's the classic chicken and egg problem. Do you preload and cache all your CSS and take the hit up front, or custom load each page and incur a hit on every page change? Only you know what's best.
Don't go too overboard on this. I've worked in huge shops where a minor minification change resulted in a 5 gig/day improvement (with millions of uniques)...but most sites I've worked on wouldn't see much if any gain at all. If you've got time on your hands, go nuts. Otherwise, proportion your response based on the need. Those optimizers report on ideal conditions, and we all know that isn't the case in real life. Try runnig the optimizer on some major sites sometime (don't miss trying to validate them either) Makes for good web-geek fun.
查看 Compass CSS 框架。它通过 mixins 支持模块化 CSS，并通过添加变量、算术以及包含诸如 之类的样式框架，使 CSS 总体上更易于使用蓝图。
Check out the Compass CSS Framework. It supports modular CSS through mixins and makes CSS a lot more pleasant to work with in general by adding variables, arithmetic, and including style frameworks such as Blueprint.