一尘不染

CSS文件大小有限制吗?

css

我正在使用ASP.NET
MVC开发站点。CSS文件已增长到88KB,并且有5,000行多一点。我最近注意到,最后添加的样式在浏览器中不存在。CSS文件或行数有大小限制吗?

编辑 :对不起,我忘记提及此问题在Windows 7中同时在FireFox和IE8中发生。


阅读 518

收藏
2020-05-16

共1个答案

一尘不染

我认为,如果您对CSS文件的大小有疑问,那么该是 重新考虑样式策略的时候了
。CSS中的C代表级联。通常,当CSS文件过大时,是由于样式未在适当的地方重新使用以及对级联行为的不良使用所致。

我不会轻易地说出来。我曾在一些大型,复杂的零售网站上工作,目前在非常复杂的金融交易应用程序上工作。每当我遇到具有数百种样式的网站时,我们都通过降低CSS的复杂性实现了设计的重大改进,复杂性的降低以及可维护性的提高。

一个开始的地方是在 CSS reset 上执行Google sesarch
。有多种不同的实现,但是它们通常遵循以下主题:覆盖每个浏览器的布局差异,并删除任意边框,边距和填充等。如果可以,请从头开始。然后,您可以继续从那里开始构建样式,请注意充分利用
级联CSS链接

链接是您在一个元素上拥有多个类的地方。例如:

<div class="box right small"></div>

box您可能希望将某些通用样式应用于许多块元素,例如div,h1 …
h6,p,ul,li,table,blockquote,pre,form。small自我说明right可能只是向右对齐,但右侧填充为4px。随你。关键是每个元素可以具有多个类,并通过可重用的构建块(各个样式设置的分组)构建样式。否则称为类。

在一个非常简单的级别上,寻找机会来组合样式:

所以:

h1 {font-family: tahoma, color:#333333; font-size:1.4em;}  
h2 {font-family: tahoma, color:#333333; font-size:1.2em;}  
h3 {font-family: tahoma, color:#333333; font-size:1.0em;}

变成

h1, h2, h3 {font-family: tahoma, color: #333}  
h1 {font-size:1.4em;}  
h2 {font-size:1.2em;}  
h3 {font-size:1.0em;}

只是稍微小一点,但是很多时候要做这种事情,您可以有所作为。

另外,验证您的css。这将帮助您发现代码中的错误。

2020-05-16