网站建设之如何在网站建设中避免“重复”的CSS

处理内置于主题和框架中的Bloat

过去，网站本质上是从头开始构建的。这是一个很棒的方法，因为设计师可以只包含所需的样式和脚本。如果谨慎进行，此过程可能会导致网站的优化。

当然，有许多原因导致我们许多人放弃了这种做法。就时间和预算限制而言，这根本没有效率。

因此，现代网站通常建立在预建产品之上。那可能是一个CSS框架，例如Bootstrap或精心设计的WordPress主题。在某些情况下，CMS主题甚至可能包含框架。

这些产品是一刀切的。通过包含您可能需要的所有内容，它可以使开发更快。不幸的是，不能说它们对性能的影响。

那么，怎样才能改善这种情况呢？

尽可能使用基于组件或轻量级的框架

从理论上讲，既有可能在避免膨胀的同时获得框架的优势。这可以通过使用基于组件的程序包来实现，这些程序包使您可以加载特定功能，而忽略其他功能。前面提到的Bootstrap确实允许这种类型的自定义–一点。

另一个替代方法是Tailwind CSS，它提供了基本样式，并假定您将在它们之上进行构建。如果您正在寻找一个很好的起点，而不是更成品，那么这可能是个合适的选择。

使用框架没有错。但是，请寻找以下之一：a）让您选择要加载的组件，或者；b）提供可以轻松自定义的准系统样式表。无论哪种方式，您的项目都将从减少的负载中受益。

网站建设

CMS主题怎么办？

诸如商业WordPress主题之类的产品可能会很棘手，因为它们经常包含大量样式–无论您是否需要它们。

一个特定的主题可能会组织得井井有条，以至于可以很容易地使不需要的样式表出队。甚至可能有一个主题选项面板，让您单击几下即可执行此操作。但是，这很可能是例外而不是规则。

避免主题theme肿的最佳方法是创建自己的主题。例如，WordPress入门主题将提供一些您可以自定义的准系统CSS。这有助于确保样式表更简洁，并至少消除与CMS相关的少量开销。

网站建设

整理现有样式表

可以通过以下两种方式之一来改变我们对现有网站的关注，整理和重构CSS：

手动检查样式

启动您最喜欢的代码编辑器并打开网站的样式表始终是一个不错的起点。是的，这可能是一个乏味的经历。但这也是照顾低挂水果的有效方法。

不必仔细检查CSS的每一行。取而代之的是，该想法是找到您未使用或效率不高的所有项目。

例如，假设您运行的WordPress网站具有一些自定义样式以覆盖插件的样式。如果您不再使用该特定插件怎么办？在这种情况下，可以轻松删除样式。

或者，也许您偶尔会使用一些样式，例如在寒假期间。将这些样式移动到单独的文件中并仅在需要时才调用它们可能是值得的。

然后是一些CSS选择器，它们写得不太好。也许他们有许多不再需要的浏览器前缀或不必要的重复属性。这是清理的成熟区域。

如果您的网站设计已有两年之久，您可能会惊讶于可以找到多少多余的样式。

使用自动化工具

有很多工具可以扫描您的网站（或网站的至少一部分）并使用未使用的CSS列表进行报告。但是，在等待完美时不要屏住呼吸。

与自动辅助工具一样，未使用的CSS扫描器只能为您提供大量信息。因此，最好以一粒盐作为结果，并将其用作指导，而不是问题的最终答案。

CSS-Tricks的Chris Coyier就此特定问题撰写了出色的文章，值得一试。他不仅测试了其中一些工具，还研究了手头更大的问题，例如媒体查询。

但是，如果您有兴趣尝试这些工具中的一种或多种，​​那么一些较流行的选择是：

• 吉比特
• 清除CSS
• 净化CSS
• 未使用的CSS

自动化工具和手动审核的结合可能是最好的做法。两者都可以使您对潜在的性能优化有更全面的了解。您可能不会捕获所有单个项目，但仍有机会产生可衡量的影响。您可以在测试之前和之后使用GTmetrix之类的工具进行一些操作以查看结果。

说到CSS：不要浪费，不要浪费

样式表可以达到多大令人惊讶，尤其是在使用现成的CSS框架时。当然，很高兴作者在样式元素方面为您完成了许多艰苦的工作。同时，在页面呈现和加载时间方面，它留在桌子上很多。

从项目一开始就应该注意这一点。通过减少样式表的权重，您正在帮助将优化的最后一滴从网站中删除。

如果您的网站已经遍布全世界，那么您仍然可以采取一些积极的步骤。查看CSS，查找要简化或删除的项目。利用那里的许多自动化工具之一查找您可能错过的物品。

最重要的是，将CSS缩减为基本要素并不是一个完美的过程。但是，仍然值得您花费时间和精力。