15个让你的生活更轻松的CSS最佳实践

CSS始于1997年,旨在帮助网站开发者创建和设计他们自己有吸引力的网页。级联样式表(CSS)是一种用来改变文档格式和外观的语言。CSS的类型不同,但是它被广泛使用和支持在所有浏览器上。

当谈到使用CSS时,很容易让自己陷入一团糟。无论是来自各地的小变化,还是从一份杂乱无章的工作开始,清理工作都是一场斗争。为了保持代码的清晰和易于管理,可以从头到尾改进CSS过程。

3个CSS样式表的基本类型

Inline内联——内联样式表具有写入文档标记的代码。它们只对它们所应用的标签有影响。

External-----外部——这些类型的样式表是在一个单独的文档中创建的。然后将它们附加到其他种类的网络文档上。这些外部样式表对附加它们的任何文档都有影响。

以下是15个最佳CSS实践

1.使事情井然有序

当涉及到生活中的任何事情时,保持有条不紊是值得的。有条不紊可以减轻压力,并且更容易处理。这可以证明在处理CSS时特别重要。与其按照代码出现在您脑海中的顺序编写代码,不如将代码保持在一个有组织的布局中。

首先从最一般和最不重要的项目开始,然后进一步深入到更重要的项目。这将创建一个逻辑结构,使得将来编辑CSS更加容易。使用简单的布局和结构不仅对将来的编辑有用,而且对未来的开发人员也很有用。

2.避免使用内联CSS

尽管内联CSS有其目的,但是由于某些特定的原因,应该避免使用内联CSS。其中一个主要原因是内联样式不能将内容与设计分离。这可以证明使开发和设计变得困难。避免内联CSS的另一个原因是因为维护起来要困难得多。

如果需要对内联CSS代码进行编辑,那么一旦它被删除,它被放置的每个页面上的每个元素也必须被删除。最后,内联样式的CSS不容易访问,它们使页面更大。

3.从设计中分离内容

使用CSS的最重要原因之一是保持设计代码不与HTML接触,并将它们保持在另一个位置,以便于设计人员定位和维护。这也证明是一个好主意,因为网站的设计者不一定非得也是内容开发者。

4.日期、名称和签名

当其他人需要询问关于CSS的问题时,让联系人信息位于代码顶部可能非常有用。在为其他人设计诸如主题和模板之类的东西时,这甚至会更有用。另外,在代码的顶部添加用于样本颜色的HTML代码也是一个很好的实践。这样做可以节省进行编辑的人员和更改大量的时间,因为他们不需要找出颜色的代码。他们所要做的就是向上滚动到顶部并复制它。

5.保存模板库

如果在CSS模板中经常使用相同的结构,为什么不保留它的副本呢?没有必要每次都从头开始。为了节省时间,取出所有非通用的代码,然后将文件保存为CSS模板以供以后使用。

6.使用短手CSS

为了使样式表加载更快,并节省时间,始终使用速记编码CSS。这将使样式表保持美观和整洁,并且是一种很好的CSS编码实践。

Instead of this:

You should do this:

7.使用有用的命名实践

如前所述,使用CSS的最佳原因之一是能够从内容中分离样式的优势。CSS使得重新设计站点变得非常简单,而无需触碰任何HTML。如果列ID是将来很难更改的名称,那么这实际上会限制并增加很多时间。使用通用的名称。不要给列起个左边的名字或类似的名字,因为将来它不会留出太多的空间来移动东西。

8.用连字符代替小写字母

对于较老版本的浏览器,如果使用下划线,CSS可能会出现问题,甚至根本不起作用。使用连字符可以获得更好的向后兼容性和更少的小故障。

9.不要重复

让您的生活更轻松的最佳CSS实践之一是尽可能使用快捷方式。始终在寻找对可能使用相同字体大小、边距和颜色的类似项目进行分组的方法。请记住CSS解释这些快捷方式的方式。顺序是顶部,右边,底部,然后左边。想想从12点开始的顺时针运动。

上面的方式比下面的方式更有效:

10.避免使用非常大的图像

在网页的背景中使用大图像将增加页面加载时间。如果可能,最好使用较小的图像,并在需要时应用重复CSS属性。

11.针对较小样式表进行优化

通过使用上面的一些技巧,它可以真正帮助减少样式表的大小。通过拥有一个更小的样式表,加载页面所需的时间将更快。而且,通过具有更小的样式表,在需要时维护和更新将更容易。总是删除不必要的代码,并尽可能进行合并。

在使用CSS框架时要小心。这些可以添加大量不必要的、不需要的、也不会使用的块。保持样式表较小的另一个快速技巧是不指定零作为度量单位。如果边距被设置为0,则不必称之为0px或0em。CSS将理解零是零,不管度量单位是什么。

12.验证CSS

如果代码没有按计划进行,那么试图找出错误在哪里可能会令人沮丧和耗时。为了节省一些时间,使用W3C的CSS验证器W3C’s CSS validator来帮助发现CSS中的一些常见错误。这是一个免费的工具来使用,真的很方便。

13.使用重置CSS

通过使用CSS重置,将避免浏览器不一致。在实践中,重要的是,使用删除不一致的边距以及行高、填充和其他不一致的属性,这些属性使得网页在不同的浏览器之间看起来不同。使用CSS重置可以让页面在不同的浏览器之间保持一致。

CSS Reset:

14.编写Gecko 的基础

通常,如果CSS对于Gecko浏览器(Netscape、Firefox、Mozilla、Camino、Flock)工作正常,那么它很可能在其他浏览器(如IE和Webkit(Sarari、Chrome))中也能很好地工作。为了节省时间和麻烦试图找出代码错误,最好先为Gecko浏览器编写CSS。

15.保持东西整洁

作为习惯,最好将浏览器特定的样式表彼此分开,并根据需要包括JavaScript、条件注释和服务器端代码。这种方法对于避免CSS入侵到主CSS样式表中是非常有用的。这对于维护干净和可管理的CSS是必不可少的。

结论:

说到使用CSS,有很多好处。它不仅使页面加载更快,而且如果使用15种最好的CSS实践来使您的生活从上面变得更容易,那么它可以使设计和编辑主题和模板更加容易。使用CSS样式表也带来了Google的好处。Google喜欢对更接近HTML文档顶部的内容赋予更多的权重。当搜索引擎蜘蛛抓取网站的HTML时,它们抓取首先出现的内容。通过使用CSS,可以很容易地创建一个布局,其中内容将首先出现,然后其余页面的源代码将跟随。

使用CSS可以在设计、模板和主题中创建更多的灵活性。它也提供了更好的可访问性,这是未来网页设计的方向。可访问性意味着更多的人最终将能够查看网站,而不会因为使用表格等过时的网站建设方式而造成任何麻烦。使用CSS不仅能让生活更轻松,而且将来也会有帮助。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181214G0QZMV00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励