我们有一个庞大的ASP.Net网站,它有一个失控的单一css样式表.
我正在考虑使用以下策略(取自http://www.techrepublic.com/article/developing-a-css-strategy/5437796/),这对我而言似乎合乎逻辑......
您可能有一个专门用于站点范围样式的CSS文件和用于可识别的站点页面子集的CSS文件(例如特定部门的页面或具有不同布局样式的页面).对于特定页面特有的样式,请为每个页面使用单独的CSS文件(如果样式太多而无法轻松放入文档标题中).您链接或导入每个页面的相应CSS文件,以便您加载显示该页面所需的所有样式,但很少有不必要的样式只出现在其他页面上.
这是一个很好的方法吗？有哪些替代方案？
我认为最好的选择是将css划分为:
-layout.css
-content.css
然后,如果您需要更具体的其他内容,则可以为广告添加更多内容:ads.css,或者为特定部分添加一个css.
我还会为IE css hacks添加ie.css.
我不会谈论只为一个页面创建一个css:如果你使用太多css就可能遇到的问题是你的页面必须向服务器发出更多请求,这会降低你的页面速度.这就是为什么我建议你实现一个HttpHandler,它只会在你目前需要的css文件中创建一个缓存副本.看这里:http: //blog.madskristensen.dk/post/Combine-multiple-stylesheets-at-runtime.aspx
分解样式表有三种主要方法:基于属性,基于结构和混合.您选择哪种方法应该基于工作流程和个人偏好.
基于属性的分解的最基本,最具代表性的形式是使用两个样式表:structure.css和style.css.structure.css文件将包含仅使用高度,宽度,边距,填充,浮点,位置等属性的规则.这将有效地包含以您希望的方式排列页面元素所必需的"构建块".style.css文件将包含具有背景,字体,颜色,文本修饰等属性的规则.这有效地充当在其他样式表中创建的结构的外观.
额外的分离可能包括使用typography.css文件,您可以在其中放置所有字体属性.或者colors.css文件,您可以在其中放置所有颜色和背景属性.尽量不要过分,因为这种方法很快变得比它的价值更麻烦.
分解样式表的基于结构的方法围绕着根据它们应用的元素分离规则.例如,您可能会看到标题中所有内容的masthead.css文件,页面内容区域中所有内容的body.css文件,侧栏中所有内容的sidebar.css文件以及footer.css文件页面底部的所有内容.
当您在每个页面上有一个包含许多不同部分的网站时,此方法确实很有用.它还有助于最大限度地减少每个样式表中的规则数量.与基于属性的方法不同,该方法在页面上的每个元素的每个样式表中都有规则,使用此方法,在一个样式表中只有一个规则用于任何给定元素.
正如您所料,混合方法结合了两种方法中的最佳方法,这是我的首选.在这里,您可以创建一个structure.css文件,就像在基于属性的方法中一样,只使用创建基本布局所需的那些属性.然后你创建了另外的样式表,比如masthead.css,它会覆盖标题; body.css,内容; 等等
困扰每种方法的一个问题是,通过创建多个样式表,您需要客户端的浏览器获取许多文件.这会对用户体验产生负面影响,因为大多数浏览器只会向同一服务器发出两个并发请求.如果您有七个样式表,这意味着在初始页面加载时可能会增加数百毫秒(一旦样式表被缓存,这种效果就会减弱,但您希望对这些新访问者留下良好的第一印象).正因如此,创建了CSS sprites技术.打破你的样式表可能会消除使用精灵所取得的任何好处.
解决这个问题的方法是在用户发出页面请求时将破碎的样式表压缩回一个样式表.
要充分利用这两个方面,请考虑使用像Sass这样的CSS元语言.这允许CSS作者将一个样式表分成多个样式表,同时仍然只向浏览器呈现一个样式表.这为CSS创作工作流程增加了一个步骤(尽管可能会编写脚本以在Sass文件更新时将Sass编译为CSS),但这可能是值得的,特别是在考虑Sass的许多其他好处时.
你可以做的是有很多易于管理,单独的文件用于开发,然后将它们一起放到一个文件中,并在你的实际网站上缩小它.
这是一个更多的工作设置,但为您提供两全其美 - 易于管理网站+快速页面加载.
编辑:雅虎的YUI压缩器似乎是最好的缩放器.它可以压缩CSS和Javascript.
京公网安备 11010802040832号 | 京ICP备19059560号-6 