如何优化CSS交付-7个简单步骤

CSS优化矢量图像设计专家和行业领先的博客作者建议构建不超过30 KB的网页的日子已经一去不复返了……


当时,这个“帽子”可以处理HTML,JavaScript,图像,CSS和Flash。老实说,完全超过30 kb并不需要太多.

随着JavaScript和CSS的流行,仅CSS超过30KB的上限就变得很普遍。对于大型网站尤其如此.

但是,在构建和设计网站页面时,您不应过分关注“千字节数”。保留您的页面很重要 优化 编写CSS时要紧.

优化不仅仅在于最小化文件的大小。这是为了使您的页面整洁,膨胀,并使其更有条理,更有效率。当您了解有关CSS优化最佳做法的更多信息时,您会发现您会自动创建较小的文件大小.

现在,您可以执行以下5项简单的操作来优化CSS.

如何全面优化CSS交付

1.使用简写

速记写作已成为一种非常普遍的做法。到目前为止,这是减少代码以及减少编码时间的最简单方法。如果您还没有这样做,那么没有比现在更合适的时间了.

CSS字体属性

您可以使用许多速记元素,但最常见的元素包括:

  • 余量
  • 填充
  • 字形
  • 大纲
  • 边界
  • 背景
  • 列表样式

速记配置值您还可以使用速记组合值。通过指定不同的值,浏览器实际上将使用指定的方式来解释规则.

使用任何速记 使您的整体代码更加简洁. 您正在保存字符和行.

如果在所有可能的地方都使用速记,则可以大大减小文件的总大小.

2.摆脱困境

即CSS规则为了提供特定于IE的CSS规则,使用条件CSS hack可以使您受益于提供更小更干净的默认CSS文件.

它有助于更​​符合标准的浏览器。但是,额外的页面权重只会由需要它的浏览器下载.

如果必须使用hack,则必须使用特定于您所关注的Internet Explorer版本的代码。.

如果您不想编写自己的代码,则有许多预先编写的代码可以用作黑客。只需花一些时间真正看一下预先编写的代码,并确保它是准确的 否则可能导致更多问题.

现在,如果您可以使用CSS来获得所需的结果,则无需做任何改动。当然,这取决于其他所有条件是否相等。当您在网站上使用更少的黑客时,您的总体代码将变得更加轻松和轻松.

3.聪明地使用空白

对于您的CSS代码, 空格势在必行 为了可读性.

空格包含元素,例如制表符,空格和多余的换行符。您能够消除的每一个空格都类似于消除字符.

删除空行但是,由于文件较小,通常不建议在空白处略过。您仍然需要保持网页的最佳可读性.

空格对于格式化很重要,因此您需要找到一个平衡点。如果您在大块文字中写入文字以消除空白, 读者在互联网上的短暂关注将使他们点击.

提供较小的文件大小和可读性的一种方法是放弃选项卡,而在段落之间仅插入一行。从可读性的角度来看,这提供了足够的空白,但是它也消除了一些不必要的空白.

现在,对于CSS文件的正式版本,您可以删除空格。它将仍然存在于您的工作文件中.

这是另一种折衷的方法,使您既可以使用较小的文件,又可以使用可读的格式.

4.修剪重置和框架

使用CSS框架时,必须查看文档.

查看CSS文件中的每一行同样重要。有时您会发现框架中的某些规则对于当前项目是不希望的。这些可以删除.

删除了未使用的CSS规则

您可能会发现您可以以更简洁,更优雅的方式获得演示细节。

这可能不是您通常使用的方式,但是如果可行,则可以使用更简洁的框架。当您了解它们时,这还可以帮助您避免意外复制规则集.

相同的信息也适用于重置。使用重置时,它们有助于抵消浏览器的默认样式。现在,如果您熟悉要创建的网站,发现某些不需要的声明并不少见。.

例如,在一般博客上,您可能不会使用它们。只需摆脱对要构建的特定站点不需要的任何内容。您可以 使用一组规则可确保更好地优化工作 关于重置或框架.

但是,在默认状态下,不应接受它们。为了保持CSS文件的可读性和精简性,请单独查看每个声明,并减少不必要的声明.

5.面向未来的CSS

CSS语法

另一个有用的CSS优化选项:将大多数规则与特定于布局的声明分开.

如果可能,将布局分配给自己的单独文件。如果没有,至少给它自己的部分可能是有益的.

最终,定位和浮动-这是使用CSS的当前方法- 并不是要用作布局工具.

有人甚至说这些实际上类似于布局黑客。目前尚无可行的替代方案,希望一旦达成一致的布局标准,它们就会开始获得浏览器的支持。.

一旦提供了这种支持,就可以很轻松地换出被黑的箱式模型属性,以用于布局。.

现在, 最佳选择是使用正确的属性处理布局. 与使用当前可用来补偿怪癖的有限属性集相比,这通常可以更有效地压缩页面重量。.

6.始终保持有关工作的最新文档

无论您是作为团队还是单独在网站上工作,都必须跟踪您所做的一切.

例如,一个人,您可能会忘记所做的事情。作为一个团队,某人可能会做某事,并且您可能直到做出可能导致代码各个元素出现问题的更改时才意识到.

添加CSS评论对于团队和个人设计师来说,代码重复都是一个巨大的关注领域,尤其是在使用流行的网站构建器时。 Wix,Squarespace和其他网站构建软件是 以复制代码或从数据库中完全丢失代码而闻名.

使用样式表指南和标记指南是可行的文档选择。您还可以使用CSS注释,这是另一种选择,这对于分割长CSS文件的元素可能很有用。将它们放在样式或标记指南中,可防止它们增加文件大小.

膨胀代码最快的方法之一是两次执行相同的工作。编码很复杂,因此必须准确记录所有已完成的工作.

如果您是一个人工作,那么每次坐下来开始工作时,最好查看此文档。在团队中工作时,请确保每个人都在同一文档中编码 遵守社区风格或标记指南 这样小组中的每个人都容易理解编码更改.

7.压缩文件(CSS优化101)

CSS压缩和优化gif

压缩:还有更多……

优化CSS的一种有效方法是使用压缩。这是确保您的文件对浏览器友好的一种方法,即使该文件是人类无法读取的.

与工作副本相比,这些副本只是大小的一小部分。您可以利用各种应用程序来简化压缩过程.

这些将执行任务,例如查找并修复相互覆盖的任何CSS属性,压缩空白并寻找使用CSS速记的机会.

除了这些应用程序的便利性之外,它们还可以帮助您了解有关可以手动完成的任务的更多信息。您还可以使用各种文本编辑器来帮助格式化CSS文件.

他们可以提供您拥有的各种CSS文件的zip版本。通常使用PHP完成此操作。如果要使用优化和压缩工具,请确保在选择正确的选项之前先复查多个选项.

现在,这些应用程序通常擅长将错误最小化,但它们并不完美。因此,在使用应用程序后,应始终检查CSS以确保准确性。经过优化和整洁的代码对于文件大小,可读性和维护性都至关重要。.

轮到你了

此处讨论的原理是CSS的坚实考虑因素,也是JavaScript,HTML和其他编程语言的考虑因素。与网站的呈现相比,CSS文件对最终用户而言并不那么突出.

但是,此处讨论的原理有助于开发经验和用户体验.

大多数优秀的网络托管公司都会为您优化CSS。更快的网站使您成为满意的客户,但是较小的文件也减轻了服务器的负担.

我们已经测试了加拿大的每一个虚拟主机,并推荐使用SiteGround。它们不仅帮助您优化CSS交付,而且其技术支持无与伦比.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map