首页 > 知识•资讯 > 2019年如何重构CSS代码 > 正文

2019年如何重构CSS代码

2019/8/19 0:00:00 · 稿源:传诚信

编写好的代码不仅仅是在网站设计上获得所需的结果。好的代码应该尽可能高效和简洁。虽然通常有许多方法可以获得相同的结果,但最简洁和最简单的方法是,除了少数例外,它是理想的选择。
编写好的,干净的代码有两个主要的好处。首先,它可以显着提高网站的速度和性能。您的文件越小(发送的外部请求越少),您的网站在浏览器中加载所需的时间就越少。其次,编写好的代码具有使其更易于维护的宝贵好处。无论您是自己编写项目还是与其他开发人员编写代码,代码越精益(理想情况下都有良好的文档),对于任何不得不重新访问代码库的人来说,这都是一件令人头疼的问题。
编写优秀代码的最佳实践通常适用于所有编程语言,尽管这篇文章将专门用于改进您网站上的CSS。

网站建设


删除不必要的HTTP请求
在网站设计的过程中,您最终可能会从HTML文档或CSS文件中链接到多个外部文件和依赖项。您可以尝试托管在外部CDN上的多种不同字体或CSS框架。这些依赖项中的每一个都表示您的站点每次在浏览器中加载时发出的HTTP请求。这给网站加载时间带来了很大压力,所有这些请求都很快就会增加。
如果您向项目添加了一堆外部字体文件,但当前只在CSS文件中引用了1或2,请从HTML文档中删除任何这些链接的依赖项。
您只使用CSS框架只需几行代码吗?考虑将这些行复制并粘贴到主.css样式表中,并删除指向原始CSS框架代码的链接。


简化和整合CSS规则
在编写CSS时,您最终可能会为各种不同的元素和选择器重复编写相同的规则。在计算机编程中,经常重复的“干”概念(不要重复自己)也适用于CSS。只要您发现自己为不同的选择器编写相同的CSS规则,就可以找到合并它们的方法。


重新获取您的ID和类值
将样式表示的一个方面指定为您的类或ID值通常很诱人,但这远非理想。例如,对于错误消息,使用它red作为类或ID值通常似乎是有意义的,如下所示:

这是一条错误消息
 但是如果你改变这个类的颜色或其他样式会发生什么?该课程将不再与其内容或演示文稿直接相关,并且很可能会引起混淆。在这种情况下更好的选择是使用一个解释其功能的类值,而不是它的风格表示:
这是一条错误消息
使用描述该元素的内容或功能的类和ID值总是一个好主意,而不是任何样式描述。在创建网站的过程中,样式可以多次更改,但使用函数描述符将使代码更易读,更易于维护。

网站建设


重新选择您的选择器
选择元素通常有许多不同的方法,但通常比其他方式更有效。虽然可以将选择器嵌套在彼此内部以便到达特定元素,但如果您发现自己必须进入太多级别,则最好重新评估类或ID值是否会更好地运行。


缩小CSS文件
一旦您的CSS文件完全准备好生产并部署到实时服务器,最好将它们缩小以获得最佳性能。缩小器将从源代码中删除所有空白区域,从而显着减小文件大小。由于源代码不依赖于空白区域来实现其功能(仅具有可读性),因此不会对网站的运行方式产生负面影响。


整合您的CSS文件
虽然在开发阶段保持CSS模块化有一个很好的论据(例如将布局规则保存在一个CSS文件中,另一个CSS文件中的颜色选项等) - 最终你需要将所有这些CSS规则合并到一个文件中最棒的表演。

更多的重构CSS信息,您可以联系北京网站建设公司,我们将为您提供专业的网站开发服务。

  • 相关推荐
  • 大家在看
客户服务
咨询热线

010-62199213

24小时咨询热线

139-1050-5354